StatTile
아이콘·작은 라벨·큰 값 한 칸. 사실 값만.
- 라이브러리 전용
개요
미리보기
처음 기록2023년 3월 4일
예시
상태
날짜
처음 기록2023년 3월 4일기간
프로젝트 기간7개월개수
검토 필요3아직 읽지 않음
처음 기록Not scanned yet비어 있음
처음 기록None yet불러오는 중
처음 기록
쓰임 예
링크 칸
이렇게 · 이렇게 하지 않기
- 이렇게 날짜, 기간, 개수 같은 사실 값만 둔다.
- 이렇게 하지 않기 증감 %, 추세 화살표, 좋고 나쁨을 뜻하는 색을 쓰지 않는다.
- 이렇게 하지 않기 자료 수를 생산성처럼 읽히게 하는 라벨(“이번 주 처리량”)은 쓰지 않는다.
- 이렇게 하지 않기 숫자를 세어 올리지 않는다. 읽지 않은 범위를 0으로 그리지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
kind? | 'date' | 'duration' | 'count' | date | 값의 종류. 기본 아이콘을 정한다. |
label | ReactNode | 처음 기록 | 값 위의 작은 라벨. 생산성 단어를 쓰지 않는다. |
value? | ReactNode | 2023년 3월 4일 | 이미 서식을 맞춘 값(DateText/Intl). |
icon? | ReactNode | none | kind의 기본 아이콘을 바꾼다. |
href? | string | | 칸 전체를 링크 하나로(Card interactive 규칙: 안쪽 행동 0개). |
state? | CatalogDataState | ready | 데이터 상태. not-collected는 값을 그리지 않는다(0으로 그리지 않음). |
ref | — | — | ref는 바깥 <div>로 전달된다. |
Card | — | — | 제안(Kenji): Card + Display 구성과 같아 Card 예시로 합칠 수 있다. |
| 그 밖의 속성 | — | — | id, data-* 등 네이티브 div 속성은 바깥 래퍼로 간다. className·style·children은 받지 않는다. |
접근성
키보드: href가 있으면 칸 전체가 링크 하나(Tab, Enter).
- 라벨 → 값 순서로 읽힌다. 아이콘은 장식.
- loading은 aria-busy + 정지된 Skeleton. not-collected는 점선 테두리 + 글자(색만으로 구분하지 않음).