# toast

화면 아래에 잠깐 떴다 사라지는 짧은 확인 메시지다. 함수 한 번 호출로 띄운다. 되돌리기 같은 행동 하나를 붙일 수 있다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 저장, 삭제, 복사처럼 일이 끝났다는 것을 짧게 알릴 때 쓴다.
- 삭제 뒤에는 되돌리기 행동을 붙여 6초 동안 보여 준다.

### 쓰지 않는다
- 꼭 읽어야 하는 오류에는 쓰지 않는다. 사라져 버린다. `Notice`나 `dialog`를 쓴다.
- 한 번에 둘 이상 띄우지 않는다. 새 토스트가 이전 것을 대신한다.
- 긴 문장을 넣지 않는다. 한 줄이다.

## 종류

| 이름 | 설명 |
| --- | --- |
| toast.done | 완료. 체크 원(`success`)과 글자. |
| toast.info | 안내. 정보 아이콘과 글자. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 좌우 16, 최소 높이 50 | 탭 바 위 76 + 안전 영역 위에 뜬다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 나타남 | 아래에서 위로 스프링(damping 18)으로 떠오른다. |
| 표시 | 행동이 없으면 2400ms, 행동(되돌리기)이 있으면 6000ms. |
| 사라짐 | 160ms 동안 내려가며 사라진다. |

## 사용 방법

### 앱 맨 위에 한 번 놓기

```tsx
import { ToastHost } from '@/ui/toast';

<ToastHost />
```

### 띄우기

```tsx
import { toast } from '@/ui/toast';

toast.done('저장했어요');
toast.done('자료를 삭제했어요', { label: '되돌리기', onPress: restore });
toast.info('오프라인이에요');
```

### 속성(props)

| 함수 | 형태 | 설명 |
| --- | --- | --- |
| `toast.done` | `(text: string, action?: Toast['action'])` | 완료 토스트. 두 번째 인자로 행동 `{ label, onPress }`를 줄 수 있다. |
| `toast.info` | `(text: string, action?: Toast['action'])` | 안내 토스트. 같은 형식이다. |

속성이 없다.

`ToastHost`는 속성이 없다. 앱 루트와 시트(`Sheet`) 안에 한 번씩 둔다. 시트는 앱 루트를 가리기 때문에 시트 안에서 띄운 토스트는 시트가 자기 `ToastHost`로 그린다.

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 모양 | 모서리 18, 좌우 16, 위아래 13, 최소 높이 50, `shadow(2)` |
| 바탕 | 라이트 `text`(진한 색), 다크 `cardStrong`. 색이 아니라 한 줄 막대다 |
| 글자 | `smallStrong`, white. 행동 글자는 앱이 `#8DB8FF`를 직접 지정한다(웹에서는 `primaryLine`을 쓴다) |
| 아이콘 | 18px, 완료는 `success` 채운 원 |
| 위치 | 아래 = max(안전 영역, 12) + 76 |

## 접근성

- `accessibilityLiveRegion="polite"`, 역할 `alert`라서 나타나면 읽어 준다.
- 사라지는 시간이 짧으므로(2.4초) 중요한 정보를 토스트에만 두지 않는다.
- 행동 글자는 `hitSlop` 10으로 눌리는 영역을 넓힌다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 토스트 글자 (13px 굵게) | `white` | `text` | 17.15:1 통과 | 1.14:1 미달 | 16.48:1 통과 | 1.30:1 미달 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 짧은 확인 한 줄과 되돌리기.
- 잘못한 예: 꼭 읽어야 하는 오류는 사라지는 토스트로 알리지 않는다.

## 함께 보는 컴포넌트

- [Notice](https://developers.moring.co/tds/components/notice.md): 화면 안에 끼워 넣는 한 줄 안내 상자다. 안내(파랑), 주의(주황), 오류(빨강) 세 가지 톤이 있다.
- [dialog](https://developers.moring.co/tds/components/dialog.md): 화면 가운데 뜨는 확인 대화상자와 아래에서 올라오는 메뉴를 함수 호출 하나로 여는 도구다. 결과(눌린 버튼)를 약속(Promise)으로 돌려준다.