컴포넌트/Card

Card

콘텐츠를 그룹화하여 표시하는 컨테이너 컴포넌트입니다.
다양한 스타일 변형과 복합 컴포넌트를 지원합니다.

설치

Terminal

npx @msub-core/ui-cli add card

기본 사용

Card와 하위 컴포넌트를 조합하여 사용합니다.

카드 제목

카드에 대한 설명을 입력합니다.

카드 본문 내용이 들어갑니다. 텍스트, 이미지, 폼 등 다양한 콘텐츠를 포함할 수 있습니다.

TSX

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@msub-core/ui/components/card"
import { Button } from "@msub-core/ui/components/button"

<Card>
  <CardHeader>
    <CardTitle>카드 제목</CardTitle>
    <CardDescription>카드에 대한 설명을 입력합니다.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>카드 본문 내용이 들어갑니다.</p>
  </CardContent>
  <CardFooter>
    <Button variant="outline">취소</Button>
    <Button>확인</Button>
  </CardFooter>
</Card>

Card Props

Prop	Type	Default	Required	Description
variant	"default" \| "outline" \| "ghost" \| "elevated" \| "filled"	"default"	No	카드 스타일
padding	"none" \| "sm" \| "default" \| "lg"	"default"	No	내부 여백
interactive	boolean	false	No	호버/클릭 효과 활성화

변형 (Variants)

다양한 스타일 변형을 지원합니다.

Default

테두리 + 그림자

Outline

외곽선 스타일

Ghost

배경/그림자 없음

Elevated

강한 그림자 효과

Filled

채워진 배경

여백 크기 (Padding)

내부 여백 크기를 조절할 수 있습니다.

Small Padding

padding="sm"

Default Padding

padding="default"

Large Padding

padding="lg"

No Padding

padding="none"

인터랙티브 카드

interactive prop으로 호버/클릭 효과를 추가할 수 있습니다.

클릭 가능한 카드

마우스를 올려보세요

Elevated + Interactive

그림자와 호버 효과

Filled + Interactive

채워진 배경과 호버 효과

CardHeader with Action

CardHeader에 액션 버튼을 추가할 수 있습니다.

알림 설정

알림 수신 방법을 설정합니다.

이메일, 푸시 알림, SMS 등 다양한 알림 수신 방법을 설정할 수 있습니다.

TSX

<Card>
  <CardHeader action={<Button variant="ghost" size="sm">더보기</Button>}>
    <CardTitle>알림 설정</CardTitle>
    <CardDescription>알림 수신 방법을 설정합니다.</CardDescription>
  </CardHeader>
  <CardContent>...</CardContent>
</Card>

CardTitle 크기

제목 크기를 조절할 수 있습니다.

Small Title (size="sm")

Default Title (size="default")

Large Title (size="lg")

CardFooter 정렬

푸터 내용의 정렬 방식을 지정할 수 있습니다.

align="left"

align="right" (기본)

align="center"

align="between"

CardImage

카드에 이미지를 추가할 수 있습니다.

상단 이미지

position="top"

하단 이미지

position="bottom"

CardImage Props

Prop	Type	Default	Required	Description
aspectRatio	string	"16/9"	No	이미지 비율
position	"top" \| "bottom"	"top"	No	이미지 위치
overlay	boolean	false	No	그라데이션 오버레이 표시

CardImage with Overlay

이미지 위에 그라데이션 오버레이를 추가하여 텍스트를 올릴 수 있습니다.

오버레이 이미지

overlay prop으로 그라데이션 추가

TSX

<Card padding="none">
  <div className="relative">
    <CardImage
      src="..."
      overlay
      aspectRatio="16/9"
      className="!m-0 rounded-xl"
    />
    <div className="absolute bottom-0 left-0 right-0 p-6 text-white">
      <h3 className="text-lg font-semibold">제목</h3>
      <p className="text-sm text-white/80">설명</p>
    </div>
  </div>
</Card>

CardDivider

카드 내용을 구분하는 구분선입니다.

섹션 1

첫 번째 섹션 내용

두 번째 섹션 내용

프리셋: StatCard

통계 데이터를 표시하는 프리셋 컴포넌트입니다. 핵심 숫자에 집중하는 미니멀한 디자인입니다.

총 매출

₩12,345,678

+12.5%전월 대비

신규 사용자

1,234명

+8.2%전월 대비

결제 건수

567건

-3.1%전월 대비

전환율

4.5%

목표 달성

StatCard Props

Prop	Type	Default	Required	Description
title	string	-	No	라벨 (필수)
value	string \| number	-	No	핵심 값 (필수)
prefix	string	-	No	값 앞 단위 (₩, $)
suffix	string	-	No	값 뒤 단위 (원, 개, 명, %)
trend	{ value: number, label?: string }	-	No	변화량 (양수: 상승, 음수: 하락)
subtitle	string	-	No	보조 설명
size	"sm" \| "default" \| "lg"	"default"	No	크기

실제 사용 예시

프로필 카드

홍길동

Frontend Developer

React, TypeScript, Next.js를 활용한 웹 프론트엔드 개발을 담당하고 있습니다.

컴포넌트 목록

Card

기본 카드 컨테이너

CardHeader

카드 헤더 (제목, 설명, 액션)

CardTitle

카드 제목

CardDescription

카드 설명

CardContent

카드 본문 컨텐츠

CardFooter

카드 푸터 (액션 버튼)

CardImage

카드 이미지

CardDivider

카드 구분선

StatCard

통계 카드 프리셋