# DayStrip

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

- 분류: Calendar 앱
- 가져오기: `import { DayStrip } from '@/cal/DayStrip'`
- 코드 위치: `apps/calendar/src/cal/DayStrip.tsx:13` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/day-strip

## 미리보기

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

## 언제 쓰는가

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

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

## 종류

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

## 크기

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

## 상태

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

## 사용 방법

### 기본

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

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

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `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일 목요일, 오늘"이다. 선택 상태가 전달된다.
- 점의 의미(일정, 시험)는 색만으로 구분되므로 선택한 날짜의 목록에서 글자로도 알려 준다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 선택된 날짜 | `onPrimaryStrong` | `primaryStrong` | 4.43:1 미달 | 3.71:1 미달 | 4.60:1 통과 | 5.48:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 선택한 날의 일정 목록을 줄 아래에 글자로 함께 보여 준다.
- 잘못한 예: 점만으로 시험일을 알리지 않는다. 시험일은 목록에 "D-3 중간고사"로도 보여 준다.

## 함께 보는 컴포넌트

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