PlannerPreview
환영·설정 화면에서 플래너가 어떤 모양인지 보여 주는 작은 그림이다. 하루를 과목별 또는 시간별로 나눈 예시다.
- 분류
- Calendar 앱
- 가져오기
import { PlannerPreview } from '@/cal/Preview'- 코드 위치
apps/calendar/src/cal/Preview.tsx:18
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
10월 7일 수요일중간고사 D-16
국어
문학 기출 18일차
EBS 수특 3강 읽기
수학
자이스토리 p.197~202
함수 취약 개념 8문제Mordy
10월 7일 수요일중간고사 D-16
16:00영어학원
19:30수학 · 함수 취약 개념Mordy
21:00국어 · 문학 기출
언제 쓰는가#
쓴다
- 이 컴포넌트는 Mordy Calendar 앱(
apps/calendar/src/cal)에만 있다. - 시작 화면에서 앱의 모양을 미리 보여 줄 때만 쓴다.
쓰지 않는다
- 실제 사용자 데이터 화면에 쓰지 않는다. 고정된 예시다.
- 예시 글(국어·수학 항목)을 실제 기능 설명으로 쓰지 않는다.
종류#
| 이름 | 설명 |
|---|---|
| subject | 과목별 묶음(기본). |
| time | 시간별 줄(16:00, 19:30, 21:00). |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 안쪽 여백 18 | compact면 14. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 예시 | 고정된 예시 항목을 보인다. |
사용 방법#
기본
기본
import { PlannerPreview } from '@/cal/Preview';
<PlannerPreview style="time" compact />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
style | 'subject' | 'time' | 'subject' | 선택 | "subject"(기본) 또는 "time". |
compact | boolean | — | 선택 | true이면 안쪽 여백을 줄인다. |
치수와 토큰#
- 면
surface, 모서리 22,shadow(1)
접근성#
- 장식용 그림이다. 안의 글자는 읽힌다.
잘한 예와 잘못한 예#
10월 7일 수요일중간고사 D-16
국어
문학 기출 18일차
EBS 수특 3강 읽기
수학
자이스토리 p.197~202
함수 취약 개념 8문제Mordy
실제 데이터 화면에 쓴 미리보기