# Chip

짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.

- 분류: 입력과 선택
- 가져오기: `import { Chip } from '@/ui/controls'`
- 코드 위치: `apps/mobile/src/ui/controls.tsx:34` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/chip

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 항목의 분류나 상태를 한두 단어로 알릴 때 쓴다. 예: "복습 추천", "D-24".
- 글자만 바꿔 색이 다른 표지가 필요하면 `tone`(글자색)과 `soft`(바탕색)를 함께 지정한다.

### 쓰지 않는다
- 누르는 버튼으로 쓰지 않는다. 눌리지 않는 요소다. 선택 칩이 필요하면 `FilterPill`을 쓴다.
- 문장을 넣지 않는다. 한 줄 안에서 두세 단어까지만 쓴다.
- `tone`과 `soft`를 짝이 맞지 않게 바꾸지 않는다(바탕이 연하면 글자는 진하게).

## 종류

| 이름 | 설명 |
| --- | --- |
| 기본 | `primarySoft` 바탕, `primary` 글자. |
| 색 바꾸기 | `tone`(글자색), `soft`(바탕색)로 지정한다. 예: 오류 `danger`/`dangerSoft`, 성공 `successText`/`successSoft`. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 28, 좌우 12 | 크기를 바꾸는 속성이 없다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 기본 모습이다. |
| 비활성·눌림 | 눌리지 않는 요소라서 누름, 비활성 상태가 없다. |

## 사용 방법

### 기본

```tsx
import { Chip } from '@/ui/controls';

<Chip label="D-24" />
```

### 색 바꾸기

```tsx
<Chip label="3번 읽음" tone={color.successText} soft={color.successSoft} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `label` | `string` | — | 필수 | 표지에 쓰는 글자. |
| `tone` | `string` | `color.primary` | 선택 | 글자색. 기본 `color.primary`. |
| `soft` | `string` | `color.primarySoft` | 선택 | 바탕색. 기본 `color.primarySoft`. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 크기 | 높이 28, 좌우 12, 모서리 pill |
| 글자 | `smallStrong` (13/19, SemiBold) |
| 위치 | `alignSelf: flex-start`. 부모의 폭을 채우지 않고 글자 폭만큼만 차지한다. |

## 접근성

- 눌리지 않는 표지라서 역할을 지정하지 않는다. 글자 자체가 읽힌다.
- 의미를 색으로만 전달하지 않는다. 글자("D-3")가 뜻을 말한다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | 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 |
| 성공 글자 (13px 굵게) | `successText` | `successSoft` | 5.39:1 통과 | 9.55:1 통과 | 10.96:1 통과 | 6.84:1 통과 | 4.5:1 |
| 주의 글자 (13px 굵게) | `amberText` | `amberSoft` | 5.48:1 통과 | 9.81:1 통과 | 6.66:1 통과 | 6.86:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 짧은 글자와 짝이 맞는 색을 쓴다.
- 잘못한 예: 바탕이 연한데 글자도 연하게 지정하면 읽히지 않는다.

## 함께 보는 컴포넌트

- [FilterPill](https://developers.moring.co/tds/components/filter-pill.md): "과목  전체 ▾"처럼 이름과 지금 값을 보여 주고, 누르면 선택 목록을 여는 알약 버튼이다.
- [AiMark](https://developers.moring.co/tds/components/ai-mark.md): 생성형 AI가 만든 결과임을 알리는 표시다. AI가 만든 모든 결과에 붙인다.
- [DdayChip](https://developers.moring.co/tds/components/dday-chip.md): 시험까지 남은 날을 "D-24"처럼 보여 주는 칩이다. 7일 이내면 빨간색, 그 외는 주색이다.