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