# ScreenHeader

Calendar 앱의 전체 화면 위쪽 줄이다. 왼쪽에 뒤로, 가운데에 제목, 오른쪽에 행동. 모두 48의 누르는 영역이고 화면 가장자리에서 8 들어와 있다.

- 분류: Calendar 앱
- 가져오기: `import { ScreenHeader, HeaderAction } from '@/cal/ScreenHeader'`
- 코드 위치: `apps/calendar/src/cal/ScreenHeader.tsx:12` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/calendar-header

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 이 컴포넌트는 Mordy Calendar 앱(`apps/calendar/src/cal`)에만 있다.
- 일정 편집, 설정 같은 전체 화면 맨 위에 쓴다.
- 오른쪽 행동은 `HeaderAction`에 아이콘을 넣어 `right`에 넘긴다.

### 쓰지 않는다
- Mordy 앱에는 쓰지 않는다. 그쪽은 `BackHeader`다.
- 오른쪽에 행동을 둘 넘게 두지 않는다. 제목이 화면 가운데에서 밀린다.

## 종류

| 이름 | 설명 |
| --- | --- |
| ScreenHeader | 줄 전체. 제목은 두 옆 영역 사이가 아니라 화면 가운데에 놓인다. |
| HeaderAction | 오른쪽 아이콘 행동 하나(48 × 48, 원형 물결). |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 56, 좌우 8 | 양쪽 영역 폭 56, 누르는 영역 48. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 뒤로 누름 | 앞 화면이 있으면 돌아가고, 없으면 홈으로 간다. |

## 사용 방법

### 기본

```tsx
import { HeaderAction, ScreenHeader } from '@/cal/ScreenHeader';

<ScreenHeader title="일정 편집" right={<HeaderAction label="삭제" onPress={remove}><Trash2 size={22} color={color.text} /></HeaderAction>} />
```

### 속성(props)

#### ScreenHeader

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `title` | `string` | — | 선택 | 가운데 제목(`headline`, 한 줄). |
| `right` | `ReactNode` | — | 선택 | 오른쪽에 놓을 요소(보통 `HeaderAction`). |
| `onBack` | `() => void` | — | 선택 | 뒤로 누를 때 실행할 함수. 없으면 앞 화면, 없으면 홈. |

#### HeaderAction

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `label` | `string` | — | 필수 | 접근성 이름. 필수. |
| `onPress` | `() => void` | — | 필수 | 눌렀을 때 실행할 함수. |
| `children` | `ReactNode` | — | 필수 | 그릴 아이콘. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 줄 | 높이 56, 좌우 8 |
| 양쪽 영역 | 폭 56, 높이 48. 뒤로 아이콘은 ChevronLeft 26 선 2.2 |
| 제목 | `headline`, 가운데, 역할 `header` |
| HeaderAction | 48 × 48 |

## 접근성

- 뒤로 버튼은 "뒤로", 제목은 `header` 역할이다. `HeaderAction`은 `label`이 이름이다.
- 눌리는 영역이 48 × 48이라 최소 크기를 지킨다.

## 잘한 예와 잘못한 예

- 잘한 예: 행동의 `label`을 쓴다.
- 잘못한 예: 오른쪽 행동이 많으면 제목이 가운데에서 밀린다.

## 함께 보는 컴포넌트

- [BackHeader](https://developers.moring.co/tds/components/back-header.md): 화면 위쪽의 뒤로 가기 줄이다. 왼쪽에 뒤로 화살표, 가운데에 제목(선택), 오른쪽에 행동 자리가 있다.
- [IconButton](https://developers.moring.co/tds/components/icon-button.md): 아이콘 하나만 있는 투명한 둥근 버튼이다. 헤더의 "뒤로", "검색"에 쓴다.