Card

core

범용 카드 컨테이너. Header, Title, Description, Content, Footer 하위 컴포넌트 포함.

컴포넌트 의존 관계

깊이

100%

기본 사용

카드 제목

카드에 대한 설명입니다.

카드 본문 콘텐츠가 여기에 들어갑니다.

변형

Default

Outline

Ghost

패딩 크기

Small

Medium

Large

테스트 커버리지

2026년 2월 4일

생성된 테스트 결과를 찾지 못했습니다.

Card 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Card Props

Prop	타입	기본값	설명
`variant`	`"default" \| "outline" \| "ghost"`	`"default"`	카드 스타일 변형
`padding`	`"none" \| "sm" \| "md" \| "lg"`	`"md"`	내부 패딩 크기
`selectable`	`boolean`	`false`	선택 가능 모드 활성화
`selected`	`boolean`	—	선택 상태 (selectable=true 시)
`onSelectedChange`	`(selected: boolean) => void`	—	선택 상태 변경 콜백

Import

tsx

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@reopt-ai/opt-ui";