# BackHeader

화면 위쪽의 뒤로 가기 줄이다. 왼쪽에 뒤로 화살표, 가운데에 제목(선택), 오른쪽에 행동 자리가 있다.

- 분류: 탐색
- 가져오기: `import { BackHeader } from '@/ui/layout'`
- 코드 위치: `apps/mobile/src/ui/layout.tsx:67` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/back-header

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 상세 화면, 설정 하위 화면처럼 앞 화면으로 돌아갈 수 있는 화면 맨 위에 쓴다.
- 오른쪽 행동은 `right`에 `IconButton`이나 `TextButton`으로 넣는다.

### 쓰지 않는다
- 탭의 첫 화면에 쓰지 않는다. 첫 화면은 `TitleHeader`다.
- 가운데 제목을 한 줄이 넘게 쓰지 않는다. 한 줄로 줄이고 넘치면 …으로 줄인다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 제목 있음 | 가운데에 `headline` 제목. |
| 제목 없음 | 가운데가 비어 있다. 이미지나 사진 위에 놓을 때 쓴다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 52 | 뒤로 버튼은 40 × 40이고 왼쪽 -10만큼 당겨 아이콘이 화면 왼쪽 선(20)에 맞는다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 기본 모습이다. |
| 뒤로 누름 | 앞 화면이 있으면 돌아가고, 없으면 홈(`/`)으로 간다. 투명도 0.6. |

## 사용 방법

### 기본

```tsx
import { BackHeader } from '@/ui/layout';

<BackHeader title="영어 단어장" right={<IconButton label="검색" onPress={openSearch}><Search size={22} color={color.text} /></IconButton>} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `title` | `string` | — | 선택 | 가운데 제목. 없으면 가운데가 비어 있다. |
| `right` | `ReactNode` | — | 선택 | 오른쪽에 놓을 요소(행동 버튼). |
| `onBack` | `() => void` | — | 선택 | 뒤로 누를 때 실행할 함수. 없으면 앞 화면으로 돌아가고, 앞 화면이 없으면 홈으로 간다. |
| `tone` | `string` | `color.text` | 선택 | 뒤로 화살표의 색. 기본 `color.text`. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 높이 | 52 |
| 뒤로 아이콘 | ChevronLeft 26px, 선 2.2, `IconButton` 40 × 40 |
| 제목 | `headline`(17/24 Bold), 가운데 정렬, 한 줄 |
| 오른쪽 자리 | 최소 폭 40, 오른쪽 정렬 |

## 접근성

- 뒤로 버튼의 이름은 "뒤로"이고 `button` 역할이다.
- 제목은 `header` 역할이다.

## 잘한 예와 잘못한 예

- 잘한 예: 제목은 짧게, 오른쪽 행동은 하나만 둔다.
- 잘못한 예: 제목이 길면 잘린다. 한 줄에 들어갈 길이로 쓴다.

## 함께 보는 컴포넌트

- [TitleHeader](https://developers.moring.co/tds/components/title-header.md): 탭의 첫 화면 위쪽에 놓는 큰 제목 줄이다. 왼쪽에 제목, 오른쪽에 행동 자리가 있다.
- [IconButton](https://developers.moring.co/tds/components/icon-button.md): 아이콘 하나만 있는 투명한 둥근 버튼이다. 헤더의 "뒤로", "검색"에 쓴다.
- [Screen](https://developers.moring.co/tds/components/screen.md): 모든 화면의 바탕이다. 안전 영역, 키보드, 스크롤, 좌우 여백, 아래 고정 영역을 한 번에 처리한다.