# ProgressBar

진행률을 가로 막대로 보여 준다. 채운 부분은 기본으로 서비스 주색 그라데이션이다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 자료 처리, 단원 진도처럼 한 줄에서 진행 정도를 보일 때 쓴다.
- 막대 옆이나 위에 퍼센트 글자를 함께 쓴다.

### 쓰지 않는다
- 문제를 한 칸씩 푸는 흐름에는 쓰지 않는다. `SegmentedProgress`를 쓴다.
- 값이 없는 상태에 빈 막대만 두지 않는다. 글자("준비 중")를 함께 쓴다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 그라데이션 (기본) | `tint`를 생략하면 `gradient`(왼쪽 → 오른쪽). |
| 단색 | `tint`에 색 문자열을 주면 그 색으로 채운다. |
| 2색 | `tint`에 `[시작, 끝]`을 주면 그 그라데이션으로 채운다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 8 | `height`로 바꾼다. 모서리는 높이와 같아서 양 끝이 둥글다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 0% | 채움이 없고 `track` 바탕만 보인다. |
| 진행 중 | 기본 모습이다. |
| 100% | 기본 모습이다. |

## 사용 방법

### 기본

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

<ProgressBar value={done / total} />
<ProgressBar value={0.8} tint={color.success} height={12} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `value` | `number` | — | 필수 | 진행률(0~1). |
| `height` | `number` | `8` | 선택 | 높이(px). 기본 8. |
| `tint` | `string \| readonly [string, string]` | — | 선택 | 채움 색. 생략하면 `gradient`, 문자열이면 단색, `[시작, 끝]`이면 그 그라데이션. |
| `track` | `string` | `color.track` | 선택 | 바탕 색. 기본 `color.track`. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 높이와 모서리 | 높이 8, 모서리는 높이와 같다 |
| 색 | 바탕 `track`, 채움 `gradient` |

## 접근성

- 역할은 `progressbar`, 값 0~100이 전달된다.
- 퍼센트 글자를 함께 쓴다.

## 잘한 예와 잘못한 예

- 잘한 예: 퍼센트 글자를 옆에 쓴다.
- 잘못한 예: 막대만 있으면 정확한 값을 모른다.

## 함께 보는 컴포넌트

- [SegmentedProgress](https://developers.moring.co/tds/components/segmented-progress.md): 문제 하나에 칸 하나씩, 푼 문제만큼 칸이 채워지는 진행 막대다. 퀴즈 맨 위에 쓴다.
- [ProgressRing](https://developers.moring.co/tds/components/progress-ring.md): 진행률을 둥근 고리로 보여 준다. `ProgressRing`은 작은 고정 고리, `AnimatedRing`은 나타날 때 0%에서 값까지 채워지는 큰 고리다.