# PlannerPreview

환영·설정 화면에서 플래너가 어떤 모양인지 보여 주는 작은 그림이다. 하루를 과목별 또는 시간별로 나눈 예시다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- 이 컴포넌트는 Mordy Calendar 앱(`apps/calendar/src/cal`)에만 있다.
- 시작 화면에서 앱의 모양을 미리 보여 줄 때만 쓴다.

### 쓰지 않는다
- 실제 사용자 데이터 화면에 쓰지 않는다. 고정된 예시다.
- 예시 글(국어·수학 항목)을 실제 기능 설명으로 쓰지 않는다.

## 종류

| 이름 | 설명 |
| --- | --- |
| subject | 과목별 묶음(기본). |
| time | 시간별 줄(16:00, 19:30, 21:00). |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 안쪽 여백 18 | `compact`면 14. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 예시 | 고정된 예시 항목을 보인다. |

## 사용 방법

### 기본

```tsx
import { PlannerPreview } from '@/cal/Preview';

<PlannerPreview style="time" compact />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `style` | `'subject' \| 'time'` | `'subject'` | 선택 | `"subject"`(기본) 또는 `"time"`. |
| `compact` | `boolean` | — | 선택 | `true`이면 안쪽 여백을 줄인다. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 면 | `surface`, 모서리 22, `shadow(1)` |

## 접근성

- 장식용 그림이다. 안의 글자는 읽힌다.

## 잘한 예와 잘못한 예

- 잘한 예: 시작 화면의 예시로만 쓴다.
- 잘못한 예: 실제 일정 목록 대신 쓰지 않는다.

## 함께 보는 컴포넌트

- [PlanRow](https://developers.moring.co/tds/components/plan-row.md): Mordy가 만든 학습 계획 한 줄이다. 체크 원, 제목, "Mordy" 표지, 푼 문제 진행률(막대)이 있다. 직접 옮긴 계획에는 자물쇠가 붙는다.
- [ItemRow](https://developers.moring.co/tds/components/item-row.md): 오늘과 할 일 목록의 한 줄이다. 할 일은 앞에 체크 원, 일정은 앞에 시간과 색 막대가 있다.