# SettingsGroup

설정 화면의 목록이다. 작은 구역 이름, 행이 든 흰 패널, 아래 안내 글로 이루어진다.

- 분류: 면과 목록
- 가져오기: `import { SettingsGroup, SettingsCard, SettingsIcon, SettingsRow } from '@/ui/SettingsList'`
- 코드 위치: `apps/mobile/src/ui/SettingsList.tsx:22` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/settings-list

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 설정과 그 하위 화면의 모든 목록에 쓴다.
- 행 하나는 아이콘 · 제목 · 현재 값 · 화살표다. 누르면 하위 화면이나 시트로 간다.
- 숫자 입력기 같은 자유로운 내용은 `SettingsCard`에 넣는다.

### 쓰지 않는다
- 설정이 아닌 목록에는 쓰지 않는다. `WellRow`를 쓴다.
- 삭제처럼 위험한 행이 아니면 아이콘에 색을 주지 않는다. 아이콘 타일은 모두 중립색이다. 빨강은 위험한 행(`danger`)만 쓴다.

## 종류

| 이름 | 설명 |
| --- | --- |
| SettingsGroup | 행 목록. 행 사이에 얇은 구분선이 자동으로 들어간다. |
| SettingsCard | 자유로운 내용을 담는 같은 모양의 패널(안쪽 여백 18). |
| SettingsRow | 행. `onPress`가 있으면 버튼이고 ChevronRight가 붙는다. `right`에 스위치를 넣을 수 있다. |
| SettingsIcon | 행 앞의 34 × 34 중립 아이콘 타일. `danger`면 빨간 타일. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 행 | 최소 높이 58 | 좌우 18, 위아래 12, 요소 사이 12. 구분선은 아이콘이 있으면 왼쪽에서 64, 없으면 18 들여 시작한다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | `surface` 바탕, 모서리 22, `shadow(1)`(다크는 1px `cardBorder`). |
| 누름 | 행 배경이 `pressed` 색으로 바뀐다. |
| 값이 긴 행 | 제목은 폭을 지키고 값이 먼저 …으로 줄어든다(값은 행 폭의 58%까지). |

## 사용 방법

### 기본

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

<SettingsGroup title="일반" footer="알림을 끄면 복습 시간을 알려 주지 않아요.">
  <SettingsRow icon={<SettingsIcon Icon={Bell} />} title="복습 알림" chevron={false}
    right={<SettingsSwitch label="복습 알림" value={on} onChange={setOn} />} />
  <SettingsRow icon={<SettingsIcon Icon={Globe} />} title="언어" value="한국어" onPress={openLanguage} />
  <SettingsRow icon={<SettingsIcon Icon={LogOut} danger />} title="로그아웃" tone={color.danger} onPress={logout} />
</SettingsGroup>
```

### 속성(props)

#### SettingsGroup

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | — | 필수 | 행들. 행 사이에 구분선이 자동으로 들어간다. |
| `title` | `string` | — | 선택 | 패널 위의 작은 구역 이름(`smallStrong`, `textSecondary`). |
| `footer` | `string` | — | 선택 | 패널 아래 안내 글(`caption`). |

#### SettingsCard

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | — | 필수 | 자유로운 내용. |
| `title` | `string` | — | 선택 | 패널 위의 작은 구역 이름. |
| `footer` | `string` | — | 선택 | 패널 아래 안내 글. |

#### SettingsIcon

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `Icon` | `Icon` | — | 필수 | 그릴 아이콘 컴포넌트. |
| `danger` | `boolean` | — | 선택 | `true`이면 `dangerSoft` 타일에 `danger` 아이콘. |

#### SettingsRow

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `icon` | `ReactNode` | — | 선택 | 앞 요소. 보통 `SettingsIcon`. |
| `title` | `string` | — | 필수 | 제목(`bodyStrong`). |
| `subtitle` | `string` | — | 선택 | 제목 아래 보조 글(`small`). |
| `value` | `string` | — | 선택 | 현재 값. 길면 …으로 줄어든다. |
| `onPress` | `() => void` | — | 선택 | 있으면 행이 버튼이 된다. |
| `right` | `ReactNode` | — | 선택 | 뒤 요소. 스위치 등. |
| `tone` | `string` | `color.text` | 선택 | 제목 글자색. 위험한 행은 `color.danger`. |
| `chevron` | `boolean` | `true` | 선택 | `false`이면 화살표를 숨긴다. 기본 `true`(`onPress`가 있을 때). |
| `accessibilityHint` | `string` | — | 선택 | 화면 읽기 프로그램이 읽는 설명. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 패널 | `surface`, 모서리 22, `shadow(1)`(다크는 1px `cardBorder`) |
| 행 | 최소 58, 좌우 18, 위아래 12, 사이 12 |
| 구분선 | 헤어라인 `line`, 시작 위치 18(아이콘 있으면 64) |
| 아이콘 타일 | 34 × 34, 모서리 11, `well` 바탕, 아이콘 18 선 2.1 `textSecondary` |
| 구역 이름 | `smallStrong`, `textSecondary`, 아래 8, 왼쪽 4 |

## 접근성

- `onPress`가 있는 행은 `button`이고 이름은 "제목, 보조 글, 값"을 이어 읽는다.
- 화살표(ChevronRight)가 눌리는 행임을 보여 준다.
- 위험한 행은 빨간 글자와 아이콘으로, 글자(로그아웃 등)로도 알린다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 행 제목 | `text` | `surface` | 17.15:1 통과 | 15.25:1 통과 | 16.13:1 통과 | 10.92:1 통과 | 4.5:1 |
| 현재 값 (13px) | `textSecondary` | `surface` | 4.23:1 미달 | 6.95:1 통과 | 4.88:1 통과 | 7.11:1 통과 | 4.5:1 |
| 위험한 행 제목 | `danger` | `surface` | 4.55:1 통과 | 5.76:1 통과 | 5.04:1 통과 | 7.11:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 아이콘은 모두 중립색이고, 위험한 행만 빨강이다.
- 잘못한 예: 행마다 다른 색 아이콘을 쓰면 위험한 행이 눈에 띄지 않는다.

## 함께 보는 컴포넌트

- [SettingsSwitch](https://developers.moring.co/tds/components/settings-switch.md): 켜고 끄는 스위치다. 설정 행의 오른쪽에 놓는다.
- [WellRow](https://developers.moring.co/tds/components/well-row.md): 패널 안의 목록 한 줄이다. 옅은 홈(`well`)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.
- [Panel](https://developers.moring.co/tds/components/panel.md): 회색 바탕(`canvas`) 위에 놓는 흰 패널이다. 제목 줄(제목, 설명 아이콘, 오른쪽 링크)과 내용을 담는다. 리포트와 시험 계획 화면의 기본 면이다.