# ExamForm

시험을 만드는 양식이다. 시험 날짜(여러 날 가능), 과목 칩, 과목별 시험 범위를 고른다. 빠른 추가 시트와 전체 편집 화면이 같은 양식을 쓴다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 이 컴포넌트는 Mordy Calendar 앱(`apps/calendar/src/cal`)에만 있다.
- 시험을 추가하거나 고칠 때 쓴다. 시트 안에서는 기본 모양, 전체 화면에서는 `full`.
- 여러 날 시험이면 날짜마다 과목을 따로 고를 수 있다(`detailed`).

### 쓰지 않는다
- 시험이 아닌 일정에 쓰지 않는다.
- 과목을 하나도 고르지 않은 채 저장하지 않는다. `examPayload`가 `null`을 돌려주고 저장할 수 없다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 시트 모양 | 날짜 알약, 과목 칩, 마지막에 "자세히"(`trailing`). |
| `full` | 전체 화면. 새 날짜는 시트에서 고른 과목으로 시작하고 날짜별로 바꿀 수 있다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 내용에 맞는 높이 |  |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 과목 선택 | 과목 칩(아이콘 + 이름)이 체크 상자 역할이다. 선택하면 `primary` 계열로 바뀐다. |
| 범위 선택 | 과목을 누르면 그 과목의 시험 범위(단원, 개념)를 고르는 시트가 열린다. |

## 사용 방법

### 기본

```tsx
import { ExamForm } from '@/cal/ExamForm';

<ExamForm draft={draft} onChange={setDraft} subjects={subjects} today={today} full />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `draft` | `ExamDraft` | — | 필수 | 양식의 값(날짜, 과목, 과목별 범위). |
| `onChange` | `(d: ExamDraft) => void` | — | 필수 | 값이 바뀔 때 새 값과 함께 호출된다. |
| `subjects` | `Subject[]` | — | 필수 | 고를 수 있는 과목 목록. |
| `today` | `string` | — | 필수 | 오늘 날짜. |
| `full` | `boolean` | — | 선택 | `true`이면 전체 화면 양식이다. |
| `trailing` | `ReactNode` | — | 선택 | 마지막 알약 줄 끝에 놓을 요소(시트의 "자세히"). |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 날짜 알약 | 한 날이면 "10월 20일", 여러 날이면 "10월 20일 외 n일", 없으면 "시험 날짜" |
| 과목 칩 | `SubjectMark` 18 + `smallStrong` 이름, 역할 `checkbox` |

## 접근성

- 과목 칩은 `checkbox`이고 `checked` 상태가 전달된다.

## 잘한 예와 잘못한 예

- 잘한 예: 여러 날 시험이면 날짜마다 과목을 따로 고르게 한다.
- 잘못한 예: 과목 없이 저장하게 두지 않는다.

## 함께 보는 컴포넌트

- [QuickAddHost](https://developers.moring.co/tds/components/quick-add.md): 할 일, 일정, 시험을 한 줄로 빠르게 추가하는 시트다. 한 줄에 "내일 4시 영어학원"처럼 쓰면 날짜와 시간을 알아듣고, 못 알아들은 것은 알약 선택으로 채운다.
- [DateSheetHost · PlanSheetHost · MissedSheet · CategorySheetHost](https://developers.moring.co/tds/components/calendar-sheets.md): Calendar 앱의 시트 네 가지다. 날짜 고르기, Mordy 계획 항목 메뉴, 어제 못한 계획 정리, 카테고리 고르기. 앞의 둘과 마지막은 앱 루트에 한 번 두고 함수 호출로 연다.
- [Chip](https://developers.moring.co/tds/components/chip.md): 짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.