Merge pull request #60 from Leets-Official/58-feat/메인페이지-케로셀-제작

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

Author: KyeongJooni

package.json

@@ -34,6 +34,7 @@
     "react-dom": "^19.2.3",
     "react-hook-form": "^7.71.1",
     "react-router": "7.12.0",
+    "swiper": "^12.0.3",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2",
     "zod": "^4.2.1",

src/app/routes/(main)/_index.tsx

@@ -1,3 +1,3 @@
-import MainPage from '@pages/main';
+import { MainPage } from '@pages/main';
 
 export default MainPage;

src/pages/login/index.ts

@@ -1 +1 @@
-export { default as LoginPage } from './ui/LoginPage';
+export { LoginPage } from './ui';

src/pages/login/ui/LoginPage.tsx

@@ -1,11 +1,11 @@
-import loginBg from '@shared/assets/background/login_background.png';
+import { loginBackgroundImg } from '@shared/assets/background';
 import { kakaoLoginImg } from '@shared/assets/icons';
 import { Logo } from '@shared/ui/Logo';
 import { loginStyles as s } from './LoginPage.styles';
 
 export default function LoginPage() {
   return (
-    <div className={s.wrapper} style={{ backgroundImage: `url(${loginBg})` }}>
+    <div className={s.wrapper} style={{ backgroundImage: `url(${loginBackgroundImg})` }}>
       <div className="flex h-full w-full flex-col items-center justify-center gap-[26px] px-6 py-12">
         <Logo className="h-[36px] w-[192px] cursor-pointer" />
 

src/pages/login/ui/index.ts

@@ -0,0 +1 @@
+export { default as LoginPage } from './LoginPage';

src/pages/main/index.ts

@@ -1 +1 @@
-export { default } from './ui/MainPage';
+export { MainPage } from './ui';

src/pages/main/ui/BannerCards.tsx

@@ -0,0 +1,44 @@
+import { GearIcon, SellIcon, ShoppingIcon } from '@shared/assets/icons';
+import { ROUTES } from '@shared/constants';
+
+export const BANNER_CARDS = [
+  {
+    id: 'buy',
+    title: (
+      <>
+        중고 전자기기
+        <br />
+        구매하기
+      </>
+    ),
+    description: '합리적인 매물을 찾아보세요.',
+    imageSrc: ShoppingIcon,
+    route: ROUTES.BUY,
+  },
+  {
+    id: 'sell',
+    title: (
+      <>
+        중고 전자기기
+        <br />
+        판매하기
+      </>
+    ),
+    description: '사용하지 않는 기기를 판매해보세요.',
+    imageSrc: SellIcon,
+    route: ROUTES.SELL,
+  },
+  {
+    id: 'repair',
+    title: (
+      <>
+        근처
+        <br />
+        수리점 찾기
+      </>
+    ),
+    description: '가까운 수리점을 찾아드려요.',
+    imageSrc: GearIcon,
+    route: ROUTES.REPAIR,
+  },
+];

src/pages/main/ui/CarouselSlides.tsx

@@ -0,0 +1,39 @@
+import {
+  PhoneRecycleImage,
+  PhoneRepairImage,
+  PhoneSellImage,
+  SloganImage,
+  SmartphoneImage,
+} from '@shared/assets/images';
+import { CarouselImageSlide } from '@shared/ui/Carousel3D';
+
+export const CAROUSEL_SLIDES = [
+  {
+    id: 1,
+    content: (
+      <CarouselImageSlide imageSrc={SloganImage} title="버리기 전, 루핏" subtitle="Before you throw out, LOOPIT" />
+    ),
+  },
+  {
+    id: 2,
+    content: (
+      <CarouselImageSlide imageSrc={SmartphoneImage} title="중고폰 구매" subtitle="검증된 중고폰을 합리적인 가격에" />
+    ),
+  },
+  {
+    id: 3,
+    content: (
+      <CarouselImageSlide imageSrc={PhoneSellImage} title="내 폰 판매" subtitle="안 쓰는 폰, 현금으로 바꾸세요" />
+    ),
+  },
+  {
+    id: 4,
+    content: (
+      <CarouselImageSlide imageSrc={PhoneRepairImage} title="수리점 찾기" subtitle="가까운 수리점을 찾아드려요" />
+    ),
+  },
+  {
+    id: 5,
+    content: <CarouselImageSlide imageSrc={PhoneRecycleImage} title="친환경 순환" subtitle="버려지는 폰에 새 생명을" />,
+  },
+];

src/pages/main/ui/MainPage.tsx

@@ -1,54 +1,35 @@
-import { GearIcon, SellIcon, ShoppingIcon } from '@shared/assets/icons';
 import { ROUTES } from '@shared/constants';
 import { BannerCard } from '@shared/ui/BannerCard';
+import { Carousel3D } from '@shared/ui/Carousel3D';
 import { ChatbotFloatingButton } from '@shared/ui/ChatbotFloatingButton';
+import { ClientOnly } from '@shared/ui/ClientOnly';
 import { useNavigate } from 'react-router';
+import { BANNER_CARDS } from './BannerCards';
+import { CAROUSEL_SLIDES } from './CarouselSlides';
 
 export default function MainPage() {
   const navigate = useNavigate();
 
   return (
     <main className="flex w-full flex-col items-center gap-14 px-4 pt-8 pb-24">
-      <section className="h-79.25 w-full max-w-300" aria-label="메인 슬로건 영역" />
+      <section className="h-79.25 w-full max-w-300" aria-label="메인 슬로건 영역">
+        <ClientOnly>
+          <Carousel3D slides={CAROUSEL_SLIDES} />
+        </ClientOnly>
+      </section>
 
-      <section className="grid w-full max-w-300 grid-cols-1 gap-6 xl:grid-cols-3">
-        <BannerCard
-          title={
-            <>
-              중고 전자기기
-              <br />
-              구매하기
-            </>
-          }
-          description="합리적인 매물을 찾아보세요."
-          imageSrc={ShoppingIcon}
-          onClick={() => navigate(ROUTES.BUY, { viewTransition: true })}
-        />
-        <BannerCard
-          title={
-            <>
-              중고 전자기기
-              <br />
-              판매하기
-            </>
-          }
-          description="사용하지 않는 기기를 판매해보세요."
-          imageSrc={SellIcon}
-          onClick={() => navigate(ROUTES.SELL, { viewTransition: true })}
-        />
-        <BannerCard
-          title={
-            <>
-              근처
-              <br />
-              수리점 찾기
-            </>
-          }
-          description="가까운 수리점을 찾아드려요."
-          imageSrc={GearIcon}
-          onClick={() => navigate(ROUTES.REPAIR, { viewTransition: true })}
-        />
+      <section className="grid w-full max-w-300 grid-cols-1 gap-6 xl:grid-cols-3" aria-label="서비스 배너 영역">
+        {BANNER_CARDS.map((card) => (
+          <BannerCard
+            key={card.id}
+            title={card.title}
+            description={card.description}
+            imageSrc={card.imageSrc}
+            onClick={() => navigate(card.route, { viewTransition: true })}
+          />
+        ))}
       </section>
+
       <ChatbotFloatingButton
         className="fixed right-4 bottom-4"
         onClick={() => navigate(ROUTES.CHATBOT, { viewTransition: true })}

src/pages/main/ui/index.ts

@@ -0,0 +1 @@
+export { default as MainPage } from './MainPage';