CheckCircle
할 일을 완료로 바꾸는 동그란 체크 표시다. 비어 있다가 누르면 색이 채워지며 체크가 나타난다.
- 분류
- Calendar 앱
- 가져오기
import { CheckCircle } from '@/cal/ui'- 코드 위치
apps/calendar/src/cal/ui.tsx:93
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- 이 컴포넌트는 Mordy Calendar 앱(
apps/calendar/src/cal)에만 있다. - 할 일과 Mordy 계획 행의 앞에 쓴다. 과목이나 캘린더 색을
tint로 준다. - 완료는 항상 같은 모양이어야 하므로 이 컴포넌트만 쓴다.
쓰지 않는다
- 설정을 켜고 끄는 데 쓰지 않는다.
SettingsSwitch를 쓴다. - 눌러도 바뀌지 않아야 할 때(권한 없음)는
disabled로 둔다. 색으로만 비활성을 알리지 않는다.
종류#
종류가 없다. tint로 색을 바꾼다. 기본은 primary.
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 24 × 24, 선 2 | hitSlop 10으로 누르는 영역이 44 × 44가 된다. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 비어 있음 | 2px lineStrong 테두리의 빈 원. |
| 완료 | tint로 채워지고 흰 체크(14px, 선 3). |
| 비활성 | disabled이면 눌러도 반응하지 않는다. |
사용 방법#
기본
기본
import { CheckCircle } from '@/cal/ui';
<CheckCircle done={item.done} tint={itemTint(item, lookups)} label={`${item.title} 완료`} onPress={toggle} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
done | boolean | — | 필수 | 완료인지. |
onPress | () => void | — | 선택 | 눌렀을 때 호출된다(가벼운 진동 haptic.tap). |
tint | string | color.primary | 선택 | 완료일 때 채우는 색. 기본 color.primary. |
label | string | — | 필수 | 접근성 이름. 필수. 예: "수학 숙제 완료". |
disabled | boolean | — | 선택 | true이면 누를 수 없다. |
치수와 토큰#
- 모양
- 24 × 24 원, 선 2, 비었을 때
lineStrong, 완료 시tint채움 - 체크
- Check 14px, 선 3, white
- 누르는 영역
hitSlop10, 물결은 원형(borderless)
접근성#
- 역할은
checkbox이고 상태checked,disabled가 전달된다. 이름은label이다. - 완료는 색과 체크 표시로 함께 나타낸다.
- 앱은 터치 화면이라 마우스 올림(hover)이 없다. 웹에서는 포커스 링(2.5px 실선, 바깥 3px)을 직접 그린다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 완료 체크 (비글자) | white | primary | 3.93:1 통과3.31:1 통과4.60:1 통과1.98:1 미달 | 3:1 (큰 글자) |
잘한 예와 잘못한 예#
label에 무엇을 완료하는지 쓴다.label 없이 쓰지 않는다. "체크 상자"라고만 읽힌다.