본문으로 건너뛰기
TDSMoring 디자인 시스템

DateSheetHost · PlanSheetHost · MissedSheet · CategorySheetHost

Calendar 앱의 시트 네 가지다. 날짜 고르기, Mordy 계획 항목 메뉴, 어제 못한 계획 정리, 카테고리 고르기. 앞의 둘과 마지막은 앱 루트에 한 번 두고 함수 호출로 연다.

이 페이지의 목차
분류
Calendar 앱
가져오기
import { DateSheetHost, PlanSheetHost, MissedSheet, CategorySheetHost } from '@/cal/sheets'
코드 위치
apps/calendar/src/cal/sheets.tsx:41

미리보기#

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

내 시험
카테고리 고르기 시트(모양만 보여 주는 그림)

언제 쓰는가#

쓴다

  • 이 컴포넌트는 Mordy Calendar 앱(apps/calendar/src/cal)에만 있다.
  • 날짜 고르기: await pickDate({ title, value, today }) 또는 여러 날(pickDates)을 부른다. 날짜, 날짜 없음(null), 닫음(undefined)을 돌려준다.
  • 계획 항목 메뉴: openPlan(plan, today). "Mordy에서 풀기", "오늘로 옮기기", "다른 날로 옮기기" 등을 보인다.
  • 어제 못한 계획: MissedSheet. 자동으로 옮기지 않고 항목마다 사용자가 정한다.
  • 카테고리 고르기: await pickCategory(value). 새 카테고리도 만들 수 있다.

쓰지 않는다

  • 사용자 몰래 계획을 옮기지 않는다. 어제 못한 계획은 항상 사용자가 정한다.
  • 시트 위에 시트를 겹치지 않는다. 앞 시트가 닫힌 뒤 다음 시트를 연다.

종류#

DateSheetHost · PlanSheetHost · MissedSheet · CategorySheetHost 종류
이름설명
DateSheetHostCalendar로 날짜를 고르고 "n일로 정하기" 버튼. 여러 날 시험이면 날짜를 모두 눌러 "n일 선택"(최대 14일).
PlanSheetHostSheet와 행동 목록. Mordy 앱이 없으면 설치 안내를 한다.
MissedSheet어제 못한 계획 목록과 항목별 선택.
CategorySheetHost카테고리 목록(없음, 내 카테고리, 시험으로 묶기)과 "새 카테고리"(이름 + ColorRow + 만들기).

크기#

DateSheetHost · PlanSheetHost · MissedSheet · CategorySheetHost 크기
이름값설명
기본`Sheet`카테고리 목록은 최대 높이 440.

상태#

DateSheetHost · PlanSheetHost · MissedSheet · CategorySheetHost 상태
상태모습과 동작
키보드 입력 중새 카테고리를 만들 때는 시트가 짧아지도록 양식만 보인다.

사용 방법#

앱 루트에 두기

앱 루트에 두기
import { CategorySheetHost, DateSheetHost, PlanSheetHost } from '@/cal/sheets';

<DateSheetHost />
<PlanSheetHost />
<CategorySheetHost />

날짜 고르기

날짜 고르기
import { pickDate } from '@/cal/sheets';

const date = await pickDate({ title: '마감일', value: item.date, today, allowNone: true });
if (date === undefined) return; // 닫음
save({ date });

어제 못한 계획

어제 못한 계획
<MissedSheet visible={open} items={missedPlan} today={today} onClose={() => setOpen(false)} />

속성(props)#

DateSheetHost · PlanSheetHost · MissedSheet · CategorySheetHost 함수 목록
함수형태설명
pickDate—날짜 하나를 고른다. 날짜 문자열, 날짜 없음이면 null, 닫으면 undefined.
pickDates—여러 날(시험일)을 고른다. 정렬된 날짜 목록, 닫으면 undefined.
openPlan—Mordy 계획 항목 메뉴를 연다.
pickCategory—카테고리를 고른다. 카테고리 id, 없음이면 null, 닫으면 undefined.
openInMordy—Mordy 앱에서 풀이를 시작한다. 앱이 없으면 스토어를 안내한다.

DateSheetHost

속성이 없다.

PlanSheetHost

속성이 없다.

MissedSheet

MissedSheet 속성
이름타입기본값필수설명
visibleboolean—필수열려 있는지.
itemsPlanItem[]—필수어제 못한 계획 항목 목록.
todaystring—필수오늘 날짜.
onClose() => void—필수닫을 때 호출된다.

CategorySheetHost

속성이 없다.

DateSheetHost, PlanSheetHost, CategorySheetHost는 속성이 없다. 앱 루트에 한 번씩 두고 위 함수로 연다.

치수와 토큰#

공통
모두 Sheet(제목 줄, ✕, 끌어서 닫기)
날짜 버튼
PrimaryButton(화살표 없음). 고르기 전에는 disabled와 "날짜를 골라 주세요"

접근성#

  • Sheet의 접근성을 그대로 따른다.
  • 카테고리 행은 radio이고 선택 상태가 전달된다.

잘한 예와 잘못한 예#

날짜를 골라 주세요
잘한 예선택 전에는 버튼에 "날짜를 골라 주세요"처럼 이유를 글자로 쓴다.
자동으로 옮겨진 계획
잘못한 예어제 못한 계획을 사용자 몰래 오늘로 옮기지 않는다.
  • Sheet: 화면 아래에서 올라오는 시트다. 위쪽 두 모서리가 둥글고, 손잡이와 제목 줄, 닫기 버튼이 있다.
  • Calendar: 한 달 달력에서 여러 날짜를 고르는 컴포넌트다. 시험 날짜를 고를 때 쓴다.
  • ColorRow: 과목 팔레트 8색을 동그란 점으로 늘어놓고 하나를 고르는 컴포넌트다. 카테고리와 캘린더의 색을 정할 때 쓴다.
  • PlanRow: Mordy가 만든 학습 계획 한 줄이다. 체크 원, 제목, "Mordy" 표지, 푼 문제 진행률(막대)이 있다. 직접 옮긴 계획에는 자물쇠가 붙는다.