[#21] 카드 컴포넌트 작성 및 스토리북 작성

[gihwan-dev]

What is this PR? 🔍

카드 컴포넌트 구현했습니다. 다만 Card 컴포넌트가 CardContent, CardHeader .... 처럼 export 되는게 많아서 Card Container 컴포넌트 스타일만 수정하고 다른건 크게 건드리지 않았습니다...!

Changes 📝

다음과 같이 사용할 수 있습니다!

import Card from "@components/common/Card";

      <Card.Container verticalPaddingSize={'large'}>
        <Card.Content className={'p-0 text-regular-body font-semibold text-center'}>
          텍스트를 입력하세요
        </Card.Content>
      </Card.Container>

아래가 ShadCN 에서 import 할 수 있는 Card관련 컴포넌트 목록입니다!

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

그리도 다음과 같은 형태로 re export 되고 있습니다!

const Card = {
  Container,
  Header: CardHeader,
  Content: CardContent,
  Title: CardTitle,
  Description: CardDescription,
  Footer: CardFooter,
};

Screenshot 📷

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dnd-11th-8-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2024 5:59am
dnd-11th-8-frontend-rvo5	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2024 5:59am

[gihwan-dev]

Test Coverage

[email protected] coverage /home/runner/work/dnd-11th-8-frontend/dnd-11th-8-frontend
vitest run --coverage

RUN v2.0.4 /home/runner/work/dnd-11th-8-frontend/dnd-11th-8-frontend
Coverage enabled with v8

✓ src/test/utils/sum.test.ts (1 test) 3ms
✓ src/test/utils/SomeTest.test.tsx (1 test) 60ms

Test Files 2 passed (2)
Tests 2 passed (2)
Start at 05:59:51
Duration 1.38s (transform 56ms, setup 332ms, collect 29ms, tests 63ms, environment 860ms, prepare 169ms)

% Coverage report from v8

=============================== Coverage summary ===============================

Statements   : 0% ( 0/782 )
Branches     : 0% ( 0/31 )
Functions    : 0% ( 0/31 )
Lines        : 0% ( 0/782 )
================================================================================

[hijiyun]

수고하셨습니다 !