# ScoreBars

과목별 예상 점수(0~100)를 막대로 보여 준다. 점수는 막대 위에, 과목 이름은 아래에 쓴다.

- 분류: 차트
- 가져오기: `import { ScoreBars } from '@/ui/charts'`
- 코드 위치: `apps/mobile/src/ui/charts.tsx:416` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/score-bars

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 과목별 점수 비교(예상 점수)를 보여 줄 때 쓴다. 막대 색은 과목 색을 쓴다.
- 기록이 모자란 과목은 `value`를 `null`로 두면 "–"와 짧은 막대로 표시된다.

### 쓰지 않는다
- 0~100이 아닌 값에는 쓰지 않는다.
- 점수 숫자를 막대 위에서 빼지 않는다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 최대 막대 높이 110 | 막대 폭은 칸의 72%(최대 44). 위쪽 모서리 12, 아래쪽 4. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 값 있음 | 막대는 과목 색의 55% → 90% 그라데이션. |
| 값 없음 | `null`이면 높이 10, 12% 색, 점수 자리에 "–". |

## 사용 방법

### 기본

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

<ScoreBars data={subjects.map((s) => ({ label: s.name, value: s.score, tint: palette[s.color].glyph }))} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `data` | `{ label: string; value: number \| null; tint: string; a11y?: string }[]` | — | 필수 | 막대 목록. 각 항목: `label`(과목 이름), `value`(0~100 또는 `null`), `tint`(막대 색), `a11y`(접근성 이름). |
| `height` | `number` | `110` | 선택 | 가장 큰 막대의 높이(px). 기본 110. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 막대 | 폭 칸의 72%(최대 44), 높이 = 값/100 × 110(최소 10), 모서리 위 12·아래 4 |
| 점수 | `bodyStrong`, 막대 위 6 |
| 이름 | `small` `textSecondary`, 막대 아래 8 |

## 접근성

- 각 막대의 이름은 `a11y` 또는 "{과목} {점수}"("수학 82")다. 기록이 모자라면 "기록 부족".

## 잘한 예와 잘못한 예

- 잘한 예: 점수 숫자와 과목 이름을 함께 쓴다.
- 잘못한 예: 기록이 없는 과목을 0점처럼 보이게 하지 않는다. `null`로 "–"를 쓴다.

## 함께 보는 컴포넌트

- [HourBars](https://developers.moring.co/tds/components/hour-bars.md): 값 축이 있는 막대 차트다. 학습 시간(시간·분)이나 푼 문제 수를 날짜별로 보여 주고, 고른 막대 위에 말풍선이 뜬다.
- [SubjectIcon](https://developers.moring.co/tds/components/subject-icon.md): 과목을 나타내는 둥근 아이콘 타일이다. 과목마다 기호(Σ, Aa, 책, 건물, 잎, 지구, …)와 색이 정해져 있다.