# PageDots

지금이 몇 번째 단계인지 알려 주는 작은 점 줄이다. 온보딩 단계 표시에 쓴다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 3~6단계로 나뉜 온보딩이나 안내에서 지금 위치를 알릴 때 쓴다.

### 쓰지 않는다
- 눌러서 이동하는 컨트롤로 쓰지 않는다. 눌리지 않는다.
- 7단계가 넘는 흐름에 쓰지 않는다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 점 6, 현재 점 8, 간격 6 |  |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 지금 단계의 점은 8px `primary`, 나머지는 6px `lineStrong`. |

## 사용 방법

### 기본

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

<PageDots count={4} index={step} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `count` | `number` | — | 필수 | 전체 단계 수. |
| `index` | `number` | — | 필수 | 지금 단계(0부터). |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 점 | 6px 원, 현재 점 8px |
| 색 | 현재 `primary`, 나머지 `lineStrong` |
| 간격 | 6 |

## 접근성

- 점 줄 전체에 "{전체}단계 중 {현재}단계"라는 이름이 붙는다. 점 하나하나는 읽지 않는다.

## 잘한 예와 잘못한 예

- 잘한 예: 단계 수가 적고 이동 버튼이 따로 있다.
- 잘못한 예: 점이 너무 많으면 어디인지 알 수 없다.

## 함께 보는 컴포넌트

- [CircleButton](https://developers.moring.co/tds/components/circle-button.md): 화살표가 들어 있는 둥근 주색 버튼이다. 온보딩에서 다음 단계로 넘어갈 때 쓴다.
- [WeekStrip](https://developers.moring.co/tds/components/week-strip.md): 월요일부터 일요일까지 7일을 한 줄로 보여 주는 주간 표시다. 공부한 날에는 점이 찍힌다.