데이터 화면의 4가지 상태

데이터를 보여 주는 화면은 정상, 로딩, 빈 상태, 에러를 모두 그려야 개발로 넘어가요. 네 상태는 같은 자리, 같은 머리글을 쓰고 본문만 바뀌어요.

정상

실제와 비슷한 양의 데이터를 넣어요. 빈 칸이나 한 줄짜리 표로는 배치를 판단할 수 없어요.

정상 화면과 같은 배치에 자리만 표시해요(Skeleton). 로딩 영역 전체에 aria-busy를 둬요.

무엇이 없는지와 다음에 할 행동 하나를 보여 줘요(EmptyState). 머리글의 버튼과 같은 동작이에요.

API 키가 없어요

키를 만들면 여기에서 사용량을 볼 수 있어요.

무엇이 실패했는지와 다시 시도할 방법을 써요(ErrorState). 사과하지 않고, 고치는 방법을 알려 줘요.

API 키를 불러오지 못했어요

네트워크 연결을 확인하고 다시 시도해 주세요.

저장처럼 사용자가 일으킨 동작이 진행 중일 때는 화면 전체가 아니라 그 버튼에 loading을 켜요.