# SegmentedProgress

문제 하나에 칸 하나씩, 푼 문제만큼 칸이 채워지는 진행 막대다. 퀴즈 맨 위에 쓴다.

- 분류: 데이터 표시
- 가져오기: `import { SegmentedProgress } from '@/ui/charts'`
- 코드 위치: `apps/mobile/src/ui/charts.tsx:127` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/segmented-progress

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 문제 풀이 화면의 위쪽에서 "몇 문제 중 몇 문제"를 보여 줄 때 쓴다.

### 쓰지 않는다
- 칸이 30개를 넘으면 쓰지 않는다. 칸이 너무 얇아진다. `ProgressBar`를 쓴다.
- 진행 정도가 연속적인 값(퍼센트)일 때 쓰지 않는다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 7, 칸 사이 6 | 칸 폭은 전체 폭을 `total`로 나눈다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 채워짐 | 칸이 `gradient`로 380ms 동안 왼쪽에서 오른쪽으로 채워진다. |
| 비어 있음 | `track` 색. |

## 사용 방법

### 기본

```tsx
import { SegmentedProgress } from '@/ui/charts';

<SegmentedProgress total={questions.length} done={answered} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `total` | `number` | — | 필수 | 전체 칸 수(문제 수). 0이면 칸 1개. |
| `done` | `number` | — | 필수 | 채울 칸 수. |
| `height` | `number` | `7` | 선택 | 높이(px). 기본 7. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 칸 | 높이 7, 모서리는 높이와 같음, 사이 6, `track` 바탕, `gradient` 채움 |
| 움직임 | 채움 380ms, out 곡선 |

## 접근성

- 역할은 `progressbar`, 값은 0~`total`이다.
- "3/8문제" 같은 글자를 함께 쓴다.

## 잘한 예와 잘못한 예

- 잘한 예: 문제 수가 적고 글자로도 알린다.
- 잘못한 예: 칸이 너무 많으면 칸이 얇아져 보이지 않는다.

## 함께 보는 컴포넌트

- [ProgressBar](https://developers.moring.co/tds/components/progress-bar.md): 진행률을 가로 막대로 보여 준다. 채운 부분은 기본으로 서비스 주색 그라데이션이다.
- [OptionRow](https://developers.moring.co/tds/components/option-row.md): 퀴즈 보기 한 줄이다. 고르기 전, 고른 뒤, 채점 뒤(정답, 오답)의 모습이 정해져 있다.