ExamForm

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

이 페이지의 목차

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

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

미리보기#

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

10월 20일 외 1일

수학Aa영어과학

과목 칩과 날짜 알약(모양만 보여 주는 그림)

언제 쓰는가#

쓴다

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

쓰지 않는다

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

종류#

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

크기#

ExamForm 크기
이름	값	설명
기본	내용에 맞는 높이

상태#

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

사용 방법#

기본

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

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

속성(props)#

ExamForm 속성
이름	타입	기본값	필수	설명
`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 상태가 전달된다.

잘한 예와 잘못한 예#

10월 20일 외 1일

잘한 예여러 날 시험이면 날짜마다 과목을 따로 고르게 한다.

과목이 없는 시험

잘못한 예과목 없이 저장하게 두지 않는다.

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