# WeekStrip

월요일부터 일요일까지 7일을 한 줄로 보여 주는 주간 표시다. 공부한 날에는 점이 찍힌다.

- 분류: 탐색
- 가져오기: `import { WeekStrip } from '@/ui/controls'`
- 코드 위치: `apps/mobile/src/ui/controls.tsx:108` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/week-strip

## 미리보기

실제 컴포넌트를 그린 화면은 https://developers.moring.co/tds/components/week-strip 에서 볼 수 있다. 서비스 색 선택기로 Mordy, Morit 색을 바꿔 볼 수 있다.

## 언제 쓰는가

### 쓴다
- 홈에서 이번 주 공부 기록을 가볍게 보여 줄 때 쓴다.

### 쓰지 않는다
- 날짜를 골라야 할 때 쓰지 않는다. 눌리지 않는다. 날짜를 고르게 하려면 Calendar 앱의 `DayStrip`이나 `Calendar`를 쓴다.
- 일정이 있는 날을 표시하는 데 쓰지 않는다. `studied`(공부함)만 나타낸다.

## 종류

종류가 없다.

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 요일 칸 폭 38, 날짜 원 34 | 7칸이 좌우로 고르게 벌어진다(`space-between`). |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 오늘 | 요일 글자가 `primary` Bold, 날짜 원이 `primaryStrong`으로 채워지고 흰 글자. |
| 공부한 날 | 날짜 아래에 4px `primary` 점. 오늘은 점 대신 채운 원으로 나타낸다. |
| 그 외 | 요일 `textSecondary`, 날짜 `text`. |

## 사용 방법

### 기본

```tsx
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일, 공부함, 오늘"처럼 날짜와 상태를 모두 담은 이름이 붙는다.
- 공부함은 점으로, 오늘은 채운 원으로 나타낸다. 색만으로 구분하지 않는다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 오늘 날짜 | `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 |

## 잘한 예와 잘못한 예

- 잘한 예: 7일을 한 줄에 보여 주고 공부한 날은 점으로 알린다.
- 잘못한 예: 눌러서 날짜를 고르는 용도로 쓰지 않는다. 눌러도 아무 일도 없다.

## 함께 보는 컴포넌트

- [DayStrip](https://developers.moring.co/tds/components/day-strip.md): 한 주 7일을 한 줄로 보여 주고 날짜를 골라 이동하는 주간 줄이다. 좌우로 밀면 앞뒤 주로 이동한다. 일정이 있는 날에는 점이 찍힌다.
- [Calendar](https://developers.moring.co/tds/components/date-calendar.md): 한 달 달력에서 여러 날짜를 고르는 컴포넌트다. 시험 날짜를 고를 때 쓴다.
- [CalendarHeat](https://developers.moring.co/tds/components/calendar-heat.md): 한 달 달력에서 날마다 공부한 시간을 색의 진하기(5단계)로 보여 주는 차트다.