# OptionSheet

시트 안에서 목록 중 하나를 고르는 컴포넌트다. 행마다 라디오 표시가 있고, 고르면 바로 닫힌다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- `FilterPill`을 눌렀을 때 값을 고르는 목록으로 쓴다.
- 선택지가 7개 이상일 때 `ChoiceCard` 대신 쓴다.
- 행 오른쪽에 개수(`count`)나 색 점(`dot`)을 보여 줄 수 있다.

### 쓰지 않는다
- 여러 개를 동시에 고르는 목록에 쓰지 않는다. 라디오라서 하나만 고른다.
- 선택지가 2~3개면 쓰지 않는다. `PillTabs`나 `ChoiceCard`가 가볍다.

## 종류

종류가 없다. 선택지에 `count`, `dot`, `hint`를 붙일 수 있다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 목록 최대 높이 420 | 넘치면 목록 안에서 스크롤된다. 행 사이 간격 8. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 선택됨 | `WellRow`가 `selected`가 되고 라디오가 켜진다. |
| 고르면 | 값을 `onPick`으로 알리고 시트를 닫는다(`햅틱 select`). |

## 사용 방법

### 기본

```tsx
import { OptionSheet } from '@/ui/FilterSheet';

<OptionSheet
  visible={open}
  title="과목"
  options={[{ value: null, label: '전체' }, { value: 'math', label: '수학', count: 18 }]}
  value={subject}
  onPick={setSubject}
  onClose={() => setOpen(false)}
/>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `visible` | `boolean` | — | 필수 | 열려 있는지. |
| `title` | `string` | — | 필수 | 시트 제목. |
| `options` | `SheetOption[]` | — | 필수 | 선택지 목록. 각 항목: `value`(`null` 가능), `label`, `count`(개수), `dot`(색 점), `hint`(보조 글). |
| `value` | `string \| null` | — | 필수 | 지금 고른 `value`. |
| `onPick` | `(v: string \| null) => void` | — | 필수 | 고른 `value`와 함께 호출된다. |
| `onClose` | `() => void` | — | 필수 | 닫을 때 호출된다. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 행 | `WellRow` + 오른쪽에 개수(`smallStrong` `textTertiary`)와 `RadioMark` |
| 목록 | 최대 높이 420, 행 사이 8, 아래 8 |

## 접근성

- 각 행의 이름은 "{label}, {count}개"이고 선택 상태가 전달된다.
- `Sheet`의 접근성을 그대로 따른다.

## 잘한 예와 잘못한 예

- 잘한 예: 고른 값이 라디오와 테두리로 분명하다.
- 잘못한 예: 한 번에 여러 개를 고르는 데 쓰지 않는다.

## 함께 보는 컴포넌트

- [FilterPill](https://developers.moring.co/tds/components/filter-pill.md): "과목  전체 ▾"처럼 이름과 지금 값을 보여 주고, 누르면 선택 목록을 여는 알약 버튼이다.
- [Sheet](https://developers.moring.co/tds/components/sheet.md): 화면 아래에서 올라오는 시트다. 위쪽 두 모서리가 둥글고, 손잡이와 제목 줄, 닫기 버튼이 있다.
- [WellRow](https://developers.moring.co/tds/components/well-row.md): 패널 안의 목록 한 줄이다. 옅은 홈(`well`)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.
- [RadioMark](https://developers.moring.co/tds/components/radio-mark.md): 선택 목록 행의 끝에 놓는 동그란 라디오 표시다. 시트의 선택 목록에서 쓴다.