MonthView

한 달을 화면 가득 보여 주는 달력이다. 날마다 칩(시험 먼저, 시간 있는 일정, 나머지)을 줄에 들어가는 만큼 보이고 넘치면 "+n"으로 줄인다.

이 페이지의 목차

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

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

미리보기#

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

월화수목금토일

2026년 10월 (월요일 시작, 눌러서 선택)

언제 쓰는가#

쓴다

이 컴포넌트는 Mordy Calendar 앱(apps/calendar/src/cal)에만 있다.
캘린더 탭의 월 보기에 쓴다. 날짜를 누르면 선택, 길게 누르면 onLongPress(그날에 추가).
좌우로 밀어 앞뒤 달로 이동한다(onSwipe).

쓰지 않는다

한 주를 시간표처럼 볼 때는 쓰지 않는다. TimeGrid를 쓴다.
날짜를 고르기만 하는 입력에는 쓰지 않는다. Calendar를 쓴다.

종류#

MonthView 종류
이름	설명
그날의 사진	날짜에 개인 사진이 있으면 칸 뒤에 38% 투명도로 깔린다(글자가 읽히도록).
계획 보기	`showPlan`이 켜지면 Mordy 계획 칩도 보인다.

크기#

MonthView 크기
이름	값	설명
기본	칩 높이 15, 글자 9.5	줄 높이에서 번호 줄(약 30)을 뺀 만큼 17씩 칩을 놓는다. 넘치면 마지막 자리는 "+n".

상태#

MonthView 상태
상태	모습과 동작
오늘	날짜 숫자가 `primaryStrong` 원.
선택	칸 배경 `selected`.
칩	과목 색 18% 바탕, 글자 `text`. 시험은 채운 칩(`solid`), 완료는 흐리게.

사용 방법#

기본

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

<MonthView month={month} selected={day} today={today} data={range.data} onSelect={setDay} onLongPress={(d) => openQuickAdd({ date: d })} onSwipe={(n) => setMonth(addMonths(month, n))} startsOn={prefs.weekStartsOn} showPlan={prefs.showPlan} />

속성(props)#

MonthView 속성
이름	타입	기본값	필수	설명
`month`	string	—	필수	보여 줄 달(`"YYYY-MM"` 또는 그 달의 날짜).
`selected`	string	—	필수	선택된 날짜.
`today`	string	—	필수	오늘 날짜.
`data`	Range \| undefined	—	필수	이 달의 항목(일정, 계획, 시험, 사진). 아직 불러오는 중이면 `undefined`.
`onSelect`	(d: string) => void	—	필수	날짜를 눌렀을 때 호출된다.
`onLongPress`	(d: string) => void	—	필수	날짜를 길게 눌렀을 때 호출된다.
`onSwipe`	(n: number) => void	—	필수	좌우로 밀었을 때 `1` 또는 `-1`과 함께 호출된다.
`startsOn`	0 \| 1	—	필수	주의 첫 요일. 0(일) 또는 1(월).
`showPlan`	boolean	—	필수	Mordy 계획 칩을 보일지.

치수와 토큰#

바탕: surface, 모서리 22, 좌우 4, 위 10, 아래 6
주 줄: 위쪽 1px line, 칸 모서리 10
날짜 숫자: 24 원(오늘은 primaryStrong 채움)
칩: 모서리 4, 좌우 3, 높이 15, 글자 9.5/13 SemiBold

접근성#

각 날짜는 눌리는 요소다. 칩 글자가 매우 작으므로(9.5) 선택한 날의 상세 목록을 화면 아래에 글자로 따로 보여 준다.
시험은 채운 칩과 글자로 함께 알린다.

글자 색 대비

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

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

잘한 예와 잘못한 예#