빈 상태
결과가 없을 때 "없다"로 끝내지 않고 다음 행동을 제안해요. 같은 파일의 ErrorState(못 불러옴 · 다시 시도 · 연결 끊김)와 LoadingState(불러오는 중이에요)가 같은 껍데기를 써요.
모바일PCPleos · 개발 중EmptyState · ErrorState · LoadingState
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 보여 줄 것이 없을 때 - 이유와 다음 할 일. 못 불러왔으면 ErrorState(다시 시도 · 연결 끊김), 글로 말하는 불러오는 중은 LoadingState - 셋이 한 껍데기예요.
인터페이스#
타입에서 자동으로 뽑은 표예요.
EmptyState#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| icon | - | ReactNode | 라벨 앞에 놓을 아이콘이에요. |
| title* | - | ReactNode | 마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요. |
| desc | - | ReactNode | |
| actions | - | Act[] | |
| size | 'page' | StateSize | 크기예요. |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
ErrorState#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| what | - | string | |
| title | - | string | 마우스를 올리면 뜨는 설명이에요. label이 없으면 이름으로도 써요. |
| desc | - | string | |
| onRetry | - | () => void | |
| actions | [] | Act[] | |
| size | 'page' | StateSize | 크기예요. |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
LoadingState#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| what | - | string | |
| size | 'inline' | StateSize | 크기예요. |
| silent | - | boolean | |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 설명은 글자로 읽히고, 다음 행동은 버튼·링크로 Tab에 들어와요.
가이드라인#
쓰는 규칙#
이렇게 써요
- 무엇이 없는지와 어떻게 하면 되는지를 함께 적어요.
- 주 동작은 하나(primary), 나머지는 보조로 둬요.
- 놓이는 자리로 크기를 골라요 - 화면 하나 page · 카드·목록 안 inline · 메뉴·시트 안 compact.
이렇게 하지 않아요
- 사과하거나 모호하게 적지 않아요("문제가 발생했습니다" 대신 무엇이 왜인지).
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |
| Pleos개발 중 | 차량 앱의 EmptyState(공개 저장소)로 따로 구현했어요. 차량 크기로 옮긴 빈 상태예요. |