본문으로 건너뛰기
Centralby 디자인 시스템

원칙

데이터 7상태

아직 읽지 않음·불러오는 중·비어 있음·결과 없음·일부만 읽음·오류·오래됨을 서로 다른 모양으로. 우선순위와 사실 → 상태 계산기.

일곱 상태

데이터를 보여주는 모든 컴포넌트는 일곱 상태를 서로 다른 모양으로 그린다. 철학 5 “수집한 범위만 설명한다”를 화면에서 지키는 장치다.

데이터 7상태
상태뜻모양CTA알림
not-collected이 범위는 아직 수집하지 않았다연결 아이콘 + 출처를 연결하면 여기에 보여요출처 연결 1개없음
loading처음 불러오는 중Skeleton(최종 모양과 같은 구조, 정지). 빈 상태와 다른 모양없음aria-busy. 1초 넘으면 status 한 번
empty수집했지만 해당 항목이 없다컴포넌트별 문장0–1없음
no-results검색·필터 결과가 없다검색어를 되풀이하는 문장 + 필터 해제필터 지우기status “결과 없음”
partial일부 범위를 읽지 못했다받은 데이터 + 고정 행(PartialFailureRow, failedRange)다시 시도status 한 번
error지금 불러오지 못했다오류 아이콘 + 지금 불러오지 못했어요다시 시도status (사용자 행동의 결과일 때만 alert)
stale데이터는 있지만 마지막 읽음이 오래됐다데이터 그대로 + 마지막 읽음 · 3시간 전없음(자동 재시도)없음
  • 이렇게 하지 않기“0”을 큰 숫자로 그려 빈 상태를 대신하지 않는다. 미수집 구간을 0으로 그리지 않는다.
  • 이렇게 하지 않기다시 불러올 때(이미 데이터가 있을 때) Skeleton으로 바꾸지 않는다. 데이터를 두고 aria-busy만 켠다.
  • 이렇게세 가지 빈 상태는 다른 문장이다: 아직 읽지 않음(출처 연결) / 읽었지만 결과 없음(읽은 기간과 함께) / 일부 실패(받은 것은 유지).

상태 이름과 문장

상태 이름 (카탈로그 상태 토글)
koenzh-Hanses
ready정상Ready正常Listo
not-collected아직 읽지 않음Not scanned yet尚未读取Aún sin leer
loading불러오는 중Loading正在加载Cargando
empty비어 있음Empty为空Vacío
no-results결과 없음No results无结果Sin resultados
partial일부만 읽음Partly scanned部分读取Leído en parte
error오류Error出错Error
stale오래됨Stale已过时Desactualizado
공통 상태 문장 (catalog-copy §3)
키koenzh-Hanses
notCollected출처를 연결하면 여기에 보여요.Connect a source to see this.连接来源后显示在这里。Conecta una fuente para verlo.
notCollectedAction출처 연결Connect a source连接来源Conectar fuente
empty아직 여기에 보여줄 기록이 없어요.Nothing to show here yet.这里还没有可显示的内容。Aún no hay nada que mostrar aquí.
noResults읽은 기간에는 해당하는 기록이 없어요.Nothing here in the scanned dates.已读取的日期范围内没有相关记录。No hay nada en las fechas leídas.
partial일부 기간을 읽지 못했어요. 받은 기록은 그대로 있어요.Some dates couldn’t be scanned. What we got is kept.部分日期未能读取,已获取的记录仍保留。No pudimos leer algunas fechas. Lo recibido se conserva.
error지금 불러오지 못했어요.Couldn’t load this right now.暂时无法加载。No se pudo cargar ahora.
retry다시 시도Try again重试Reintentar
stale마지막 읽음 · {time}Last scanned · {time}上次读取 · {time}Última lectura · {time}
  • loading은 화면에 글자로 쓰지 않고 Skeleton과 함께 보조기기에만 한 번 알린다.
  • empty는 화면별 문장이 없을 때만 쓰는 대체 문구다. 가능하면 위젯·컴포넌트별 문장을 쓴다.

우선순위

여러 사실이 동시에 참이면 가장 높은 것 하나가 바탕 상태가 된다. partial과 stale은 바탕이 아니라 데이터 위에 얹는 표시다(ready · empty · no-results 위에서만).

  1. 1. 오류 error
  2. 2. 아직 읽지 않음 not-collected
  3. 3. 불러오는 중 loading
  4. 4. 결과 없음 no-results
  5. 5. 비어 있음 empty
  6. 6. 정상 ready

StateView로 보기

실제 컴포넌트: 실제 StateView (목록 표면)

주의일부만 읽음

일부 기간을 읽지 못했어요. 받은 기록은 그대로 있어요.
  • 주간 계획 회의Google Calendar · 10/14
  • 가이드 초안 검토Gmail · 10/12
  • Q4 roadmap syncGoogle Calendar · 10/07
partial·stale은 데이터와 함께 그린다. 나머지는 서로 배타적이다. 상태마다 아이콘·문장·CTA가 다르다 — 색만으로 구분하지 않는다.

사실 → 상태

실제 컴포넌트: deriveDataState() 계산기

사실
결과
항목값
baseready · 정상
overlays.partial—
overlays.stale—
busy (aria-busy)false
skeletonfalse
catalog stateready · 정상
src/design/logic/data-state.ts를 그대로 부른다. 데이터가 화면에 있을 때 다시 불러오기가 실패하면 오류가 아니라 “오래됨(refresh-failed)”이다.

근거 문서: contracts/README.md §4 · src/design/logic/data-state.ts · copy/catalog-copy.md §3 · round-2/kenji.md §2