# Notice

화면 안에 끼워 넣는 한 줄 안내 상자다. 안내(파랑), 주의(주황), 오류(빨강) 세 가지 톤이 있다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 작업 가까이에 상태를 알릴 때 쓴다. 예: "네트워크가 불안정해요", "저장하지 못했어요".
- 다시 시도 같은 복구 행동이 있으면 `action`에 `SmallButton`이나 `TextButton`을 넣는다.
- 처리 중이라는 안내는 `busy`로 스피너를 보여 준다.

### 쓰지 않는다
- 화면 전체를 대신하는 오류에는 쓰지 않는다. 데이터가 전혀 없을 때는 `EmptyState`다.
- 잠깐 뜨고 사라지는 확인("저장했어요")에는 쓰지 않는다. `toast`를 쓴다.
- 긴 문장이나 여러 문단을 넣지 않는다. 한두 줄이다.

## 종류

| 이름 | 설명 |
| --- | --- |
| info (기본) | `primarySoft` 바탕, `primary` 글자·아이콘(원 안의 i). |
| warn | `amberSoft` 바탕, `amberText` 글자와 아이콘(느낌표). |
| error | `dangerSoft` 바탕, `danger` 글자와 아이콘(느낌표). |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 좌우 14, 위아래 12, 모서리 12 | 높이는 글자 줄 수가 정한다. 아이콘은 18px. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| info | 기본 모습이다. |
| warn | 기본 모습이다. |
| error | 기본 모습이다. |
| 처리 중 | 아이콘 자리에 스피너가 돈다. |

## 사용 방법

### 기본

```tsx
import { Notice } from '@/ui/feedback';

<Notice tone="warn" text="네트워크가 불안정해요" />
```

### 복구 행동과 함께

```tsx
<Notice tone="error" text="저장하지 못했어요" action={<SmallButton label="다시" onPress={retry} />} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `tone` | `'info' \| 'warn' \| 'error'` | `'info'` | 선택 | `"info"`(기본), `"warn"`, `"error"`. |
| `text` | `string` | — | 필수 | 안내 문구. |
| `action` | `ReactNode` | — | 선택 | 오른쪽에 놓을 행동(버튼). |
| `busy` | `boolean` | — | 선택 | `true`이면 아이콘 대신 스피너를 보여 준다. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 모양 | 모서리 `radius.md`(12), 좌우 14, 위아래 12, 요소 사이 8 |
| 글자 | `small`(13/19 Medium), 톤 색 |
| 아이콘 | 18px, 선 2 |

## 접근성

- 역할은 `alert`라서 나타나면 화면 읽기 프로그램이 바로 읽어 준다.
- 톤은 색과 아이콘 모양(i, !)과 문구로 나타낸다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| info 글자 (13px) | `primary` | `primarySoft` | 3.45:1 미달 | 4.32:1 미달 | 4.21:1 미달 | 4.68:1 통과 | 4.5:1 |
| warn 글자 (13px) | `amberText` | `amberSoft` | 5.48:1 통과 | 9.81:1 통과 | 6.66:1 통과 | 6.86:1 통과 | 4.5:1 |
| error 글자 (13px) | `danger` | `dangerSoft` | 4.09:1 미달 | 5.39:1 통과 | 4.69:1 통과 | 5.43:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 무엇이 문제인지와 다음 행동(다시)을 함께 둔다.
- 잘못한 예: 문제만 알리고 할 일이 없으면 사용자가 멈춘다.

## 함께 보는 컴포넌트

- [toast](https://developers.moring.co/tds/components/toast.md): 화면 아래에 잠깐 떴다 사라지는 짧은 확인 메시지다. 함수 한 번 호출로 띄운다. 되돌리기 같은 행동 하나를 붙일 수 있다.
- [EmptyState](https://developers.moring.co/tds/components/empty-state.md): 보여 줄 내용이 없을 때의 안내다. 옅은 아이콘 타일, 제목, 한 줄 설명, 다음 행동 버튼으로 이루어진다.
- [FeedbackCard](https://developers.moring.co/tds/components/feedback-card.md): 문제를 채점한 뒤 결과("정답!", "오답")와 해설을 보여 주는 카드다.