← 목록으로
📝 Prompt
‹
2026년 1월
›
오늘
월
주
일
목록
월
화
수
목
금
토
일
29
30
31
1
새해 첫 미팅
2
3
4
5
프로젝트 킥오프
6
7
8
디자인 리뷰
9
10
11
12
13
워크샵
14
15
팀 미팅
프레젠테이션
16
17
18
19
20
마감일
21
22
클라이언트 미팅
코드 리뷰
스프린트 회고
+2 more
23
24
25
26
27
28
29
오늘의 미팅
30
31
1
이벤트 제목
2026년 1월 29일 오전 10:00 - 오전 11:00
이벤트에 대한 상세 설명이 여기에 표시됩니다.
수정
삭제
닫기
42. 캘린더 뷰 Design a calendar component: **View Modes**: - Month view (default) - Week view - Day view - Agenda/list view **Header**: - Navigation: < > arrows for prev/next - Current: "January 2026" - View mode toggle buttons - "Today" quick button **Month View Grid**: - 7 columns (days of week) - Day headers: Mon, Tue, Wed... - Weeks as rows - Day cells: number + event indicators **Day Cell**: - Date number: top-left - Today: blue circle highlight - Selected: blue fill - Other month: gray-400 text - Events: max 3 visible + "+2 more" **Event Display**: - Small pill/chip in day cell - Color-coded by category - Truncated text - Click: opens event detail **Week/Day View**: - Time slots on left: 12am-11pm - Events as positioned blocks - Overlapping events side by side - Current time: red line indicator **Event Creation**: - Click + drag to create on calendar - Quick add modal/popover - Form: title, time, description, color **Event Detail Popover**: - Event title and time - Description - Attendees - Actions: edit, delete - Click outside to close **Mini Calendar** (sidebar): - Compact month view - Navigate main calendar - Selected date highlighted Tech: React + date-fns + @dnd-kit (for drag) + Tailwind
디자인 프롬프트
×