ScoreBars
과목별 예상 점수(0~100)를 막대로 보여 준다. 점수는 막대 위에, 과목 이름은 아래에 쓴다.
- 분류
- 차트
- 가져오기
import { ScoreBars } from '@/ui/charts'- 코드 위치
apps/mobile/src/ui/charts.tsx:416
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
82수학
64영어
–국어
47과학
언제 쓰는가#
쓴다
- 과목별 점수 비교(예상 점수)를 보여 줄 때 쓴다. 막대 색은 과목 색을 쓴다.
- 기록이 모자란 과목은
value를null로 두면 "–"와 짧은 막대로 표시된다.
쓰지 않는다
- 0~100이 아닌 값에는 쓰지 않는다.
- 점수 숫자를 막대 위에서 빼지 않는다.
종류#
종류가 없다.
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 최대 막대 높이 110 | 막대 폭은 칸의 72%(최대 44). 위쪽 모서리 12, 아래쪽 4. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 값 있음 | 막대는 과목 색의 55% → 90% 그라데이션. |
| 값 없음 | null이면 높이 10, 12% 색, 점수 자리에 "–". |
사용 방법#
기본
기본
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- 이름
smalltextSecondary, 막대 아래 8
접근성#
- 각 막대의 이름은
a11y또는 "{과목} {점수}"("수학 82")다. 기록이 모자라면 "기록 부족".
잘한 예와 잘못한 예#
82수학
64영어
–국어
null로 "–"를 쓴다.함께 보는 컴포넌트#
- HourBars: 값 축이 있는 막대 차트다. 학습 시간(시간·분)이나 푼 문제 수를 날짜별로 보여 주고, 고른 막대 위에 말풍선이 뜬다.
- SubjectIcon: 과목을 나타내는 둥근 아이콘 타일이다. 과목마다 기호(Σ, Aa, 책, 건물, 잎, 지구, …)와 색이 정해져 있다.