Stat

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

• 대시보드의 핵심 수치를 보여 주세요. 무엇을 재는지, 값, 어떻게 움직였는지, 무엇을 기준으로 하는지를 함께 둡니다. Change는 변화를 숫자로 받아 부호와 화살표를 보이고, 추세 토큰으로 방향에 맞는 색을 칠합니다. 값은 formatNumber, formatCurrency, formatPercent로 서식을 맞추면 모든 화면이 숫자를 같은 방식으로 씁니다.
• Group은 값들을 레이블 하나 아래 나란히 놓습니다. 노드별 'GPU 온도'처럼 항목마다 같은 측정을 놓을 수 있고, 세션의 턴·도구·토큰처럼 한 항목의 여러 수치를 놓을 수도 있습니다.
• size='small'은 카드 푸터의 집계처럼 다른 내용 옆에 놓는 수치에 씁니다. 값은 subsection 역할을, 주변 글은 caption 역할을 받습니다. 카드 최소 너비인 20rem에는 작은 값이 한 줄에 4개쯤 들어갑니다.

• 방향을 색만으로 보여 주지 마세요. Change는 부호와 화살표를 함께 둡니다. 지우지 마세요.
• Caption에 긴 문장을 넣지 마세요. '전일 종가 대비'처럼 기간이나 비교 기준만 쓰세요.
• 여러 행을 비교해야 하는 값에는 Stat을 쓰지 마세요. 대신 numeric 셀을 쓴 Table을 쓰세요.
• 클래스로 수치를 줄이지 마세요. 대신 Root나 Group에 size='small'을 설정하세요. 타이포그래피 역할이 그대로 유지됩니다.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root(dl) → Label(dt) + Value(dd) + Change(dd) + Status(dd) + Caption(dd); Group(role=group, label) → Root…

키보드와 접근성

Stat은 정적인 텍스트입니다. 이름표가 값의 이름이 되는 설명 목록이라 Tab 순서에 들어가지 않습니다. 직접 넣은 링크나 버튼은 각자 포커스를 받습니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Stat, formatCurrency } from '@surflane/ui'

<Stat.Root>
  <Stat.Label>Portfolio value</Stat.Label>
  <Stat.Value>
    {formatCurrency(128_450_000, 'KRW', { locale: 'ko-KR' })}
  </Stat.Value>
  <Stat.Change value={0.0123} />
  <Stat.Caption>vs. yesterday's close</Stat.Caption>
</Stat.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰