이번 달 요약
2024년 6월
매출+18%
₩12M
주문3,456+9.1%
환불42+3건
Stat
핵심 수치와 지표를 강조하여 표시하는 통계 컴포넌트입니다. 대시보드·요약 카드·KPI 영역에 사용합니다.
기본
title · value · description으로 지표를 구성합니다.
총 사용자12,345+12.5% 지난 달 대비
접두 · 접미
prefix · suffix로 통화·단위를 표시합니다.
총 매출
₩4,280,000
+8.2%전환율
3.6%
-0.4%p평균 응답 시간
128ms
추세
trend로 증감 방향을 아이콘과 함께 표시합니다.
월간 매출+8.2%
₩4.2M
전월 대비이탈률+0.3%p
2.4%
크기
size로 수치 스케일을 조절합니다.
Small1,024
Medium8,192
Large64K
레이아웃
stat_horizontal · stat_inline · stat_row로 배치를 변경합니다.
활성 세션342
CPU 사용률
68%
팀 멤버484명 신규 합류
아이콘
stat_icon · stat_icon-wrap으로 지표에 시각적 단서를 추가합니다.
다운로드2,847+24%
완료율
94%
스킨
card · shadow · stat_borderless · stat_accent로 외형을 조절합니다.
기본 카드1,200
Shadow980
Borderless456
Accent789강조 지표
그룹
stat_group으로 여러 지표를 그리드로 배치합니다.
총 매출
₩4.2M
+8.2%신규 가입1,234+15.3%
이탈률
2.4%
+0.3%p활성 사용자8,901변동 없음
방문24.5K
페이지뷰89.2K
전환1,842
매출₩12M
카드 혼합
card 본문 안에 stat_group을 배치하는 대시보드 패턴입니다.
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | string | — | 지표 라벨 (stat_label) |
value | ReactNode | — | 주요 수치 (stat_value) |
prefix | ReactNode | — | 값 앞 접두 (stat_prefix) |
suffix | ReactNode | — | 값 뒤 접미 (stat_suffix) |
description | string | — | 보조 설명 (stat_desc) |
trend | string | — | 증감 텍스트 (stat_trend) |
trendColor | string | — | trend·description 색상 color_* |
trendIcon | ReactNode | — | 증감 아이콘 (기본 chevron-up 대체) |
size | 'sm' | 'md' | 'lg' | md | stat_sm · stat_lg |
card | boolean | false | 카드형 배경 (stat_card) |
shadow | boolean | false | 그림자 (stat_shadow) |
className | string | — | stat 루트에 추가 클래스 (stat_horizontal 등) |
API · Children
| Children / Prop | 설명 |
|---|---|
value | 문자열·숫자 또는 커스텀 React 노드로 표시할 주요 수치 |
trendIcon | 기본 chevron-up을 대체하는 React 노드 |
children | 아이콘·커스텀 레이아웃 등에 사용하는 React children |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
stat | 지표 루트 |
stat_sm · stat_lg | 크기 변형 |
stat_card · stat_shadow | 카드·그림자 |
stat_header · stat_label · stat_value-row | 레이아웃 파트 |
stat_value · stat_prefix · stat_suffix · stat_desc · stat_trend | 값·설명 파트 |
stat_group · stat_group-2 · stat_group-3 · stat_group-4 | 지표 그리드 |
stat_horizontal | 아이콘+값 가로 배치 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--stat-value-size · --stat-value-size-sm · --stat-value-size-lg | 1.75rem · 1.25rem · 2.25rem | 수치 크기 |
--stat-label-size · --stat-desc-size | var(--text-size-sm) | 라벨·설명 크기 |
--stat-group-gap · --stat-card-padding | var(--space-lg) · var(--space-lg) | 그룹 간격·카드 패딩 |