지표 줄

화면 맨 위의 지표 카드 줄을 한 가지 규칙으로 놓는다. 좁은 화면에서는 카드 폭을 15rem 으로 고정한 가로 스크롤 줄이 되어 숫자가 줄바꿈되지 않고, sm 부터는 cols 에 맞춘 격자로 바뀐다. 카드는 StatCard 를 그대로 넣고 KpiStrip 은 배치만 맡는다.

활용 방법

4칸

기본값 cols=4 는 sm 에서 2칸, lg 에서 4칸 격자다.

Preview

전체

128

대기

완료

104

지연

tsx

<KpiStrip>
  <StatCard icon={<Inbox size={16} />} tone="info" value={128} label="전체" />
  <StatCard icon={<Clock size={16} />} tone="warning" value={12} label="대기" />
  <StatCard icon={<CheckCircle2 size={16} />} tone="success" value={104} label="완료" />
  <StatCard icon={<TriangleAlert size={16} />} tone="danger" value={3} label="지연" />
</KpiStrip>

3칸

cols=3 은 sm 부터 3칸 격자다. 2칸과 5칸도 같은 방식으로 지정한다.

Preview

이번 달 매출

₩12.4M

미수금

₩3.1M

거래

42건

tsx

<KpiStrip cols={3}>
  <StatCard value="₩12.4M" label="이번 달 매출" />
  <StatCard value="₩3.1M" label="미수금" />
  <StatCard value="42건" label="거래" />
</KpiStrip>

배치 규칙

· 모바일 가로 스크롤 줄은 좌우로 1rem 씩 밖으로 나가 화면 가장자리까지 스크롤된다. 본문 좌우 여백이 1rem 인 레이아웃을 전제로 한다.
· 스크롤바는 숨기고 터치·트랙패드 스크롤만 남긴다.
· 카드 하나만 있는 자리는 KpiStrip 없이 StatCard 를 바로 놓는다.

속성

이름	타입	기본값	설명
children	ReactNode	-	늘어놓을 카드. 보통 StatCard
cols	2 \| 3 \| 4 \| 5	4	sm 이상 격자 칸 수. 4 는 sm 2칸 · lg 4칸, 5 는 sm 3칸 · lg 5칸
className	string	-	root div 클래스
ref	Ref<HTMLDivElement>	-	root div