# Gap · HScroll

`Gap`은 세로 빈 간격이고, `HScroll`은 가로로 밀어 보는 줄이다. 레이아웃을 돕는 작은 컴포넌트다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- `Gap`: 요소 사이에 간격 토큰 높이의 빈 공간을 넣을 때 쓴다. 기본 12(`md`).
- `HScroll`: 칩이나 카드가 많아 한 줄에 다 안 들어갈 때 옆으로 밀게 한다. 요소 사이 간격은 8(`sm`)이다.

### 쓰지 않는다
- `Gap`에 간격 토큰에 없는 값을 쓰지 않는다.
- `HScroll` 안에 핵심 행동을 숨기지 않는다. 가로로 밀어야 보인다는 것을 모르는 사용자가 있다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| Gap | `size` 기본 12 | 값은 간격 토큰(`xs`4 ~ `xxxl`40) 중에서 고른다. |
| HScroll | 요소 사이 8 | 스크롤 막대는 숨긴다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | Gap은 눈에 보이지 않는다. HScroll은 가로로 밀린다. |

## 사용 방법

### Gap

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

<Panel title="이번 주">{/* … */}</Panel>
<Gap size={space.xl} />
<Panel title="지난 주">{/* … */}</Panel>
```

### HScroll

```tsx
import { HScroll } from '@/ui/controls';

<HScroll>
  {subjects.map((s) => <Chip key={s.id} label={s.name} />)}
</HScroll>
```

### 속성(props)

#### Gap

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `size` | `number` | `space.md` | 선택 | 높이(px). 기본 `space.md`(12). |

#### HScroll

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | — | 필수 | 가로로 놓을 요소들. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| Gap | 높이만 있는 빈 `View` |
| HScroll | 가로 `ScrollView`, 요소 사이 `space.sm`(8), 스크롤 막대 숨김 |

## 접근성

- `HScroll`은 화면 읽기 프로그램에서 가로 스크롤 영역으로 읽힌다. 줄에 들어 있는 요소는 모두 같은 방법으로 읽을 수 있어야 한다.

## 잘한 예와 잘못한 예

- 잘한 예: 칩 같은 보조 선택지를 가로 줄에 둔다.
- 잘못한 예: 주 버튼을 가로 스크롤 줄에 두면 안 보일 수 있다.

## 함께 보는 컴포넌트

- [Chip](https://developers.moring.co/tds/components/chip.md): 짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.
- [Panel](https://developers.moring.co/tds/components/panel.md): 회색 바탕(`canvas`) 위에 놓는 흰 패널이다. 제목 줄(제목, 설명 아이콘, 오른쪽 링크)과 내용을 담는다. 리포트와 시험 계획 화면의 기본 면이다.
- [SectionTitle](https://developers.moring.co/tds/components/section-title.md): 화면 안의 한 묶음(섹션)을 시작하는 제목 줄이다. 위에 24, 아래에 12의 간격을 포함한다.