# ChoiceNumber

숫자가 들어간 얇은 동그라미다. 시험지 보기 번호(① ② ③ ④ ⑤)를 그린다.

- 분류: 입력과 선택
- 가져오기: `import { ChoiceNumber } from '@/ui/controls'`
- 코드 위치: `apps/mobile/src/ui/controls.tsx:88` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/choice-number

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 시험지 모양의 보기 앞에 번호를 붙일 때 쓴다. `OptionRow`가 `index`를 받으면 자동으로 쓴다.
- 번호 색은 `tone`으로 바꾼다. 오답이면 `danger`.

### 쓰지 않는다
- 글자가 들어가는 표지에 쓰지 않는다. 숫자 한 자리를 가정한 크기다. 글자는 `Chip`을 쓴다.
- 두 자리 숫자에 쓰지 않는다. 동그라미 안에서 숫자가 넘친다.

## 종류

종류가 없다. `tone`으로 색만 바꾼다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 지름 22 | `size`로 바꾼다. 숫자 크기는 지름 × 0.56, 선 두께는 1.4다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | `textSecondary` 선과 숫자. |
| 오답 | `danger` 색. |

## 사용 방법

### 기본

```tsx
import { ChoiceNumber } from '@/ui/controls';

<ChoiceNumber n={1} />
<ChoiceNumber n={2} tone={color.danger} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `n` | `number` | — | 필수 | 그릴 숫자(한 자리). |
| `tone` | `string` | `color.textSecondary` | 선택 | 선과 숫자의 색. 기본 `color.textSecondary`. |
| `size` | `number` | `22` | 선택 | 지름(px). 기본 22. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 모양 | 지름 22, 선 1.4px |
| 숫자 | caption 계열 Bold, 크기 = 지름 × 0.56 |

## 접근성

- 눌리지 않는 표지다. 보기 전체를 `OptionRow`가 하나의 라디오로 묶는다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 번호 (12px 굵게) | `textSecondary` | `surface` | 4.23:1 미달 | 6.95:1 통과 | 4.88:1 통과 | 7.11:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 한 자리 번호에 쓴다.
- 잘못한 예: 두 자리 숫자는 동그라미를 넘친다.

## 함께 보는 컴포넌트

- [OptionRow](https://developers.moring.co/tds/components/option-row.md): 퀴즈 보기 한 줄이다. 고르기 전, 고른 뒤, 채점 뒤(정답, 오답)의 모습이 정해져 있다.