# SwipeRow

행을 왼쪽으로 밀면 뒤에서 행동 하나(삭제 등)가 나타나고, 끝까지 밀면 그 행동이 실행되는 행이다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 목록 행에서 자주 쓰는 행동 하나(삭제, 보관)를 빠르게 하게 할 때 쓴다.
- 밀어서 하는 행동은 반드시 다른 방법(메뉴, 상세 화면의 버튼)으로도 할 수 있게 한다.

### 쓰지 않는다
- 밀기가 유일한 방법인 행동에 쓰지 않는다. 손을 쓰기 어려운 사용자가 할 수 없다.
- 되돌릴 수 없는 삭제를 확인 없이 실행하지 않는다. `onAction`에서 `dialog.confirm`이나 되돌리기 토스트를 쓴다.
- 가로로 스크롤되는 목록 안에서 쓰지 않는다. 제스처가 겹친다.

## 종류

종류가 없다. 행동의 색은 `tint`(기본 `danger`)로 바꾼다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 밀기 기준 110 | 왼쪽으로 110 넘게 밀고 놓으면 실행한다. 모서리는 18. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 쉬는 중 | 행동 면이 보이지 않는다(가장자리에 색이 비치지 않는다). |
| 미는 중 | 뒤에서 `tint` 색 면과 아이콘·글자가 나타난다. 기준(110)을 넘는 순간 선택 진동이 난다. |
| 놓음 | 기준을 넘었으면 200ms 동안 화면 밖으로 사라지며 `onAction`을 부른다. 못 넘었으면 스프링(damping 18)으로 제자리로 돌아온다. |

## 사용 방법

### 기본

```tsx
import { SwipeRow } from '@/ui/SwipeRow';

<SwipeRow label="삭제" icon={<Trash2 size={20} color={color.white} />} onAction={() => void removeWithUndo(item)}>
  <WellRow title={item.name} />
</SwipeRow>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | — | 필수 | 밀리는 행. |
| `label` | `string` | — | 필수 | 뒤에 나타나는 행동 이름. |
| `icon` | `ReactNode` | — | 필수 | 뒤에 나타나는 행동 아이콘. |
| `tint` | `string` | `color.danger` | 선택 | 뒤 면의 색. 기본 `color.danger`. |
| `onAction` | `() => void` | — | 필수 | 끝까지 밀고 놓았을 때 실행할 함수. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 기준 | 왼쪽으로 110 이상 밀면 실행 |
| 뒤 면 | `tint` 면, 모서리 18, 오른쪽 안쪽 22, 아이콘과 글자(`smallStrong`, white) 세로로 |
| 제스처 | 가로 18 이상 움직여야 시작, 세로 12 넘게 움직이면 취소(목록 스크롤을 방해하지 않는다) |

## 접근성

- 밀기 제스처에는 화면 읽기 프로그램용 대체 동작이 없다. 같은 행동을 상세 화면이나 메뉴에서도 제공해야 한다.
- 뒤 면의 행동은 색과 글자로 나타난다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 뒤 면 글자 (13px 굵게) | `white` | `danger` | 4.55:1 통과 | 3.02:1 미달 | 5.15:1 통과 | 1.99:1 미달 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 삭제 뒤 되돌리기 토스트를 함께 둔다.
- 잘못한 예: 밀기만으로 되는 행동은 사용자가 찾지 못할 수 있다. 같은 행동을 보이는 버튼으로도 둔다.

## 함께 보는 컴포넌트

- [WellRow](https://developers.moring.co/tds/components/well-row.md): 패널 안의 목록 한 줄이다. 옅은 홈(`well`)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.
- [dialog](https://developers.moring.co/tds/components/dialog.md): 화면 가운데 뜨는 확인 대화상자와 아래에서 올라오는 메뉴를 함수 호출 하나로 여는 도구다. 결과(눌린 버튼)를 약속(Promise)으로 돌려준다.
- [toast](https://developers.moring.co/tds/components/toast.md): 화면 아래에 잠깐 떴다 사라지는 짧은 확인 메시지다. 함수 한 번 호출로 띄운다. 되돌리기 같은 행동 하나를 붙일 수 있다.