# EmptyState

보여 줄 내용이 없을 때의 안내다. 옅은 아이콘 타일, 제목, 한 줄 설명, 다음 행동 버튼으로 이루어진다.

- 분류: 알림과 안내
- 가져오기: `import { EmptyState } from '@/ui/feedback'`
- 코드 위치: `apps/mobile/src/ui/feedback.tsx:45` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/empty-state

## 미리보기

실제 컴포넌트를 그린 화면은 https://developers.moring.co/tds/components/empty-state 에서 볼 수 있다. 서비스 색 선택기로 Mordy, Morit 색을 바꿔 볼 수 있다.

## 언제 쓰는가

### 쓴다
- 목록이나 화면에 데이터가 전혀 없을 때 쓴다. 예: 자료가 하나도 없는 과목.
- 다음에 할 일을 `action`에 버튼으로 넣는다(예: "자료 추가").

### 쓰지 않는다
- 데이터가 일부만 없을 때 쓰지 않는다. 그 부분만 안내한다.
- 오류를 알리는 데 쓰지 않는다. 복구 행동이 있는 `Notice`를 쓴다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 아이콘 타일 | `Icon`을 주면 옅은 원(96)과 둥근 타일(64) 안에 아이콘(28)을 그린다. 색은 `tint`. |
| 직접 그림 | `icon`에 원하는 요소를 넣는다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 위아래 32, 좌우 16 | 요소 사이 6, 타일 아래 8. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 기본 모습이다. |

## 사용 방법

### 기본

```tsx
import { EmptyState } from '@/ui/feedback';
import { Inbox } from '@/ui/icons';

<EmptyState
  icon={<Inbox aria-hidden />}
  title="자료가 없어요"
  body="사진을 찍어 첫 자료를 추가해 보세요."
  action={<PrimaryButton label="자료 추가" arrow={false} onPress={openCapture} />}
/>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `title` | `string` | — | 필수 | 제목(`headline`). |
| `body` | `string` | — | 선택 | 한 줄 설명. 단어가 중간에서 끊기지 않게 처리된다. |
| `action` | `ReactNode` | — | 선택 | 아래에 놓을 행동 버튼. 폭을 가득 채운다. |
| `icon` | `ReactNode` | — | 선택 | 아이콘 타일 대신 직접 그릴 요소. |
| `Icon` | `IconType` | — | 선택 | 아이콘 컴포넌트. 있으면 타일을 그린다. |
| `tint` | `string` | `color.primary` | 선택 | 타일 색. 기본 `color.primary`. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 타일 | 바깥 원 96(`tint` 6%), 둥근 타일 64·모서리 22(`tint` 13%), 아이콘 28 선 2 |
| 글자 | 제목 `headline`, 설명 `small` `textSecondary`, 모두 가운데 |
| 행동 | 위 12(`md`), 폭 가득 |

## 접근성

- 제목과 설명이 읽힌다. 아이콘 타일은 장식이다.
- 행동 버튼에는 이름이 있다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 설명 (13px) | `textSecondary` | `bg` | 4.13:1 미달 | 7.65:1 통과 | 4.69:1 통과 | 7.96:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 다음에 할 일을 버튼으로 준다.
- 잘못한 예: "없음"만 쓰면 사용자가 무엇을 해야 하는지 모른다.

## 함께 보는 컴포넌트

- [Notice](https://developers.moring.co/tds/components/notice.md): 화면 안에 끼워 넣는 한 줄 안내 상자다. 안내(파랑), 주의(주황), 오류(빨강) 세 가지 톤이 있다.
- [Skeleton](https://developers.moring.co/tds/components/skeleton.md): 내용이 불러와지기 전에 그 자리를 채우는 깜빡이는 막대다.
- [PrimaryButton](https://developers.moring.co/tds/components/primary-button.md): 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.