# WellRow

패널 안의 목록 한 줄이다. 옅은 홈(`well`)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.

- 분류: 면과 목록
- 가져오기: `import { WellRow, RowIcon } from '@/ui/surface'`
- 코드 위치: `apps/mobile/src/ui/surface.tsx:73` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/well-row

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 과목, 자료, 시험처럼 눌러서 이동하거나 고르는 목록 행에 쓴다.
- 선택 목록(시트)에서는 `selected`와 `RadioMark`를 함께 쓴다.
- 앞에 `RowIcon`을 두면 상태 색을 가진 아이콘 타일이 된다.

### 쓰지 않는다
- 설정 행에는 쓰지 않는다. `SettingsRow`를 쓴다.
- 행마다 그림자를 주지 않는다.
- 제목을 두 줄 넘게 쓰지 않는다. `titleLines`로 줄 수를 정하고 넘치면 …으로 줄인다.

## 종류

| 이름 | 설명 |
| --- | --- |
| WellRow | 목록 행. `onPress`가 있으면 버튼이고 뒤에 ChevronRight가 자동으로 붙는다. |
| RowIcon | 행 앞의 42 × 42 아이콘 타일. `tone`으로 색을 준다: 기본(흰), `primary`, `success`, `amber`, `danger`. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 행 | 최소 높이 56 | 좌우 12, 위아래 10, 모서리 18, 요소 사이 12. |
| RowIcon | 42 × 42, 모서리 14 | 아이콘은 20px. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | `well` 바탕, 같은 색 1.2px 테두리. |
| 선택됨 | `selected` 바탕, `primary` 1.2px 테두리. |
| 누름 | 투명도 0.8. |

## 사용 방법

### 기본

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

<WellRow
  icon={<RowIcon tone="primary"><BookOpen size={20} color={toneInk('primary')} strokeWidth={2.1} /></RowIcon>}
  title="수학"
  meta="자료 18개 · 복습 12개"
  onPress={() => router.push('/subject/math')}
/>
```

### 속성(props)

#### WellRow

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `icon` | `ReactNode` | — | 선택 | 앞에 놓을 요소. 보통 `RowIcon`. |
| `title` | `ReactNode` | — | 필수 | 제목. 글자면 `bodyStrong`으로 그린다. |
| `meta` | `ReactNode` | — | 선택 | 제목 아래 보조 줄. 글자면 `caption` `textSecondary`. |
| `right` | `ReactNode` | — | 선택 | 뒤에 놓을 요소. 생략하고 `onPress`가 있으면 ChevronRight를 둔다. |
| `onPress` | `() => void` | — | 선택 | 있으면 행이 버튼이 된다. |
| `selected` | `boolean` | — | 선택 | 선택되었는지. |
| `accessibilityLabel` | `string` | — | 선택 | 행의 이름. 안의 글자와 다르게 읽히게 할 때만 쓴다. |
| `style` | `StyleProp<ViewStyle>` | — | 선택 | 바깥 여백이나 배치만 바꾸는 React Native 스타일이다. |
| `titleLines` | `number` | `1` | 선택 | 제목의 최대 줄 수. 기본 1. |

#### RowIcon

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | — | 필수 | 타일 안의 아이콘. |
| `tone` | `'danger' \| 'primary' \| 'success' \| 'amber'` | — | 선택 | 타일 색. `"danger"`, `"primary"`, `"success"`, `"amber"`. 없으면 흰색(`surface`). |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 행 | 최소 높이 56, 모서리 18, 좌우 12, 위아래 10, 사이 12, 바탕 `well` |
| 글자 | 제목 `bodyStrong`, 보조 `caption`(`textSecondary`) |
| 선택 | `selected` 바탕 + `primary` 테두리 |
| RowIcon | 42 × 42, 모서리 14, 바탕은 tone의 `…Soft`, 아이콘 20 선 2.1 |

## 접근성

- `onPress`가 있으면 `button` 역할이고 `selected` 상태가 전달된다.
- 선택은 색과 테두리, (시트에서는) 라디오 표시로 나타낸다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 행 제목 | `text` | `well` | 16.12:1 통과 | 14.08:1 통과 | 14.95:1 통과 | 9.62:1 통과 | 4.5:1 |
| 보조 줄 (11.5px) | `textSecondary` | `well` | 3.98:1 미달 | 6.42:1 통과 | 4.52:1 통과 | 6.26:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 앞 아이콘, 제목, 보조 줄, 뒤 화살표 순서로 놓는다.
- 잘못한 예: 행마다 그림자를 주지 않는다. 홈(`well`) 색이 구분을 맡는다.

## 함께 보는 컴포넌트

- [Panel](https://developers.moring.co/tds/components/panel.md): 회색 바탕(`canvas`) 위에 놓는 흰 패널이다. 제목 줄(제목, 설명 아이콘, 오른쪽 링크)과 내용을 담는다. 리포트와 시험 계획 화면의 기본 면이다.
- [SettingsGroup](https://developers.moring.co/tds/components/settings-list.md): 설정 화면의 목록이다. 작은 구역 이름, 행이 든 흰 패널, 아래 안내 글로 이루어진다.
- [RadioMark](https://developers.moring.co/tds/components/radio-mark.md): 선택 목록 행의 끝에 놓는 동그란 라디오 표시다. 시트의 선택 목록에서 쓴다.
- [SwipeRow](https://developers.moring.co/tds/components/swipe-row.md): 행을 왼쪽으로 밀면 뒤에서 행동 하나(삭제 등)가 나타나고, 끝까지 밀면 그 행동이 실행되는 행이다.