# AreaLine

누적 값을 선과 옅은 면으로 보여 주는 차트다. 모든 점에 점이 찍히고 마지막 점에 말풍선이 뜬다. 리포트의 누적 문제 수, 누적 학습 시간에 쓴다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 월별 누적 문제 수나 학습 시간처럼 계속 늘어나는 값을 보여 줄 때 쓴다.

### 쓰지 않는다
- 증가·감소가 오가는 값에는 쓰지 않는다. 누적(계속 늘기만 하는 값)용이다.
- 점이 2개 미만이면 선이 없다. 쓰지 않는다.

## 종류

| 이름 | 설명 |
| --- | --- |
| count (기본) | 축이 0·중간·최대의 정수. 말풍선은 숫자. |
| time | 축이 시간(h) 또는 분. 말풍선은 "n시간 n분". |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 그래프 높이 150 | 위쪽 36은 말풍선 자리. 축 라벨 폭 38. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 마지막 점 | 지름 9의 채운 점과 위에 말풍선. 나머지 점은 지름 6의 속 빈 점. |

## 사용 방법

### 기본

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

<AreaLine values={months.map((m) => m.total)} labels={months.map((m) => `${m.month}월`)} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `values` | `number[]` | — | 필수 | 점의 값 목록(누적). |
| `labels` | `string[]` | — | 필수 | 점마다의 라벨(같은 길이). |
| `height` | `number` | `150` | 선택 | 그래프 높이(px). 기본 150. |
| `format` | `'count' \| 'time'` | `'count'` | 선택 | `"count"`(기본) 또는 `"time"`. |
| `bubbleColor` | `string` | `color.primary` | 선택 | 말풍선 색. 기본 `color.primary`. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 선 | 두께 2.4, 면은 `primary` 30% → 2% 그라데이션 |
| 점 | 지름 6(속 `surface`, 테두리 1.8), 마지막은 지름 9 채움 |
| 라벨 | 최대 6개 정도로 줄여 겹치지 않게 놓는다(마지막은 항상 표시) |

## 접근성

- 앱 코드의 차트에는 이름이 없다. 부모에 이름과 마지막 값을 글자로 붙인다. 웹 미리보기는 그림 전체에 "누적 추이. 마지막 값 …" 이름을 붙였다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 말풍선 글자 (11.5px 굵게) | `onPrimary` | `primary` | 3.93:1 미달 | 3.31:1 미달 | 4.60:1 통과 | 7.25:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 마지막 값이 말풍선으로 보인다.
- 잘못한 예: 오르내리는 값에는 쓰지 않는다. 누적용이다.

## 함께 보는 컴포넌트

- [HourBars](https://developers.moring.co/tds/components/hour-bars.md): 값 축이 있는 막대 차트다. 학습 시간(시간·분)이나 푼 문제 수를 날짜별로 보여 주고, 고른 막대 위에 말풍선이 뜬다.
- [Sparkline](https://developers.moring.co/tds/components/sparkline.md): 정답률 같은 작은 추이를 보여 주는 선 그림이다. 값이 없는 날은 선이 끊기고, 마지막 점이 크게 표시된다.