# SubjectMark · CategoryDot · GroupAvatar

일정 줄과 칩에 붙는 작은 표식 세 가지다. 과목 아이콘(`SubjectMark`), 분류 색 점(`CategoryDot`), 그룹 캘린더의 동그란 그림(`GroupAvatar`).

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 이 컴포넌트는 Mordy Calendar 앱(`apps/calendar/src/cal`)에만 있다.
- `SubjectMark`: 과목 칩과 행에 과목 아이콘(사진이 있으면 사진)을 작게 보인다.
- `CategoryDot`: 카테고리의 색을 점으로 보인다.
- `GroupAvatar`: 그룹 캘린더의 그림을, 없으면 주제 이모지나 이름 첫 글자를 보인다.

### 쓰지 않는다
- 표식만으로 과목이나 그룹을 구분하지 않는다. 이름을 글자로 함께 쓴다.
- 큰 크기로 쓰지 않는다. 행과 칩 안의 작은 표식이다.

## 종류

| 이름 | 설명 |
| --- | --- |
| SubjectMark | `SubjectIcon`을 작게 쓴다. 기본 18. |
| CategoryDot | 색 점. 기본 10. |
| GroupAvatar | 원. 기본 24. 사진, 이모지, 첫 글자 순서로 보인다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| SubjectMark | 18 |  |
| CategoryDot | 10 |  |
| GroupAvatar | 24 |  |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 그림 없는 그룹 | `primarySoft` 원에 `primary` 이모지나 첫 글자. |

## 사용 방법

### 기본

```tsx
import { CategoryDot, GroupAvatar, SubjectMark } from '@/cal/ui';

<SubjectMark subject={subject} />
<CategoryDot category={category} />
<GroupAvatar cal={calendar} size={28} />
```

### 속성(props)

#### SubjectMark

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `subject` | `Subject` | — | 필수 | 과목(아이콘, 색, 사진을 가진 객체). |
| `size` | `number` | `18` | 선택 | 크기(px). 기본 18. |

#### CategoryDot

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `category` | `Pick<CategoryInfo, 'color'>` | — | 필수 | 카테고리(`color`를 가진 객체). |
| `size` | `number` | `10` | 선택 | 지름(px). 기본 10. |

#### GroupAvatar

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `cal` | `Pick<CalendarInfo, 'name' \| 'groupIconPath' \| 'groupEmoji'>` | — | 필수 | 그룹 캘린더(`name`, `groupIconPath`, `groupEmoji`). |
| `size` | `number` | `24` | 선택 | 지름(px). 기본 24. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| GroupAvatar 글자 | 이모지는 지름 × 0.55, 첫 글자는 × 0.45, Bold, `primary` |
| CategoryDot 색 | 과목 팔레트의 `glyph` 색 |

## 접근성

- 표식은 장식이다. `GroupAvatar`의 사진에는 캘린더 이름이 접근성 이름으로 붙는다. 이름 글자를 함께 쓴다.

## 잘한 예와 잘못한 예

- 잘한 예: 이름을 옆에 글자로 쓴다.
- 잘못한 예: 점 색만으로 카테고리를 구분하지 않는다.

## 함께 보는 컴포넌트

- [SubjectIcon](https://developers.moring.co/tds/components/subject-icon.md): 과목을 나타내는 둥근 아이콘 타일이다. 과목마다 기호(Σ, Aa, 책, 건물, 잎, 지구, …)와 색이 정해져 있다.
- [Avatar](https://developers.moring.co/tds/components/avatar.md): 사용자의 사진, 또는 닉네임 첫 글자를 브랜드 그라데이션 원 위에 보여 준다. `NameLine`은 닉네임, 공식 배지, @아이디를 한 줄로 놓는다.
- [ColorRow](https://developers.moring.co/tds/components/color-row.md): 과목 팔레트 8색을 동그란 점으로 늘어놓고 하나를 고르는 컴포넌트다. 카테고리와 캘린더의 색을 정할 때 쓴다.