From 4dbb55f6e11c547a8ac487ef2db608eb5db2490a Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Tue, 14 Oct 2025 10:29:56 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8B=AC=EB=A0=A5=20=EC=9C=84=EC=A0=AF=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20md=ED=8C=8C=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/dashboard/CALENDAR_WIDGET_PLAN.md   | 228 ++++++++++++++++++
 1 file changed, 228 insertions(+)
 create mode 100644 frontend/components/admin/dashboard/CALENDAR_WIDGET_PLAN.md

diff --git a/frontend/components/admin/dashboard/CALENDAR_WIDGET_PLAN.md b/frontend/components/admin/dashboard/CALENDAR_WIDGET_PLAN.md
new file mode 100644
index 00000000..84f2a4dc
--- /dev/null
+++ b/frontend/components/admin/dashboard/CALENDAR_WIDGET_PLAN.md
@@ -0,0 +1,228 @@
+# 📅 달력 위젯 구현 계획
+
+## 개요
+
+대시보드에 추가할 수 있는 달력 위젯을 구현합니다. 사용자가 날짜를 확인하고 일정을 관리할 수 있는 인터랙티브한 달력 기능을 제공합니다.
+
+## 주요 기능
+
+### 1. 달력 뷰 타입
+
+- **월간 뷰**: 한 달 전체를 보여주는 기본 뷰
+- **주간 뷰**: 일주일을 세로로 보여주는 뷰
+- **일간 뷰**: 하루의 시간대별 일정 뷰
+
+### 2. 달력 설정
+
+- **시작 요일**: 월요일 시작 / 일요일 시작 선택
+- **주말 강조**: 주말 색상 다르게 표시
+- **오늘 날짜 강조**: 오늘 날짜 하이라이트
+- **공휴일 표시**: 한국 공휴일 표시 (선택 사항)
+
+### 3. 테마 및 스타일
+
+- **Light 테마**: 밝은 배경
+- **Dark 테마**: 어두운 배경
+- **사용자 지정**: 커스텀 색상 선택
+
+### 4. 일정 기능 (향후 확장)
+
+- 간단한 메모 추가
+- 일정 표시 (외부 연동)
+
+## 구현 단계
+
+### ✅ Step 1: 타입 정의
+
+- [ ] `CalendarConfig` 인터페이스 정의
+- [ ] `types.ts`에 달력 설정 타입 추가
+- [ ] 요소 타입에 'calendar' subtype 추가
+
+### ✅ Step 2: 기본 달력 컴포넌트
+
+- [ ] `CalendarWidget.tsx` - 메인 위젯 컴포넌트
+- [ ] `MonthView.tsx` - 월간 달력 뷰
+- [ ] `WeekView.tsx` - 주간 달력 뷰 (선택)
+- [ ] 날짜 계산 유틸리티 함수
+
+### ✅ Step 3: 달력 네비게이션
+
+- [ ] 이전/다음 월 이동 버튼
+- [ ] 오늘로 돌아가기 버튼
+- [ ] 월/연도 선택 드롭다운
+
+### ✅ Step 4: 설정 UI
+
+- [ ] `CalendarSettings.tsx` - Popover 내장 설정 컴포넌트
+- [ ] 뷰 타입 선택 (월간/주간/일간)
+- [ ] 시작 요일 설정
+- [ ] 테마 선택
+- [ ] 표시 옵션 (주말 강조, 공휴일 등)
+
+### ✅ Step 5: 스타일링
+
+- [ ] 달력 그리드 레이아웃
+- [ ] 날짜 셀 디자인
+- [ ] 오늘 날짜 하이라이트
+- [ ] 주말/평일 구분
+- [ ] 반응형 디자인 (크기별 최적화)
+
+### ✅ Step 6: 통합
+
+- [ ] `DashboardSidebar`에 달력 위젯 추가
+- [ ] `CanvasElement`에서 달력 위젯 렌더링
+- [ ] `DashboardDesigner`에 기본값 설정
+
+### ✅ Step 7: 공휴일 데이터
+
+- [ ] 한국 공휴일 데이터 정의
+- [ ] 공휴일 표시 기능
+- [ ] 공휴일 이름 툴팁
+
+### ✅ Step 8: 테스트 및 최적화
+
+- [ ] 다양한 크기에서 테스트
+- [ ] 날짜 계산 로직 검증
+- [ ] 성능 최적화
+- [ ] 접근성 개선
+
+## 기술 스택
+
+### UI 컴포넌트
+
+- **shadcn/ui**: Button, Select, Switch, Popover, Card
+- **lucide-react**: Settings, ChevronLeft, ChevronRight, Calendar
+
+### 날짜 처리
+
+- **JavaScript Date API**: 기본 날짜 계산
+- **Intl.DateTimeFormat**: 날짜 형식화
+- 외부 라이브러리 없이 순수 구현
+
+### 스타일링
+
+- **Tailwind CSS**: 반응형 그리드 레이아웃
+- **CSS Grid**: 달력 레이아웃
+
+## 컴포넌트 구조
+
+```
+widgets/
+├── CalendarWidget.tsx       # 메인 위젯 (설정 버튼 포함)
+├── CalendarSettings.tsx     # 설정 UI (Popover 내부)
+├── MonthView.tsx           # 월간 뷰
+├── WeekView.tsx            # 주간 뷰 (선택)
+├── DayView.tsx             # 일간 뷰 (선택)
+└── calendarUtils.ts        # 날짜 계산 유틸리티
+```
+
+## 데이터 구조
+
+```typescript
+interface CalendarConfig {
+  view: "month" | "week" | "day"; // 뷰 타입
+  startWeekOn: "monday" | "sunday"; // 주 시작 요일
+  highlightWeekends: boolean; // 주말 강조
+  highlightToday: boolean; // 오늘 강조
+  showHolidays: boolean; // 공휴일 표시
+  theme: "light" | "dark" | "custom"; // 테마
+  customColor?: string; // 사용자 지정 색상
+  showWeekNumbers?: boolean; // 주차 표시 (선택)
+}
+```
+
+## UI/UX 고려사항
+
+### 반응형 디자인
+
+- **2x2**: 미니 달력 (월간 뷰만, 날짜만 표시)
+- **3x3**: 기본 달력 (월간 뷰, 요일 헤더 포함)
+- **4x4 이상**: 풀 달력 (모든 기능, 일정 표시 가능)
+
+### 인터랙션
+
+- 날짜 클릭 시 해당 날짜 정보 표시 (선택)
+- 드래그로 월 변경 (선택)
+- 키보드 네비게이션 지원
+
+### 접근성
+
+- 날짜 셀에 적절한 aria-label
+- 키보드 네비게이션 지원
+- 스크린 리더 호환
+
+## 공휴일 데이터 구조
+
+```typescript
+interface Holiday {
+  date: string; // 'MM-DD' 형식
+  name: string; // 공휴일 이름
+  isRecurring: boolean; // 매년 반복 여부
+}
+
+// 2025년 한국 공휴일 예시
+const KOREAN_HOLIDAYS: Holiday[] = [
+  { date: "01-01", name: "신정", isRecurring: true },
+  { date: "01-28", name: "설날 연휴", isRecurring: false },
+  { date: "01-29", name: "설날", isRecurring: false },
+  { date: "01-30", name: "설날 연휴", isRecurring: false },
+  { date: "03-01", name: "삼일절", isRecurring: true },
+  { date: "05-05", name: "어린이날", isRecurring: true },
+  { date: "06-06", name: "현충일", isRecurring: true },
+  { date: "08-15", name: "광복절", isRecurring: true },
+  { date: "10-03", name: "개천절", isRecurring: true },
+  { date: "10-09", name: "한글날", isRecurring: true },
+  { date: "12-25", name: "크리스마스", isRecurring: true },
+];
+```
+
+## 향후 확장 기능
+
+### Phase 2 (선택)
+
+- [ ] 일정 추가/수정/삭제
+- [ ] 반복 일정 설정
+- [ ] 카테고리별 색상 구분
+- [ ] 다른 달력 서비스 연동 (Google Calendar, Outlook 등)
+- [ ] 일정 알림 기능
+- [ ] 드래그 앤 드롭으로 일정 이동
+
+### Phase 3 (선택)
+
+- [ ] 여러 달력 레이어 지원
+- [ ] 일정 검색 기능
+- [ ] 월별 통계 (일정 개수 등)
+- [ ] CSV/iCal 내보내기
+
+## 참고사항
+
+### 장점
+
+- 순수 JavaScript로 구현 (외부 의존성 최소화)
+- shadcn/ui 컴포넌트 활용으로 일관된 디자인
+- 시계 위젯과 동일한 패턴 (내장 설정 UI)
+
+### 주의사항
+
+- 날짜 계산 로직 정확성 검증 필요
+- 윤년 처리
+- 타임존 고려 (필요시)
+- 다양한 크기에서의 가독성
+
+## 완료 기준
+
+- [x] 월간 뷰 달력이 정확하게 표시됨
+- [x] 이전/다음 월 네비게이션이 작동함
+- [x] 오늘 날짜가 하이라이트됨
+- [x] 주말이 다른 색상으로 표시됨
+- [x] 공휴일이 표시되고 이름이 보임
+- [x] 설정 UI에서 모든 옵션을 변경할 수 있음
+- [x] 테마 변경이 즉시 반영됨
+- [x] 2x2 크기에서도 깔끔하게 표시됨
+- [x] 4x4 크기에서 모든 기능이 정상 작동함
+
+---
+
+## 구현 시작
+
+이제 단계별로 구현을 시작합니다!