# ColorRow

과목 팔레트 8색을 동그란 점으로 늘어놓고 하나를 고르는 컴포넌트다. 카테고리와 캘린더의 색을 정할 때 쓴다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 이 컴포넌트는 Mordy Calendar 앱(`apps/calendar/src/cal`)에만 있다.
- 카테고리나 캘린더의 색을 고르게 할 때 쓴다.

### 쓰지 않는다
- 팔레트에 없는 색을 고르게 하지 않는다. 8색(`blue`, `green`, `orange`, `red`, `purple`, `teal`, `yellow`, `gray`)만 쓴다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 점 둘레 고리 36, 점 22 |  |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 선택됨 | 점 둘레에 그 색의 고리가 생긴다. |

## 사용 방법

### 기본

```tsx
import { ColorRow } from '@/cal/sheets';

<ColorRow value={draft.color} onChange={(k) => setDraft({ ...draft, color: k })} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `value` | `string` | — | 필수 | 선택된 색 이름. |
| `onChange` | `(k: ColorKey) => void` | — | 필수 | 색을 눌렀을 때 새 색 이름과 함께 호출된다. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 점 | 색은 과목 팔레트의 `glyph` |
| 고리 | 선택된 점 둘레에 2px 같은 색 |

## 접근성

- 역할은 `radiogroup`, 각 점은 `radio`이고 이름은 색 이름("blue")이다. 한국어 이름이 없어서 화면 읽기 프로그램은 영어로 읽는다.
- 선택은 고리로 나타낸다.

## 잘한 예와 잘못한 예

- 잘한 예: 선택된 색에 고리가 보인다.
- 잘못한 예: 점 색만으로 이름을 알 수 없다. 선택한 이름을 근처에 글자로 쓰면 더 좋다.

## 함께 보는 컴포넌트

- [SubjectMark · CategoryDot · GroupAvatar](https://developers.moring.co/tds/components/calendar-marks.md): 일정 줄과 칩에 붙는 작은 표식 세 가지다. 과목 아이콘(`SubjectMark`), 분류 색 점(`CategoryDot`), 그룹 캘린더의 동그란 그림(`GroupAvatar`).
- [SubjectIcon](https://developers.moring.co/tds/components/subject-icon.md): 과목을 나타내는 둥근 아이콘 타일이다. 과목마다 기호(Σ, Aa, 책, 건물, 잎, 지구, …)와 색이 정해져 있다.