# MonthView

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

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

## 미리보기

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

## 언제 쓰는가

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

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

## 종류

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

## 크기

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

## 상태

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

## 사용 방법

### 기본

```tsx
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)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `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) 선택한 날의 상세 목록을 화면 아래에 글자로 따로 보여 준다.
- 시험은 채운 칩과 글자로 함께 알린다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 칩 글자 (9.5px 굵게) | `text` | `surface` | 17.15:1 통과 | 15.25:1 통과 | 16.13:1 통과 | 10.92:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 선택한 날의 목록을 아래에 크게 보여 준다.
- 잘못한 예: 칩 글자(9.5px)만으로 내용을 전달하지 않는다. 넘치는 일정은 "+n"으로 줄고 상세 목록에서 본다.

## 함께 보는 컴포넌트

- [TimeGrid](https://developers.moring.co/tds/components/time-grid.md): 주·일 보기의 24시간 시간표다. 일정 블록을 길게 눌러 끌면 시간(15분 단위)과 날짜가 바뀌고, 빈 칸을 누르면 그 시각에 추가한다.
- [DayStrip](https://developers.moring.co/tds/components/day-strip.md): 한 주 7일을 한 줄로 보여 주고 날짜를 골라 이동하는 주간 줄이다. 좌우로 밀면 앞뒤 주로 이동한다. 일정이 있는 날에는 점이 찍힌다.
- [Calendar](https://developers.moring.co/tds/components/date-calendar.md): 한 달 달력에서 여러 날짜를 고르는 컴포넌트다. 시험 날짜를 고를 때 쓴다.