# QuickAddHost

할 일, 일정, 시험을 한 줄로 빠르게 추가하는 시트다. 한 줄에 "내일 4시 영어학원"처럼 쓰면 날짜와 시간을 알아듣고, 못 알아들은 것은 알약 선택으로 채운다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 이 컴포넌트는 Mordy Calendar 앱(`apps/calendar/src/cal`)에만 있다.
- 앱 루트에 `QuickAddHost`를 한 번 두고, 어디서든 `openQuickAdd(seed)`로 연다.
- 날짜와 시각을 미리 채워 열려면 `seed`에 넘긴다(예: 달력에서 길게 누른 날).

### 쓰지 않는다
- 긴 양식에는 쓰지 않는다. 마지막 알약 "자세히"를 누르거나 시트를 위로 끌면 전체 편집 화면이 열리고 입력은 그대로 이어진다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 할 일 · 일정 · 시험 | 위쪽의 작은 `PillTabs`로 고른다. 글을 쓰면 알아듣고 자동으로 정한다(직접 고르면 고정). |
| 알약 | 날짜, 시간, 과목, 카테고리, 알림, 캘린더, 자세히. 한 줄에서 말하지 않은 것만 남는다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | `Sheet` | 입력 글자는 최대 80자. 아래 "추가" 버튼 높이 48. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 열림 | `openQuickAdd(seed)`로 연다. 입력 칸에 바로 초점이 간다. |
| 저장 중 | "추가" 버튼이 `busy`가 된다. |
| 추가 불가 | 제목이 없으면 "추가"가 `disabled`다. |

## 사용 방법

### 루트에 두기

```tsx
import { QuickAddHost } from '@/cal/QuickAdd';

<QuickAddHost />
```

### 열기

```tsx
import { openQuickAdd } from '@/cal/QuickAdd';

openQuickAdd();                                   // 빈 상태로
openQuickAdd({ kind: 'event', date: '2026-10-10', time: '16:00' });
```

### 속성(props)

| 함수 | 형태 | 설명 |
| --- | --- | --- |
| `openQuickAdd` | `—` | 빠른 추가 시트를 연다. `seed`: `{ kind?: "task" \| "event" \| "exam", date?, time?, calendarId?, subjectId? }`. |

속성이 없다.

`QuickAddHost`는 속성이 없다. 앱 루트에 한 번 두고 `openQuickAdd`로 연다. 한국어 날짜와 시간 해석은 `lib/cal/parse.ts`가 한다.

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 구성 | `Sheet` + 작은 `PillTabs` + 한 줄 입력 + 알약들 + `PrimaryButton`(추가, 높이 48) |
| 입력 | 최대 80자, 안내 문구는 종류별로 다르다(예: "예: 내일 4시 영어학원") |

## 접근성

- `Sheet`의 접근성을 따른다. 입력 칸과 알약에는 이름(글자)이 있다.
- 날짜와 시간을 알아들었는지는 알약의 글자가 바뀌어 알린다.

## 잘한 예와 잘못한 예

- 잘한 예: 한 줄로 쓰고 알아듣지 못한 것만 알약으로 채운다.
- 잘못한 예: 긴 양식을 이 시트에 늘리지 않는다. "자세히"로 전체 화면을 연다.

## 함께 보는 컴포넌트

- [Sheet](https://developers.moring.co/tds/components/sheet.md): 화면 아래에서 올라오는 시트다. 위쪽 두 모서리가 둥글고, 손잡이와 제목 줄, 닫기 버튼이 있다.
- [TabBar (Calendar)](https://developers.moring.co/tds/components/calendar-tab-bar.md): Mordy Calendar 앱의 탭 줄이다. 오늘 · 캘린더 · (+) · 할 일 · 더보기. Mordy 앱의 `TabBar`와 같은 모양이고 가운데 +는 빠른 추가를 연다.
- [DateSheetHost · PlanSheetHost · MissedSheet · CategorySheetHost](https://developers.moring.co/tds/components/calendar-sheets.md): Calendar 앱의 시트 네 가지다. 날짜 고르기, Mordy 계획 항목 메뉴, 어제 못한 계획 정리, 카테고리 고르기. 앞의 둘과 마지막은 앱 루트에 한 번 두고 함수 호출로 연다.
- [ExamForm](https://developers.moring.co/tds/components/exam-form.md): 시험을 만드는 양식이다. 시험 날짜(여러 날 가능), 과목 칩, 과목별 시험 범위를 고른다. 빠른 추가 시트와 전체 편집 화면이 같은 양식을 쓴다.