test(Card): variant 테스트 추가 및 스토리 수정

Author: KyeongJooni

src/shared/ui/Card/Card.stories.tsx

@@ -58,7 +58,7 @@ export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-col gap-8">
       <div className="flex flex-col gap-2">
-        <span className="typo-caption-1">Default (구매페이지용) - 204x299</span>
+        <span className="typo-caption-1">Default (구매페이지용) - 180x299</span>
         <div className="flex gap-4">
           <Card image="/iphone11.png" title="짧은 제목" price="10,000원" date="1일 전" />
           <Card

src/shared/ui/Carousel3D/Carousel3D.stories.tsx

@@ -1,5 +1,5 @@
 import { GearIcon, SellIcon, ShoppingIcon } from '@shared/assets/icons';
-import { PhoneRecycleImage, PhoneRepairImage, PhoneSellImage, SmartphoneImage } from '@shared/assets/images';
+import { Carousel1Image, Carousel2Image, Carousel3Image, Carousel4Image } from '@shared/assets/images';
 import { Carousel3D } from './Carousel3D.client';
 import { CarouselImageSlide } from './CarouselImageSlide';
 import { CarouselSlide } from './CarouselSlide';
@@ -61,24 +61,22 @@ const imageSlides = [
   {
     id: 1,
     content: (
-      <CarouselImageSlide imageSrc={SmartphoneImage} title="중고폰 구매" subtitle="검증된 중고폰을 합리적인 가격에" />
+      <CarouselImageSlide imageSrc={Carousel1Image} title="중고폰 구매" subtitle="검증된 중고폰을 합리적인 가격에" />
     ),
   },
   {
     id: 2,
     content: (
-      <CarouselImageSlide imageSrc={PhoneSellImage} title="내 폰 판매" subtitle="안 쓰는 폰, 현금으로 바꾸세요" />
+      <CarouselImageSlide imageSrc={Carousel2Image} title="내 폰 판매" subtitle="안 쓰는 폰, 현금으로 바꾸세요" />
     ),
   },
   {
     id: 3,
-    content: (
-      <CarouselImageSlide imageSrc={PhoneRepairImage} title="수리점 찾기" subtitle="가까운 수리점을 찾아드려요" />
-    ),
+    content: <CarouselImageSlide imageSrc={Carousel3Image} title="수리점 찾기" subtitle="가까운 수리점을 찾아드려요" />,
   },
   {
     id: 4,
-    content: <CarouselImageSlide imageSrc={PhoneRecycleImage} title="친환경 순환" subtitle="버려지는 폰에 새 생명을" />,
+    content: <CarouselImageSlide imageSrc={Carousel4Image} title="친환경 순환" subtitle="버려지는 폰에 새 생명을" />,
   },
 ];
 

tests/unit/shared/ui/Card/Card.test.tsx

@@ -43,6 +43,22 @@ describe('Card', () => {
     });
   });
 
+  describe('Variants', () => {
+    it('default variant 적용 (기본값)', () => {
+      const { container } = render(<Card {...defaultProps} />);
+
+      const card = container.firstChild;
+      expect(card).toHaveClass('w-[180px]', 'h-[299px]');
+    });
+
+    it('seller variant 적용', () => {
+      const { container } = render(<Card {...defaultProps} variant="seller" />);
+
+      const card = container.firstChild;
+      expect(card).toHaveClass('w-[282px]', 'h-[399px]');
+    });
+  });
+
   describe('Additional Props', () => {
     it('className prop 적용', () => {
       const { container } = render(<Card {...defaultProps} className="custom-class" />);