# SettingsSwitch

켜고 끄는 스위치다. 설정 행의 오른쪽에 놓는다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 설정을 켜고 끌 때 쓴다. 누르는 즉시 값이 바뀌고 따로 저장 버튼이 없을 때 쓴다.
- `SettingsRow`의 `right`에 넣어 쓴다.
- `label`에 무엇을 켜고 끄는지 쓴다.

### 쓰지 않는다
- 저장 버튼이 필요한 양식에는 쓰지 않는다. `ChoiceCard`나 체크 항목을 쓴다.
- 둘 중 하나를 고르는 데 쓰지 않는다("라이트/다크"). `PillTabs`나 `OptionSheet`를 쓴다.

## 종류

종류가 없다.

## 크기

크기를 정하는 속성이 없다. 운영체제의 기본 스위치 크기를 따른다. 이 문서의 미리보기는 51 × 31이다.

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 꺼짐 | 트랙이 `lineStrong`, 손잡이는 흰색. |
| 켜짐 | 트랙이 `primary`. |
| 비활성 | `disabled`이면 누를 수 없다. |

## 사용 방법

### 설정 행 안에서

```tsx
import { SettingsRow, SettingsSwitch } from '@/ui/SettingsList';

<SettingsRow title="복습 알림" chevron={false} right={<SettingsSwitch label="복습 알림" value={on} onChange={setOn} />} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `value` | `boolean` | — | 필수 | 켜져 있는지. |
| `onChange` | `(v: boolean) => void` | — | 필수 | 눌렀을 때 새 값(`true`/`false`)과 함께 호출된다. |
| `label` | `string` | — | 필수 | 화면 읽기 프로그램이 읽는 이름. |
| `disabled` | `boolean` | — | 선택 | `true`이면 누를 수 없다. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 색 | 꺼짐 트랙 `lineStrong`, 켜짐 트랙 `primary`, 손잡이 `white` |
| 구현 | React Native `Switch`를 쓰므로 모양은 운영체제가 정한다 |

## 접근성

- 이름은 `label`이다. 상태(켜짐/꺼짐)는 운영체제가 전달한다.
- 켜짐은 트랙 색과 손잡이 위치로 함께 나타낸다.
- 눌리는 영역은 운영체제 스위치 크기를 따른다. 스위치만 누르게 하지 말고 행 전체에도 이름을 둔다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 켜진 트랙과 손잡이 (비글자) | `white` | `primary` | 3.93:1 통과 | 3.31:1 통과 | 4.60:1 통과 | 1.98:1 미달 | 3:1 |

## 잘한 예와 잘못한 예

- 잘한 예: `label`이 행 제목과 같다.
- 잘못한 예: `label` 없이 쓰지 않는다. 읽기 프로그램이 "스위치"라고만 읽는다.

## 함께 보는 컴포넌트

- [SettingsGroup](https://developers.moring.co/tds/components/settings-list.md): 설정 화면의 목록이다. 작은 구역 이름, 행이 든 흰 패널, 아래 안내 글로 이루어진다.
- [PillTabs](https://developers.moring.co/tds/components/pill-tabs.md): 알약 모양의 탭 모음이다. 하나를 고르면 그 칸이 짙은 색(네이비, 다크 모드는 주색)으로 채워진다.