# MordyTag

"Mordy"라고 적힌 작은 표지다. Mordy가 만든 계획 항목임을 알린다. 이 계획은 실제 학습 기록으로 계산한 규칙 기반이라 AI라고 부르지 않는다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 이 컴포넌트는 Mordy Calendar 앱(`apps/calendar/src/cal`)에만 있다.
- Mordy 계획 항목의 제목 옆에 붙인다(`PlanRow`가 자동으로 쓴다).

### 쓰지 않는다
- 사용자가 직접 만든 항목에 붙이지 않는다.
- "AI"로 바꾸지 않는다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 기본 | 높이 19, 글자 11. |
| small | 높이 17, 글자 10, 좌우 5. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 19 | `small`은 17. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | `primarySoft` 바탕, `primary` Bold 글자, 모서리 6. |

## 사용 방법

### 기본

```tsx
import { MordyTag } from '@/cal/ui';

<MordyTag small />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `small` | `boolean` | — | 선택 | `true`이면 더 작게(높이 17, 글자 10). |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 모양 | 높이 19, 모서리 6, 좌우 6, `primarySoft` |
| 글자 | `caption` 계열 Bold, 11, `primary` |

## 접근성

- 눌리지 않는 표지다. "Mordy"라고 읽힌다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 글자 (11px 굵게) | `primary` | `primarySoft` | 3.45:1 미달 | 4.32:1 미달 | 4.21:1 미달 | 4.68:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: Mordy가 만든 계획에만 붙인다.
- 잘못한 예: 사용자가 직접 만든 할 일에 붙이지 않는다.

## 함께 보는 컴포넌트

- [PlanRow](https://developers.moring.co/tds/components/plan-row.md): Mordy가 만든 학습 계획 한 줄이다. 체크 원, 제목, "Mordy" 표지, 푼 문제 진행률(막대)이 있다. 직접 옮긴 계획에는 자물쇠가 붙는다.
- [Chip](https://developers.moring.co/tds/components/chip.md): 짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.