QuickAddHost

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

이 페이지의 목차

미리보기
언제 쓰는가
종류
크기
상태
사용 방법
속성(props)
치수와 토큰
접근성
잘한 예와 잘못한 예
함께 보는 컴포넌트

분류: Calendar 앱
가져오기: import { QuickAddHost } from '@/cal/QuickAdd'
코드 위치: apps/calendar/src/cal/QuickAdd.tsx:35

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

내 시험

빠른 추가 시트(모양만 보여 주는 그림)

언제 쓰는가#

쓴다

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

쓰지 않는다

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

종류#

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

크기#

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

상태#

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

사용 방법#

루트에 두기

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

<QuickAddHost />

열기

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

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

속성(props)#

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

속성이 없다.

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

치수와 토큰#

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

접근성#

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

잘한 예와 잘못한 예#

오후 4:00

잘한 예한 줄로 쓰고 알아듣지 못한 것만 알약으로 채운다.

입력 칸 10개의 빠른 추가

잘못한 예긴 양식을 이 시트에 늘리지 않는다. "자세히"로 전체 화면을 연다.

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