# SubjectIcon

과목을 나타내는 둥근 아이콘 타일이다. 과목마다 기호(Σ, Aa, 책, 건물, 잎, 지구, …)와 색이 정해져 있다.

- 분류: 데이터 표시
- 가져오기: `import { SubjectIcon, SubjectGlyph } from '@/ui/SubjectIcon'`
- 코드 위치: `apps/mobile/src/ui/SubjectIcon.tsx:28` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/subject-icon

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 과목 목록, 과목 선택, 복습 행의 앞에 과목을 나타낼 때 쓴다.
- 메인 보드처럼 눈에 띄어야 하면 `filled`, 온보딩이나 복습 행처럼 가벼워야 하면 `soft`.
- 사용자가 과목에 사진을 지정했으면 `image`에 넘긴다.

### 쓰지 않는다
- 과목이 아닌 분류에 쓰지 않는다.
- 과목 이름 없이 색만으로 구분하지 않는다. 이름을 옆에 글자로 쓴다.
- 타일 모양을 바꾸지 않는다. 모서리는 크기에 비례해 정해진다.

## 종류

| 이름 | 설명 |
| --- | --- |
| filled (기본) | 채운 그라데이션 타일(`fill` 시작 → 끝, 왼쪽 위 → 오른쪽 아래), 흰 기호. |
| soft | 옅은 면(`soft`) 위에 색 기호(`glyph`). |
| image | `image`가 있으면 사진을 같은 둥근 타일로 보여 준다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 48 | `size`로 바꾼다. 모서리는 크기의 28%, 기호는 크기의 48%. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| filled | 기본 모습이다. |
| soft | 기본 모습이다. |

## 사용 방법

### 기본

```tsx
import { SubjectIcon } from '@/ui/SubjectIcon';

<SubjectIcon icon="math" colorKey="blue" />
<SubjectIcon icon="english" colorKey="green" variant="soft" size={40} />
```

### 속성(props)

#### SubjectIcon

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `icon` | `SubjectKey \| string` | — | 필수 | 기호 종류. `"math"`, `"english"`, `"korean"`, `"history"`, `"science"`, `"social"`, `"other"` 중 하나(다른 문자열은 `other`의 점 셋). |
| `colorKey` | `ColorKey \| string` | — | 필수 | 과목 팔레트의 색 이름. `"blue"`, `"green"`, `"orange"`, `"red"`, `"purple"`, `"teal"`, `"yellow"`, `"gray"`. |
| `size` | `number` | `48` | 선택 | 한 변의 길이(px). 기본 48. |
| `variant` | `'filled' \| 'soft'` | `'filled'` | 선택 | `"filled"`(기본) 또는 `"soft"`. |
| `image` | `string \| null` | — | 선택 | 과목 사진(작은 데이터 주소). 있으면 사진을 타일에 보여 준다. |

#### SubjectGlyph

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `icon` | `SubjectKey \| string` | — | 필수 | 기호 종류. |
| `size` | `number` | — | 필수 | 기호 크기(px). |
| `tint` | `string` | — | 필수 | 기호 색. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 타일 | 크기 × 크기, 모서리 = 크기 × 0.28 |
| 기호 | 크기 × 0.48, 선 2. 영어는 아이콘이 아니라 글자 "Aa"(Bold, 크기 × 0.82) |
| 색 | 과목 팔레트: `filled`는 `fill` 그라데이션 + 흰 기호, `soft`는 `soft` 면 + `glyph` 기호 |
| 기본 과목 색 | 수학 blue, 영어 green, 국어 gray, 한국사 red, 과학 teal, 사회 orange, 기타 gray |

## 접근성

- 타일은 장식이다. 과목 이름을 옆에 글자로 함께 보여 준다.
- 과목 색은 구분을 돕는 보조 표시일 뿐이다.

## 잘한 예와 잘못한 예

- 잘한 예: 과목 이름을 옆에 글자로 쓴다.
- 잘못한 예: 이름 없이 타일만 쓰면 색을 구분하지 못하는 사용자가 알 수 없다.

## 함께 보는 컴포넌트

- [WellRow](https://developers.moring.co/tds/components/well-row.md): 패널 안의 목록 한 줄이다. 옅은 홈(`well`)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.
- [Chip](https://developers.moring.co/tds/components/chip.md): 짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.