From 9d4e06b268e681deff1e4da1498b77b64fe8e9e0 Mon Sep 17 00:00:00 2001
From: Taeil08 <ejrrhcl56@naver.com>
Date: Sat, 2 Aug 2025 21:03:14 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F[#216]=20Refactor:=20?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B8=EC=B9=B4=EB=93=9C=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=86=92?=
 =?UTF-8?q?=EC=9D=B4=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/what-today/src/pages/main/index.tsx      |  3 +-
 .../src/components/Carousel/Carousel.tsx      |  4 ++-
 .../src/components/Carousel/types/index.ts    |  1 +
 .../src/components/MainCard/Content.tsx       | 27 +++++++++-------
 .../src/components/MainCard/Image.tsx         |  2 +-
 .../src/components/MainCard/MainCardRoot.tsx  |  3 +-
 .../src/components/MainCard/types/index.tsx   |  1 +
 .../design-system/src/pages/MainCardDoc.tsx   | 31 ++++++++++++++-----
 8 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/apps/what-today/src/pages/main/index.tsx b/apps/what-today/src/pages/main/index.tsx
index 2d0a9669..b07af229 100644
--- a/apps/what-today/src/pages/main/index.tsx
+++ b/apps/what-today/src/pages/main/index.tsx
@@ -138,6 +138,7 @@ export default function MainPage() {
       <MemoizedMainCard
         key={`${item.id}-${currentPage}-${index}`}
         bannerImageUrl={item.bannerImageUrl}
+        category={item.category}
         price={item.price}
         rating={item.rating}
         reviewCount={item.reviewCount}
@@ -159,7 +160,7 @@ export default function MainPage() {
         {/* 인기 체험 */}
         <div className='flex flex-col gap-20'>
           <h2 className='title-text'>🔥 인기 체험</h2>
-          <div className='-mx-15 flex'>
+          <div className='flex'>
             <Carousel items={popularActivities} itemsPerPage={4} onClick={(id) => navigate(`/activities/${id}`)} />
           </div>
         </div>
diff --git a/packages/design-system/src/components/Carousel/Carousel.tsx b/packages/design-system/src/components/Carousel/Carousel.tsx
index cc79141a..18ed30da 100644
--- a/packages/design-system/src/components/Carousel/Carousel.tsx
+++ b/packages/design-system/src/components/Carousel/Carousel.tsx
@@ -30,7 +30,7 @@ export default function Carousel({ items, itemsPerPage: initialItemsPerPage = 4,
 
   return (
     <div className='relative w-full overflow-visible'>
-      <div className='relative mx-auto flex max-w-6xl items-center justify-center'>
+      <div className='relative mx-auto flex items-center justify-center'>
         {/* 왼쪽 버튼 */}
         <NavigationButton direction='left' disabled={page === 0} onClick={handlePrev} />
 
@@ -50,6 +50,7 @@ export default function Carousel({ items, itemsPerPage: initialItemsPerPage = 4,
               >
                 <MainCard.Root
                   bannerImageUrl={item.bannerImageUrl}
+                  category={item.category}
                   price={item.price}
                   rating={item.rating}
                   reviewCount={item.reviewCount}
@@ -77,6 +78,7 @@ export default function Carousel({ items, itemsPerPage: initialItemsPerPage = 4,
             <MainCard.Root
               key={item.id}
               bannerImageUrl={item.bannerImageUrl}
+              category={item.category}
               className='w-265 shrink-0'
               price={item.price}
               rating={item.rating}
diff --git a/packages/design-system/src/components/Carousel/types/index.ts b/packages/design-system/src/components/Carousel/types/index.ts
index 35600188..222d4e05 100644
--- a/packages/design-system/src/components/Carousel/types/index.ts
+++ b/packages/design-system/src/components/Carousel/types/index.ts
@@ -28,4 +28,5 @@ export interface CarouselProps {
   rating: number;
   reviewCount: number;
   bannerImageUrl: string;
+  category: string;
 }
diff --git a/packages/design-system/src/components/MainCard/Content.tsx b/packages/design-system/src/components/MainCard/Content.tsx
index 34e279d4..2e5d362b 100644
--- a/packages/design-system/src/components/MainCard/Content.tsx
+++ b/packages/design-system/src/components/MainCard/Content.tsx
@@ -18,7 +18,7 @@ export default function MainCardContent({
   priceClassName,
   iconColor = '#FFC23D',
 }: Props) {
-  const { title, price, rating, reviewCount } = useMainCardContext();
+  const { title, price, rating, reviewCount, category } = useMainCardContext();
 
   return (
     <div className='absolute bottom-0 left-0 w-full'>
@@ -28,18 +28,23 @@ export default function MainCardContent({
           className,
         )}
       >
-        <div className='flex flex-col gap-4'>
-          <h3 className={twMerge('body-text line-clamp-1 truncate font-bold', titleClassName)}>{title}</h3>
-          <div className='caption-text flex items-center gap-2'>
-            <StarIcon filled className='size-15' color={iconColor} />
-            <span className={twMerge('', ratingClassName)}>{rating}</span>
-            <div className='text-gray-400'>({reviewCount.toLocaleString()})</div>
+        <div className='flex flex-col gap-20'>
+          <div className='flex flex-col gap-2'>
+            <span className='caption-text text-gray-400'>{category}</span>
+            <h3 className={twMerge('body-text line-clamp-1 truncate font-bold', titleClassName)}>{title}</h3>
+            <div className='caption-text flex items-center gap-2'>
+              <StarIcon filled className='size-15' color={iconColor} />
+              <span className={twMerge('', ratingClassName)}>{rating}</span>
+              <div className='text-gray-400'>({reviewCount.toLocaleString()})</div>
+            </div>
+          </div>
+          <div>
+            <p className={twMerge('body-text font-bold', priceClassName)}>
+              ₩ {price.toLocaleString()}
+              <span className='font-normal text-gray-400'> /인</span>
+            </p>
           </div>
         </div>
-        <p className={twMerge('body-text font-bold', priceClassName)}>
-          ₩ {price.toLocaleString()}
-          <span className='font-normal text-gray-400'> /인</span>
-        </p>
       </div>
     </div>
   );
diff --git a/packages/design-system/src/components/MainCard/Image.tsx b/packages/design-system/src/components/MainCard/Image.tsx
index 0081f7df..03929fad 100644
--- a/packages/design-system/src/components/MainCard/Image.tsx
+++ b/packages/design-system/src/components/MainCard/Image.tsx
@@ -8,7 +8,7 @@ export default function MainCardImage({ className }: { className?: string }) {
     <div className={twMerge('w-full rounded-xl border border-gray-50', className)}>
       <img
         alt={`${title} 체험 이미지`}
-        className='h-260 w-full rounded-xl object-cover md:h-366 lg:h-300'
+        className='h-260 w-full rounded-xl object-cover md:h-366 lg:h-340'
         loading='lazy'
         src={bannerImageUrl}
       />
diff --git a/packages/design-system/src/components/MainCard/MainCardRoot.tsx b/packages/design-system/src/components/MainCard/MainCardRoot.tsx
index ec9e5c98..a25c72ba 100644
--- a/packages/design-system/src/components/MainCard/MainCardRoot.tsx
+++ b/packages/design-system/src/components/MainCard/MainCardRoot.tsx
@@ -11,10 +11,11 @@ export default function MainCardRoot({
   reviewCount,
   children,
   className,
+  category,
   onClick,
 }: MainCardProps) {
   return (
-    <MainCardContext.Provider value={{ title, price, bannerImageUrl, rating, reviewCount, onClick }}>
+    <MainCardContext.Provider value={{ title, price, bannerImageUrl, rating, reviewCount, category, onClick }}>
       <div className='rounded-xl'>
         <div
           className={twMerge(
diff --git a/packages/design-system/src/components/MainCard/types/index.tsx b/packages/design-system/src/components/MainCard/types/index.tsx
index a565ba54..bfe2f43a 100644
--- a/packages/design-system/src/components/MainCard/types/index.tsx
+++ b/packages/design-system/src/components/MainCard/types/index.tsx
@@ -15,6 +15,7 @@ export interface MainCardContextType {
   bannerImageUrl: string;
   rating: number;
   reviewCount: number;
+  category: string;
   onClick?: () => void;
 }
 
diff --git a/packages/design-system/src/pages/MainCardDoc.tsx b/packages/design-system/src/pages/MainCardDoc.tsx
index d14e0fe9..19b3cb1d 100644
--- a/packages/design-system/src/pages/MainCardDoc.tsx
+++ b/packages/design-system/src/pages/MainCardDoc.tsx
@@ -5,7 +5,7 @@ import DocTemplate, { DocCode } from '../layouts/DocTemplate';
 
 /* Playground는 편집 가능한 코드 블록입니다. */
 /* Playground에서 사용할 예시 코드를 작성해주세요. */
-const code = `<MainCard
+const code = `<MainCard.Root
   title='스카이다이빙'
   price={200000}
   bannerImageUrl='https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1000&q=80'
@@ -15,7 +15,7 @@ const code = `<MainCard
 >
   <MainCard.Image />
   <MainCard.Content />
-</MainCard>`;
+</MainCard.Root>`;
 
 export default function MainCardDoc() {
   return (
@@ -59,24 +59,26 @@ Main에서 쓰이는 인기체험 모든체험 Card입니다.
       </div>
       <h3 className='text-2xl'>기본 MainCard 예시 입니다.</h3>
       <DocCode
-        code={`        <MainCard
+        code={`        <MainCard.Root
         title='스카이다이빙'
         price={200000}
         bannerImageUrl='https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1000&q=80'
         rating={4.8}
         reviewCount={121}
+        category="식음료"
         className='w-[265px]'
       >
         <MainCard.Image />
         <MainCard.Content />
-      </MainCard>`}
+      </MainCard.Root>`}
       />
 
       <h3 className='text-2xl'>커스텀 MainCard 예시 입니다.</h3>
 
-      <div>
+      <div className='flex gap-20'>
         <MainCard.Root
           bannerImageUrl='https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1000&q=80'
+          category='식음료'
           className='w-[265px]'
           price={200000}
           rating={4.8}
@@ -85,22 +87,35 @@ Main에서 쓰이는 인기체험 모든체험 Card입니다.
         >
           <MainCard.Image className='rounded-t-3xl brightness-90 contrast-125' />
           <MainCard.Content
-            className='rounded-b-3xl border-t border-white/10 bg-gradient-to-t from-black/60 to-transparent px-16 py-12 shadow-xl'
+            className='rounded-b-3xl border-t border-white/10 bg-gradient-to-t from-black/60 to-transparent px-16 py-12 text-white shadow-xl'
             iconColor='#FFD700' // 골드 컬러
             priceClassName='text-pink-400 font-bold text-lg'
             ratingClassName='text-emerald-300 font-semibold'
             titleClassName='text-white font-extrabold tracking-wider drop-shadow-[0_2px_2px_rgba(0,0,0,0.7)]'
           />
         </MainCard.Root>
+        <MainCard.Root
+          bannerImageUrl='https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1000&q=80'
+          category='식음료'
+          className='w-[265px]'
+          price={200000}
+          rating={4.8}
+          reviewCount={121}
+          title='스카이다이빙'
+        >
+          <MainCard.Image className='rounded-t-3xl brightness-90 contrast-125' />
+          <MainCard.Content />
+        </MainCard.Root>
       </div>
 
       <DocCode
-        code={`         <MainCard
+        code={`         <MainCard.Root
           bannerImageUrl='https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1000&q=80'
           className='w-[265px]'
           price={200000}
           rating={4.8}
           reviewCount={121}
+          category="식음료"
           title='스카이다이빙'
         >
           <MainCard.Image className='rounded-t-3xl brightness-90 contrast-125' />
@@ -111,7 +126,7 @@ Main에서 쓰이는 인기체험 모든체험 Card입니다.
             ratingClassName='text-emerald-300 font-semibold'
             priceClassName='text-pink-400 font-bold text-lg'
           />
-        </MainCard>`}
+        </MainCard.Root>`}
       />
     </>
   );