# RadioMark

선택 목록 행의 끝에 놓는 동그란 라디오 표시다. 시트의 선택 목록에서 쓴다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- `WellRow`의 `right`에 넣어 "이 행이 선택됨"을 나타낼 때 쓴다. `OptionSheet`가 이렇게 쓴다.

### 쓰지 않는다
- 혼자 눌리는 컨트롤로 쓰지 않는다. 눌림은 행이 맡는다.
- 여러 개 선택(체크)에 쓰지 않는다. 동그란 모양은 "하나만"이라는 약속이다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 지름 22 |  |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 꺼짐 | 2px `lineStrong` 테두리의 빈 원. |
| 켜짐 | 테두리가 `primary`, 가운데 지름 10의 `primary` 점. |

## 사용 방법

### 행 끝에 놓기

```tsx
import { RadioMark, WellRow } from '@/ui/surface';

<WellRow title="최신순" selected={sort === 'new'} onPress={() => setSort('new')} right={<RadioMark on={sort === 'new'} />} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `on` | `boolean` | — | 필수 | 선택되었는지. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 모양 | 지름 22, 테두리 2px, 안쪽 점 10 |
| 색 | 꺼짐 `lineStrong`, 켜짐 `primary` |

## 접근성

- 혼자서는 읽히는 역할이 없다. 부모 행(`WellRow`)의 `selected` 상태가 선택을 알린다.

## 잘한 예와 잘못한 예

- 잘한 예: 행 전체가 눌리고, 끝의 표시가 선택을 보여 준다.
- 잘못한 예: 체크 선택에 동그라미를 쓰지 않는다.

## 함께 보는 컴포넌트

- [WellRow](https://developers.moring.co/tds/components/well-row.md): 패널 안의 목록 한 줄이다. 옅은 홈(`well`)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.
- [OptionSheet](https://developers.moring.co/tds/components/option-sheet.md): 시트 안에서 목록 중 하나를 고르는 컴포넌트다. 행마다 라디오 표시가 있고, 고르면 바로 닫힌다.
- [ChoiceCard](https://developers.moring.co/tds/components/choice-card.md): 카드 모양의 선택지다. 고르면 테두리가 굵어지고 체크 표시가 붙는다. 온보딩의 과목·알림 선택에 쓴다.