# SectionTitle

화면 안의 한 묶음(섹션)을 시작하는 제목 줄이다. 위에 24, 아래에 12의 간격을 포함한다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- "내 과목", "최근 자료"처럼 목록 묶음 위에 쓴다.
- 오른쪽에는 "전체보기" 같은 `TextButton`을 둘 수 있다.

### 쓰지 않는다
- 패널 안의 제목에는 쓰지 않는다. `PanelHead`를 쓴다.
- 화면의 맨 위 큰 제목에는 쓰지 않는다. `TitleHeader`다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 위 24, 아래 12 | `style`로 바꿀 수 있지만 바꾸지 않는다(규칙 S4). |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 기본 모습이다. |

## 사용 방법

### 기본

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

<SectionTitle title="최근 자료" right={<TextButton label="전체 보기" onPress={openAll} />} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `title` | `string` | — | 필수 | 제목(`headline`). |
| `right` | `ReactNode` | — | 선택 | 오른쪽 요소. |
| `style` | `StyleProp<ViewStyle>` | — | 선택 | 간격을 바꿀 때만 쓴다. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 간격 | 위 `xl`(24), 아래 `md`(12) |
| 글자 | `headline`(17/24 Bold) |
| 배치 | 제목은 왼쪽, 오른쪽 요소는 끝(`space-between`) |

## 접근성

- 제목 글자는 읽힌다. 역할은 따로 지정하지 않는다.

## 잘한 예와 잘못한 예

- 잘한 예: 위 간격이 아래보다 커서 제목이 아래 목록에 속해 보인다.
- 잘못한 예: 간격을 모두 같게 하면 제목이 위 목록에 속해 보인다.

## 함께 보는 컴포넌트

- [Panel](https://developers.moring.co/tds/components/panel.md): 회색 바탕(`canvas`) 위에 놓는 흰 패널이다. 제목 줄(제목, 설명 아이콘, 오른쪽 링크)과 내용을 담는다. 리포트와 시험 계획 화면의 기본 면이다.
- [TitleHeader](https://developers.moring.co/tds/components/title-header.md): 탭의 첫 화면 위쪽에 놓는 큰 제목 줄이다. 왼쪽에 제목, 오른쪽에 행동 자리가 있다.
- [TextButton](https://developers.moring.co/tds/components/text-button.md): 글자만 있는 가장 가벼운 버튼이다. "나중에", "건너뛰기" 같은 선택 행동에 쓴다.