DayStrip

한 주 7일을 한 줄로 보여 주고 날짜를 골라 이동하는 주간 줄이다. 좌우로 밀면 앞뒤 주로 이동한다. 일정이 있는 날에는 점이 찍힌다.

이 페이지의 목차

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

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

미리보기#

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

눌러서 날짜 고르기 (10일은 시험일 점)

언제 쓰는가#

쓴다

이 컴포넌트는 Mordy Calendar 앱(apps/calendar/src/cal)에만 있다.
오늘 화면 맨 위에서 날짜를 고를 때 쓴다.
일정이 있는 날은 marks에 "item", 시험일은 "exam"으로 알린다.

쓰지 않는다

눌러서 고르지 않는 단순 표시에는 쓰지 않는다. WeekStrip을 쓴다.
한 달 전체를 한눈에 봐야 할 때 쓰지 않는다. MonthView를 쓴다.

종류#

DayStrip 종류
이름	설명
시작 요일	`startsOn`: 1(월요일, 기본) 또는 0(일요일).

크기#

DayStrip 크기
이름	값	설명
기본	날짜 원 36, 점 5	7칸이 폭을 똑같이 나눈다. 위아래 안쪽 여백 4, 칸 모서리 16.

상태#

DayStrip 상태
상태	모습과 동작
선택	`primaryStrong`으로 채워진 원과 흰 글자. 요일 글자는 `primary` Bold.
오늘 (선택 아님)	1.5px `primaryLine` 테두리 원, 숫자 `primary`.
점	일정 있음: 선택되면 `primary`, 아니면 `textTertiary`. 시험일: `danger`.
밀기	왼쪽으로 50 넘게 밀면 다음 주, 오른쪽이면 이전 주(선택 날짜가 7일 이동).

사용 방법#

기본

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

<DayStrip selected={day} today={today} onSelect={setDay} marks={marks} startsOn={prefs.weekStartsOn} />

속성(props)#

DayStrip 속성
이름	타입	기본값	필수	설명
`selected`	string	—	필수	선택된 날짜(`"YYYY-MM-DD"`).
`today`	string	—	필수	오늘 날짜.
`onSelect`	(day: string) => void	—	필수	날짜를 눌렀거나 주를 밀었을 때 새 날짜와 함께 호출된다.
`marks`	Record<string, 'item' \| 'exam'>	—	선택	날짜별 점 종류. `{ "2026-10-09": "item" \| "exam" }`.
`startsOn`	0 \| 1	`1`	선택	주의 첫 요일. 1(월, 기본) 또는 0(일).

치수와 토큰#

날짜 원: 36 × 36, 선택은 primaryStrong 채움(투명도만 바뀌어 모서리가 유지된다)
글자: 요일 small, 날짜 bodyStrong
점: 5px 원, 날짜 아래 6

접근성#

줄은 tablist, 각 날짜는 tab이고 이름은 "10월 9일 목요일, 오늘"이다. 선택 상태가 전달된다.
점의 의미(일정, 시험)는 색만으로 구분되므로 선택한 날짜의 목록에서 글자로도 알려 준다.

글자 색 대비

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

DayStrip 글자 색 대비
쓰임	글자색	바탕	대비	기준
선택된 날짜	`onPrimaryStrong`	`primaryStrong`	4.43:1 미달3.71:1 미달4.60:1 통과5.48:1 통과	4.5:1 (작은 글자)

잘한 예와 잘못한 예#

잘한 예선택한 날의 일정 목록을 줄 아래에 글자로 함께 보여 준다.

점만 있는 시험 표시

잘못한 예점만으로 시험일을 알리지 않는다. 시험일은 목록에 "D-3 중간고사"로도 보여 준다.

WeekStrip: 월요일부터 일요일까지 7일을 한 줄로 보여 주는 주간 표시다. 공부한 날에는 점이 찍힌다.
MonthView: 한 달을 화면 가득 보여 주는 달력이다. 날마다 칩(시험 먼저, 시간 있는 일정, 나머지)을 줄에 들어가는 만큼 보이고 넘치면 "+n"으로 줄인다.
TabBar (Calendar): Mordy Calendar 앱의 탭 줄이다. 오늘 · 캘린더 · (+) · 할 일 · 더보기. Mordy 앱의 TabBar와 같은 모양이고 가운데 +는 빠른 추가를 연다.