StateView
데이터 영역의 7가지 상태를 표준 화면으로 조립.
- 출시 화면에서 사용
개요
미리보기
- Q3 retro notes
- Interview time confirmed
- Portfolio draft v2
예시
상태
정상
- Q3 retro notes
- Interview time confirmed
- Portfolio draft v2
아직 읽지 않음
Not scanned yet
Connect a source to see this.
불러오는 중
비어 있음
Empty
Nothing to show here yet.
결과 없음
No results for “회의”
Nothing here in the scanned dates.
일부만 읽음
WarningPartly scanned
Some dates couldn’t be scanned. What we got is kept.- Q3 retro notes
- Interview time confirmed
- Portfolio draft v2
오류
ErrorCouldn’t load this right now.
오래됨
- Q3 retro notes
- Interview time confirmed
- Portfolio draft v2
Last scanned ·
쓰임 예
위젯 불러오는 중
카드 · 아직 읽지 않음
Not scanned yet
Connect a source to see this.
가장 긴 문구 (es)
Empty
이번 주에는 연결한 출처에서 읽은 기록이 아직 없어요.
이렇게 · 이렇게 하지 않기
- 이렇게 7상태를 각각 다른 아이콘과 문장으로 보여준다. 상태가 바뀔 때만 한 줄 알린다. 문구는 공통 상태 문구를 쓴다.
- 이렇게 다시 불러올 때 데이터가 있으면 Skeleton으로 바꾸지 않고 aria-busy만 켠다. 다시 불러오기 실패는 error가 아니라 stale이다.
- 이렇게 하지 않기 색만 다른 변형으로 상태를 구분하지 않는다. 미수집 구간을 0이나 빈 상태로 그리지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
state? | DataState | 'ready' | ready | 데이터 상태(README §4). partial·stale은 데이터와 함께 줄 하나를 더 그린다. 실제 화면은 deriveDataState()로 정한다. |
surface? | 'list' | 'card' | 'widget' | 'detail' | list | Skeleton 모양과 빈 상태 틀을 고른다. |
withCta? | boolean | true | 상태마다 하나뿐인 행동(출처 연결·필터 지우기·다시 시도)을 보인다. |
children? | ReactNode | — | 데이터. ready·partial·stale에서 그린다. |
query? | string | 회의 | 검색어. no-results가 되풀이한다. |
emptyText? | ReactNode | | 이 화면의 빈 상태 문장(공통 문구보다 우선). |
lastReadAt? | string | | 마지막으로 읽은 시각(ISO). stale 줄 “마지막 읽음 · 3시간 전”. |
now? | string | | RelativeTime의 고정 “지금”(카탈로그·테스트). 비우면 실제 시계. |
skeletonCount? | 1 | 3 | 5 | 3 | 불러오는 동안의 Skeleton 개수. 첫 가져오기는 3. |
onRetry / onConnect / onClearFilters | — | — | 상태별 행동. 다시 시도 뒤 ready가 되면 “불러왔어요”를 한 번 알리고 초점을 headingId(없으면 영역)로 옮긴다. |
failedRange: DateRange | null | — | — | partial의 실패 기간. 모르면 “일부 기간”으로 쓰고 추정하지 않는다. |
접근성
키보드: 상태별 행동 버튼 하나만 Tab에 들어간다. 상태가 바뀌어도 초점은 옮기지 않는다(다시 시도 성공은 예외).
- loading이면 컨테이너 aria-busy="true"이고, 1초가 넘으면 “불러오는 중”을 한 번 알린다.
- 알리는 전환: error · partial · no-results · 1초 넘는 loading · 다시 시도 뒤 ready(“불러왔어요”). empty·not-collected·stale은 알리지 않는다.