# Timeline

세로 선으로 단계를 이어 보여 주는 타임라인이다. 시험 준비 단계(개념 → 문제 → 모의고사)에 쓴다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 순서가 있는 2~5개 단계와 지금 위치를 보여 줄 때 쓴다.
- 단계마다 점 색을 다르게 줄 수 있고, 선은 앞뒤 점의 색이 섞이며 이어진다.

### 쓰지 않는다
- 순서가 없는 목록에 쓰지 않는다. 일반 목록은 `WellRow`.
- 단계마다 긴 문단을 넣지 않는다. 라벨, 제목, 한 줄 설명만 쓴다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 점 15, 점 둘레 24, 선 폭 2 | 단계 사이 간격 18. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 지금 단계 | 점 둘레에 점 색 18% 투명도의 원이 깔리고 라벨이 점 색이다. |
| 지난 단계 | `done`이면 투명도 0.5. |
| 다음 단계 | 기본 모습. 라벨 `slate`. |

## 사용 방법

### 기본

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

<Timeline items={[
  { key: 'a', label: '지금 단계', title: '개념 정리', detail: '10월 1일 ~ 10월 7일', dot: palette.blue.glyph, active: true },
  { key: 'b', label: '다음 단계', title: '문제 풀이', detail: '10월 8일 ~ 10월 20일', dot: palette.orange.glyph },
]} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `items` | `{ key: string; label: string; title: string; detail: string; dot: string; active?: boolean; done?: boolean }[]` | — | 필수 | 단계 목록. 각 항목: `key`, `label`(작은 이름), `title`(제목), `detail`(설명), `dot`(점 색), `active`(지금 단계), `done`(지난 단계). |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 점 | 15px 원 + 가운데 5px 흰 점, 둘레 24px(지금 단계는 18% 색) |
| 선 | 폭 2, 앞 점 색 55% → 뒤 점 색 55% 그라데이션 |
| 글자 | 라벨 `small` SemiBold, 제목 `headline` 16/23, 설명 `small` `textSecondary` |

## 접근성

- 각 단계에 "{라벨}, {제목}, {설명}, 지금 단계"라는 이름이 붙는다.
- 지금 단계는 색과 "지금 단계" 글자로 함께 나타낸다.

## 잘한 예와 잘못한 예

- 잘한 예: 지금 단계의 라벨에 글자("지금 단계")를 쓴다.
- 잘못한 예: 모든 단계를 같은 색으로 하고 라벨도 없으면 지금 어디인지 알 수 없다.

## 함께 보는 컴포넌트

- [WeekStrip](https://developers.moring.co/tds/components/week-strip.md): 월요일부터 일요일까지 7일을 한 줄로 보여 주는 주간 표시다. 공부한 날에는 점이 찍힌다.
- [WellRow](https://developers.moring.co/tds/components/well-row.md): 패널 안의 목록 한 줄이다. 옅은 홈(`well`)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.