TimeGrid

주·일 보기의 24시간 시간표다. 일정 블록을 길게 눌러 끌면 시간(15분 단위)과 날짜가 바뀌고, 빈 칸을 누르면 그 시각에 추가한다.

이 페이지의 목차

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

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

미리보기#

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

14:00

15:00

16:00

17:00

18:00

19:00

20:00

21:00

영어학원수학 · 함수 취약 개념국어 문학 기출

하루 시간표. 미리보기는 그림만 보여 준다.

언제 쓰는가#

쓴다

이 컴포넌트는 Mordy Calendar 앱(apps/calendar/src/cal)에만 있다.
캘린더 탭의 주 보기와 일 보기에 쓴다. 날짜 목록(days)이 1개면 일 보기, 7개면 주 보기다.
시간이 없는 할 일은 위쪽 띠에 칩으로 놓인다. 끌어서 그 띠에 놓으면 시간 없음으로 바뀐다.

쓰지 않는다

한 달을 보는 데 쓰지 않는다. MonthView를 쓴다.
끌기만으로 옮길 수 있게 두지 않는다. 일정 편집 화면에서도 시간을 바꿀 수 있어야 한다.

종류#

TimeGrid 종류
이름	설명
일 보기	`days`가 1개.
주 보기	`days`가 7개. 옆으로 날짜를 바꿀 수 있다.

크기#

TimeGrid 크기
이름	값	설명
기본	시각 줄 높이 44, 왼쪽 시각 영역 50	끌기 단위 15분. 일정 길이를 모르면 할 일 30분, 일정 60분으로 그린다.

상태#

TimeGrid 상태
상태	모습과 동작
끌기 시작	길게 누르면 중간 세기 진동(`haptic.firm`)과 함께 블록이 떠오르고 `shadow(3)`가 붙는다. 원래 자리는 투명도 0.3.
놓음	새 시각이 `onMove`로 전달된다. 위 띠에 놓으면 `time`이 `null`이다.
빈 칸 누름	`onAdd(날짜, 시각)`이 호출된다.

사용 방법#

기본

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

<TimeGrid days={week} today={today} data={range.data} showPlan={prefs.showPlan}
  onOpen={(e) => openItem(e)}
  onAdd={(day, time) => openQuickAdd({ date: day, time })}
  onMove={(e, day, time) => move(e, day, time)} />

속성(props)#

TimeGrid 속성
이름	타입	기본값	필수	설명
`days`	string[]	—	필수	보여 줄 날짜 목록(`"YYYY-MM-DD"`). 1개(일) 또는 7개(주).
`today`	string	—	필수	오늘 날짜.
`data`	Range \| undefined	—	필수	해당 기간의 항목. 불러오는 중이면 `undefined`.
`showPlan`	boolean	—	필수	Mordy 계획 블록을 보일지.
`onOpen`	(e: { item?: CalItem; plan?: PlanItem }) => void	—	필수	블록이나 칩을 눌렀을 때 호출된다.
`onAdd`	(day: string, time: string) => void	—	필수	빈 칸을 눌렀을 때 날짜와 시각(15분 단위)과 함께 호출된다.
`onMove`	(e: { item?: CalItem; plan?: PlanItem }, day: string, time: string \| null) => void	—	필수	끌어서 놓았을 때 새 날짜와 시각(`null`이면 시간 없음)과 함께 호출된다.

치수와 토큰#

시각 줄: 높이 44, 위쪽 1px line
블록: 모서리 6, 왼쪽 3px 과목 색 테두리, 바탕 과목 색 15%, 글자 11.5/15 SemiBold
끌기: 15분 단위(SNAP), 좌우로는 날짜 이동
시각 영역: 폭 50

접근성#

끌기는 제스처다. 대체 방법으로 블록을 눌러 일정 편집 화면에서 시간을 바꿀 수 있다.
시각 글자는 caption, 블록 글자는 11.5px로 작다. 일정 상세는 눌러서 편집 화면에서 읽는다.

글자 색 대비

글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.

TimeGrid 글자 색 대비
쓰임	글자색	바탕	대비	기준
블록 글자 (11.5px 굵게)	`text`	`surface`	17.15:1 통과15.25:1 통과16.13:1 통과10.92:1 통과	4.5:1 (작은 글자)

잘한 예와 잘못한 예#