# DdayChip

시험까지 남은 날을 "D-24"처럼 보여 주는 칩이다. 7일 이내면 빨간색, 그 외는 주색이다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 이 컴포넌트는 Mordy Calendar 앱(`apps/calendar/src/cal`)에만 있다.
- 시험 제목 옆에 D-Day를 알릴 때 쓴다. 제목을 함께 주면 "중간고사 D-24"가 된다.

### 쓰지 않는다
- 시험이 아닌 마감에는 쓰지 않는다.
- 색만으로 임박함을 알리지 않는다. "D-3"이라는 글자가 뜻을 말한다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 여유 (8일 이상) | `primarySoft` 바탕, `primary` 글자. |
| 임박 (7일 이하) | `dangerSoft` 바탕, `danger` 글자. |
| 당일·지남 | 0이면 "D-Day", 음수이면 "D+3". |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 26, 좌우 10 |  |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 여유 | 기본 모습이다. |
| 임박 | 기본 모습이다. |
| 당일 | 기본 모습이다. |

## 사용 방법

### 기본

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

<DdayChip dday={exam.dday} title={exam.title} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `dday` | `number` | — | 필수 | 남은 날 수. 0이면 당일, 음수이면 지난 날. |
| `title` | `string` | — | 선택 | 앞에 붙일 시험 제목. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 모양 | 높이 26, 좌우 10, pill, 글자 `smallStrong` |
| 색 기준 | 7일 이하이면 `danger`, 그 외 `primary` |

## 접근성

- 눌리지 않는 표지다. 글자가 날 수를 읽어 준다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 여유 글자 (13px 굵게) | `primary` | `primarySoft` | 3.45:1 미달 | 4.32:1 미달 | 4.21:1 미달 | 4.68:1 통과 | 4.5:1 |
| 임박 글자 (13px 굵게) | `danger` | `dangerSoft` | 4.09:1 미달 | 5.39:1 통과 | 4.69:1 통과 | 5.43:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 임박하면 빨간 칩, 글자로도 "D-3".
- 잘못한 예: 시험이 아닌 일정에 D-Day 칩을 붙이지 않는다.

## 함께 보는 컴포넌트

- [Chip](https://developers.moring.co/tds/components/chip.md): 짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.
- [ItemRow](https://developers.moring.co/tds/components/item-row.md): 오늘과 할 일 목록의 한 줄이다. 할 일은 앞에 체크 원, 일정은 앞에 시간과 색 막대가 있다.