ChoiceNumber
숫자가 들어간 얇은 동그라미다. 시험지 보기 번호(① ② ③ ④ ⑤)를 그린다.
- 분류
- 입력과 선택
- 가져오기
import { ChoiceNumber } from '@/ui/controls'- 코드 위치
apps/mobile/src/ui/controls.tsx:88
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- 시험지 모양의 보기 앞에 번호를 붙일 때 쓴다.
OptionRow가index를 받으면 자동으로 쓴다. - 번호 색은
tone으로 바꾼다. 오답이면danger.
쓰지 않는다
- 글자가 들어가는 표지에 쓰지 않는다. 숫자 한 자리를 가정한 크기다. 글자는
Chip을 쓴다. - 두 자리 숫자에 쓰지 않는다. 동그라미 안에서 숫자가 넘친다.
종류#
종류가 없다. tone으로 색만 바꾼다.
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 지름 22 | size로 바꾼다. 숫자 크기는 지름 × 0.56, 선 두께는 1.4다. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 기본 | textSecondary 선과 숫자. |
| 오답 | danger 색. |
사용 방법#
기본
기본
import { ChoiceNumber } from '@/ui/controls';
<ChoiceNumber n={1} />
<ChoiceNumber n={2} tone={color.danger} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
n | number | — | 필수 | 그릴 숫자(한 자리). |
tone | string | color.textSecondary | 선택 | 선과 숫자의 색. 기본 color.textSecondary. |
size | number | 22 | 선택 | 지름(px). 기본 22. |
치수와 토큰#
- 모양
- 지름 22, 선 1.4px
- 숫자
- caption 계열 Bold, 크기 = 지름 × 0.56
접근성#
- 눌리지 않는 표지다. 보기 전체를
OptionRow가 하나의 라디오로 묶는다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 번호 (12px 굵게) | textSecondary | surface | 4.23:1 미달6.95:1 통과4.88:1 통과7.11:1 통과 | 4.5:1 (작은 글자) |
잘한 예와 잘못한 예#
4
12
함께 보는 컴포넌트#
- OptionRow: 퀴즈 보기 한 줄이다. 고르기 전, 고른 뒤, 채점 뒤(정답, 오답)의 모습이 정해져 있다.