doksam-ui
홈ProfilesTokensIconsComponentsPatternsTemplatesRules
Patterns

카드 패턴

요약·상세·상태·액션·카테고리 카드 등 자주 쓰는 카드 조합 5종입니다.

#1

SummaryCard

아이콘 + 숫자 + 단위로 핵심 지표를 요약하는 카드입니다.

전체 직원

1,234명

매출

52,800만원

방문자

8,920명

서버

12대

<Card>
  <CardContent className="flex flex-col gap-1 px-3 py-2.5">
    <div className="flex items-center justify-between">
      <p className="text-[10px] text-muted-foreground">{label}</p>
      <Icon size={14} weight="duotone" className={tone} />
    </div>
    <p>
      <span className="text-base font-black">{value.toLocaleString()}</span>
      <span className="ml-0.5 text-[10px] text-muted-foreground">{unit}</span>
    </p>
  </CardContent>
</Card>
  • 라벨·아이콘·수치를 한 카드에 압축해 4~5개를 grid-cols-2 md:grid-cols-4로 나열한다.
  • 색상은 text-primary / text-success / text-warning / text-destructive 시맨틱 토큰만 쓴다.
  • 숫자는 toLocaleString()으로 천단위 콤마를 넣는다.
#2

DetailCard

미니 차트나 진행률 그래픽을 내장한 카드입니다.

일별 등록 추이

분포 현황

70%
<Card>
  <CardContent className="px-2 pt-2 pb-1">
    <p className="px-1 text-[11px] font-bold">일별 등록 추이</p>
    <div className="flex h-[80px] items-end gap-1 px-2 pb-1">
      {values.map((h, i) => (
        <div key={i} className="flex-1 rounded-t bg-primary/60" style={{ height: `${h}%` }} />
      ))}
    </div>
  </CardContent>
</Card>
  • 본격 recharts 그래프가 아니라 요약용 미니 시각화(막대 스파크라인, 도넛)에 적합하다.
  • 카드 패딩은 px-2 pt-2 pb-1로 좁게 잡아 데이터 밀도를 높인다.
  • 복잡한 인터랙션이 필요하면 dataviz 패턴의 ChartContainer 기반 차트로 승격한다.
#3

StatusCard

상태 뱃지 + 진행률로 서비스/서버 상태를 보여주는 카드입니다.

API 서버정상
99.9%
DB 서버경고
78.5%
캐시 서버장애
0%
<Card>
  <CardContent className="flex flex-col gap-2 px-3 py-2.5">
    <div className="flex items-center justify-between">
      <span className="text-xs font-medium">{name}</span>
      <Badge variant={statusVariant}>{status}</Badge>
    </div>
    <Progress value={percent} />
    <span className="text-[10px] tabular-nums">{percent}%</span>
  </CardContent>
</Card>
  • 상태 문자열에 따라 Badge variant를 default(정상)/secondary(경고)/destructive(장애)로 매핑한다.
  • shadcn Progress 컴포넌트를 그대로 써서 접근성(role=progressbar)을 확보한다.
  • 퍼센트 숫자는 시각적 진행률과 함께 텍스트로도 노출해 정확한 값을 전달한다.
#4

ActionCard

버튼/링크로 이어지는 액션을 담은 카드입니다.

빠른 시작

새 프로젝트를 생성합니다

시스템 설정

환경 변수를 관리합니다

문서 보기

API 문서를 확인합니다

<Card>
  <CardContent className="flex flex-col gap-2 px-3 py-3">
    <Icon size={20} weight="duotone" className={tone} />
    <div>
      <p className="text-sm font-semibold">{title}</p>
      <p className="text-xs text-muted-foreground">{description}</p>
    </div>
    <Button size="sm" variant="outline" className="w-fit">{actionLabel}</Button>
  </CardContent>
</Card>
  • 아이콘 → 제목/설명 → 액션 버튼 순서로 시선 흐름을 만든다.
  • 카드 하나당 액션은 1개만 두어 클릭 대상이 모호해지지 않게 한다.
  • outline 버튼을 기본으로 쓰고, 파괴적 액션에만 destructive variant를 쓴다.
#5

CategoryCard

카테고리로 묶은 하위 항목들을 한 카드에 정리해 보여줍니다.

시스템
21,045
직원1
로그18K
메뉴41
비즈니스
88
1원인증50
DB정보37
사업자1
통계
6,543
리포트4.1K
이벤트1.2K
알림721
<Card>
  <CardContent className="flex flex-col gap-2 px-3 py-2.5">
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-1.5">
        <Icon size={14} weight="duotone" className={tone} />
        <span className="text-xs font-semibold">{label}</span>
      </div>
      <span className="text-[10px] text-muted-foreground">{total.toLocaleString()}</span>
    </div>
    <div className="flex flex-col gap-1">
      {items.map((item) => (
        <div key={item.label} className="flex justify-between text-[10px] text-muted-foreground">
          <span>{item.label}</span>
          <span className="font-medium text-foreground">{item.value}</span>
        </div>
      ))}
    </div>
  </CardContent>
</Card>
  • 카테고리 헤더(아이콘+라벨+합계)와 세부 항목 리스트를 한 카드 안에서 위계로 구분한다.
  • 세부 항목은 3~4개로 제한하고, 더 많으면 상세 페이지로 링크한다.
  • 합계 수치는 우측 상단에 작게, 항목별 값은 우측 정렬해 스캔하기 쉽게 한다.