WeekStrip
월요일부터 일요일까지 7일을 한 줄로 보여 주는 주간 표시다. 공부한 날에는 점이 찍힌다.
- 분류
- 탐색
- 가져오기
import { WeekStrip } from '@/ui/controls'- 코드 위치
apps/mobile/src/ui/controls.tsx:108
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
월5
화6
수7
목8
금9
토10
일11
언제 쓰는가#
쓴다
- 홈에서 이번 주 공부 기록을 가볍게 보여 줄 때 쓴다.
쓰지 않는다
- 날짜를 골라야 할 때 쓰지 않는다. 눌리지 않는다. 날짜를 고르게 하려면 Calendar 앱의
DayStrip이나Calendar를 쓴다. - 일정이 있는 날을 표시하는 데 쓰지 않는다.
studied(공부함)만 나타낸다.
종류#
종류가 없다.
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 요일 칸 폭 38, 날짜 원 34 | 7칸이 좌우로 고르게 벌어진다(space-between). |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 오늘 | 요일 글자가 primary Bold, 날짜 원이 primaryStrong으로 채워지고 흰 글자. |
| 공부한 날 | 날짜 아래에 4px primary 점. 오늘은 점 대신 채운 원으로 나타낸다. |
| 그 외 | 요일 textSecondary, 날짜 text. |
사용 방법#
기본
기본
import { WeekStrip } from '@/ui/controls';
<WeekStrip days={week.map((d) => ({ date: d.date, isToday: d.date === today, studied: d.seconds > 0 }))} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
days | { date: string; isToday: boolean; studied: boolean }[] | — | 필수 | 7일의 목록(월~일). 각 항목은 { date: "YYYY-MM-DD", isToday, studied }. |
치수와 토큰#
- 요일 칸
- 폭 38, 요일 글자
small, 요일과 날짜 사이 6 - 날짜 원
- 34 × 34, 글자
bodyStrong - 점
- 4px 원, 날짜 원 아래(-2 겹침)
접근성#
- 각 칸에 "월요일 5일, 공부함, 오늘"처럼 날짜와 상태를 모두 담은 이름이 붙는다.
- 공부함은 점으로, 오늘은 채운 원으로 나타낸다. 색만으로 구분하지 않는다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 오늘 날짜 | onPrimaryStrong | primaryStrong | 4.43:1 미달3.71:1 미달4.60:1 통과5.48:1 통과 | 4.5:1 (작은 글자) |
| 요일 글자 (13px) | textSecondary | bg | 4.13:1 미달7.65:1 통과4.69:1 통과7.96:1 통과 | 4.5:1 (작은 글자) |
잘한 예와 잘못한 예#
월5
화6
수7
목8
금9
토10
일11
월5
화6
수7
함께 보는 컴포넌트#
- DayStrip: 한 주 7일을 한 줄로 보여 주고 날짜를 골라 이동하는 주간 줄이다. 좌우로 밀면 앞뒤 주로 이동한다. 일정이 있는 날에는 점이 찍힌다.
- Calendar: 한 달 달력에서 여러 날짜를 고르는 컴포넌트다. 시험 날짜를 고를 때 쓴다.
- CalendarHeat: 한 달 달력에서 날마다 공부한 시간을 색의 진하기(5단계)로 보여 주는 차트다.