# CheckCircle

할 일을 완료로 바꾸는 동그란 체크 표시다. 비어 있다가 누르면 색이 채워지며 체크가 나타난다.

- 분류: Calendar 앱
- 가져오기: `import { CheckCircle } from '@/cal/ui'`
- 코드 위치: `apps/calendar/src/cal/ui.tsx:93` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/check-circle

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 이 컴포넌트는 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`이면 눌러도 반응하지 않는다. |

## 사용 방법

### 기본

```tsx
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 |
| 누르는 영역 | `hitSlop` 10, 물결은 원형(`borderless`) |

## 접근성

- 역할은 `checkbox`이고 상태 `checked`, `disabled`가 전달된다. 이름은 `label`이다.
- 완료는 색과 체크 표시로 함께 나타낸다.
- 앱은 터치 화면이라 마우스 올림(hover)이 없다. 웹에서는 포커스 링(2.5px 실선, 바깥 3px)을 직접 그린다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 완료 체크 (비글자) | `white` | `primary` | 3.93:1 통과 | 3.31:1 통과 | 4.60:1 통과 | 1.98:1 미달 | 3:1 |

## 잘한 예와 잘못한 예

- 잘한 예: `label`에 무엇을 완료하는지 쓴다.
- 잘못한 예: `label` 없이 쓰지 않는다. "체크 상자"라고만 읽힌다.

## 함께 보는 컴포넌트

- [ItemRow](https://developers.moring.co/tds/components/item-row.md): 오늘과 할 일 목록의 한 줄이다. 할 일은 앞에 체크 원, 일정은 앞에 시간과 색 막대가 있다.
- [PlanRow](https://developers.moring.co/tds/components/plan-row.md): Mordy가 만든 학습 계획 한 줄이다. 체크 원, 제목, "Mordy" 표지, 푼 문제 진행률(막대)이 있다. 직접 옮긴 계획에는 자물쇠가 붙는다.
- [RadioMark](https://developers.moring.co/tds/components/radio-mark.md): 선택 목록 행의 끝에 놓는 동그란 라디오 표시다. 시트의 선택 목록에서 쓴다.