MetricCard

Dark Mode

데이터 지표(KPI)를 나열하는 카드 위젯입니다. Large(세로 배치)와 Small(가로 배치) 두 가지 크기를 제공하며, 항목별 트렌드(상승/하락) 색상과 아이콘을 지원합니다.

import { MetricCard } from "@/shared/ui/common"

인터랙티브 데모

1,240만+12.5%

매출

892-3.1%

주문 건수

156+24명

신규 가입

4.2%

이탈률

Size

Item Count

Options

tsx

const items = [
  { title: "매출", value: "1,240만", subValue: "+12.5%", trend: "positive" },
  { title: "주문 건수", value: "892", subValue: "-3.1%", trend: "negative" },
  { title: "신규 가입", value: "156", subValue: "+24명", trend: "positive" },
  { title: "이탈률", value: "4.2%" },
];

<MetricCard
  items={items}
/>

Sizes

Large는 Value와 Title을 세로로 배치하고, Small은 한 줄로 가로 배치합니다.

Large

1,240만+12.5%

매출

892-3.1%

주문 건수

156+24명

신규 가입

4.2%

이탈률

Small

총 매출

1,240만

주문 건수

892

신규 가입

156

이탈률

4.2%

Item Counts

항목 개수별 레이아웃 비교입니다. Large는 4~6개, Small은 2~4개를 권장합니다.

Large

4 Items

1,240만+12.5%

매출

892-3.1%

주문 건수

156+24명

신규 가입

4.2%

이탈률

5 Items

3,200만+8.3%

총 매출

640만-2.1%

영업이익

1,580

주문 건수

2,340

활성 사용자

3.8%+0.4%

전환율

6 Items

1,240만+12.5%

매출

892-3.1%

주문 건수

156+24명

신규 가입

4.2%

이탈률

5,890+340

DAU

12:30

평균 체류

Small

2 Items

총 매출

1,240만

주문 건수

892

4 Items

총 매출

1,240만

주문 건수

892

신규 가입

156

이탈률

4.2%

Compact Mode

항목이 많거나 컨테이너가 좁을 때 compact prop으로 값 텍스트 크기를 줄일 수 있습니다. Large: 24px → 18px, Small: 18px → 16px.

Large (기본)

1,240만+12.5%

매출

892-3.1%

주문 건수

156+24명

신규 가입

4.2%

이탈률

5,890+340

DAU

12:30

평균 체류

Large + Compact

1,240만+12.5%

매출

892-3.1%

주문 건수

156+24명

신규 가입

4.2%

이탈률

5,890+340

DAU

12:30

평균 체류

Small (기본)

총 매출

1,240만

주문 건수

892

신규 가입

156

이탈률

4.2%

Small + Compact

총 매출

1,240만

주문 건수

892

신규 가입

156

이탈률

4.2%

Bordered

주변 요소에 border가 있을 때 bordered prop으로 통일할 수 있습니다.

기본 (border 없음)

1,240만+12.5%

매출

892-3.1%

주문 건수

156+24명

신규 가입

4.2%

이탈률

Bordered

1,240만+12.5%

매출

892-3.1%

주문 건수

156+24명

신규 가입

4.2%

이탈률

N카드 개별 배치

항목마다 개별 카드로 분리하여 grid 배치할 수 있습니다.

취득합계

500억

회수합계

120억

투자잔액

380억

지분율

15.2%

Trend Colors

Large 사이즈에서 subValue의 트렌드 색상입니다. Increase(상승) / Decrease(하락) / None(기본) 3가지를 지원합니다.

Trend	설명	Preview
None	기본 보조 텍스트. text-black-40	—
Positive	긍정 지표. text-primary	+12.5%
Negative	부정 지표. text-black-40	-3.1%

With Icons

각 항목의 제목에 왼쪽/오른쪽 아이콘을 배치할 수 있습니다.

Large + Icons

1,240만+12.5%

매출 추이

892+8.3%

상승 지표

156-3.1%

하락 지표

30일

기간

Small + Icons

매출 추이

1,240만

상승 지표

892

하락 지표

156

기간

30일

Props

MetricCard

Prop	Type	Required	Default	설명
`items`	`MetricCardItem[]` interface MetricCardItem { title: string; value: string; subValue?: string; trend?: "none" \| "positive" \| "negative"; leftIcon?: ComponentType<{ className?: string }>; rightIcon?: ComponentType<{ className?: string }>; }	✓	—	표시할 데이터 항목 목록
`size`	`"large" \| "small"`	—	"large"	크기 (large: 세로 배치 / small: 가로 배치)
`compact`	`boolean`	—	false	값 텍스트 크기를 줄이는 컴팩트 모드. 항목이 많거나 컨테이너가 좁을 때 사용
`bordered`	`boolean`	—	false	border 표시 여부. 주변 요소에 border가 있으면 true로 통일
`className`	`string`	—	—	추가 CSS 클래스

MetricCardItem

Prop	Type	Required	Default	설명
`title`	`string`	✓	—	항목 제목
`value`	`string`	✓	—	메인 값 (숫자·텍스트)
`subValue`	`string`	—	—	보조 텍스트 (단위, 변동률 등). Large에서만 표시
`trend`	`"none" \| "increase" \| "decrease"`	—	"none"	보조 텍스트 트렌드 색상
`leftIcon`	`ComponentType<{ className?: string }>`	—	—	제목 앞 아이콘
`rightIcon`	`ComponentType<{ className?: string }>`	—	—	제목 뒤 아이콘