[Feat] 메인페이지 케로셀 제작

[KyeongJooni]

✨ 주요 변경사항

• 메인페이지에 3D 캐러셀 컴포넌트 적용
• 공용 훅(useClickOutside, useImageUpload) 추출
• FSD 구조에 맞게 pages ui 레이어 배럴 export 추가

---

📝 작업 상세 내용

신규 컴포넌트

• Carousel3D: Swiper 기반 3D 캐러셀 (SSR 대응을 위한 ClientOnly 래퍼 포함)
• ClientOnly: 클라이언트 사이드에서만 렌더링하는 유틸 컴포넌트

리팩토링

• useClickOutside 훅 추출: Header, UserMenu의 중복 로직 제거
• useImageUpload 훅 추출: 이미지 업로드 로직 공용화
• pages 폴더 구조 정리: ui/index.ts 배럴 파일 추가 (main, login, signup)
• Checkbox import 경로 수정: @assets → @shared/assets

메인페이지

• 캐러셀 슬라이드 데이터 분리 (carouselSlides.tsx)
• 배너카드 데이터 분리 (bannerCards.tsx)
• 배너카드 호버 애니메이션 크기 조정 (44% → 10%)

---

✅ 체크리스트

• PR 본문에 Close #번호 추가
• 불필요한 주석, 디버깅 코드 제거
• 기능 테스트 및 정상 동작 확인
• 커밋컨벤션 / 코드컨벤션 준수

---

📸 스크린샷 (선택)

메인페이지 캐로셀(오토플레이 슬라이드)

---

🔍 기타 참고사항

• Swiper 라이브러리 의존성 추가됨
• React Compiler 사용 중, useCallback 등 수동 메모이제이션 생략

---

🔗 관련 이슈

• Close [Feat] #58 - 메인페이지 케로셀 제작 #58

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
⚠️ Build Size: 16MB (10MB 초과)

[jwj0620gcu]

수고하셨습니다~ 너무 이쁩니다~!!

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
❌ Test: 실패
❌ Build: 실패

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
⚠️ Build Size: 16MB (10MB 초과)

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
⚠️ Build Size: 12MB (10MB 초과)

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 6MB

[YeBeenChoi]

오 대박이네요 고생 많으셨습니다! 👍👍