달력과 투두리스트 합침, 배경색변경가능, 위젯끼리 밀어내는 기능과 세밀한 그리드 추가, 범용위젯 복구

frontend/components/admin/dashboard/widgets/MonthView.tsx

@@ -7,12 +7,14 @@ interface MonthViewProps {
   days: CalendarDay[];
   config: CalendarConfig;
   isCompact?: boolean; // 작은 크기 (2x2, 3x3)
+  selectedDate?: Date | null; // 선택된 날짜
+  onDateClick?: (date: Date) => void; // 날짜 클릭 핸들러
 }
 
 /**
  * 월간 달력 뷰 컴포넌트
  */
-export function MonthView({ days, config, isCompact = false }: MonthViewProps) {
+export function MonthView({ days, config, isCompact = false, selectedDate, onDateClick }: MonthViewProps) {
   const weekDayNames = getWeekDayNames(config.startWeekOn);
 
   // 테마별 스타일
@@ -43,10 +45,27 @@ export function MonthView({ days, config, isCompact = false }: MonthViewProps) {
 
   const themeStyles = getThemeStyles();
 
+  // 날짜가 선택된 날짜인지 확인
+  const isSelected = (day: CalendarDay) => {
+    if (!selectedDate || !day.isCurrentMonth) return false;
+    return (
+      selectedDate.getFullYear() === day.date.getFullYear() &&
+      selectedDate.getMonth() === day.date.getMonth() &&
+      selectedDate.getDate() === day.date.getDate()
+    );
+  };
+
+  // 날짜 클릭 핸들러
+  const handleDayClick = (day: CalendarDay) => {
+    if (!day.isCurrentMonth || !onDateClick) return;
+    onDateClick(day.date);
+  };
+
   // 날짜 셀 스타일 클래스
   const getDayCellClass = (day: CalendarDay) => {
     const baseClass = "flex aspect-square items-center justify-center rounded-lg transition-colors";
     const sizeClass = isCompact ? "text-xs" : "text-sm";
+    const cursorClass = day.isCurrentMonth ? "cursor-pointer" : "cursor-default";
 
     let colorClass = "text-gray-700";
 
@@ -54,6 +73,10 @@ export function MonthView({ days, config, isCompact = false }: MonthViewProps) {
     if (!day.isCurrentMonth) {
       colorClass = "text-gray-300";
     }
+    // 선택된 날짜
+    else if (isSelected(day)) {
+      colorClass = "text-white font-bold";
+    }
     // 오늘
     else if (config.highlightToday && day.isToday) {
       colorClass = "text-white font-bold";
@@ -67,9 +90,16 @@ export function MonthView({ days, config, isCompact = false }: MonthViewProps) {
       colorClass = "text-red-600";
     }
 
-    const bgClass = config.highlightToday && day.isToday ? "" : "hover:bg-gray-100";
+    let bgClass = "";
+    if (isSelected(day)) {
+      bgClass = ""; // 선택된 날짜는 배경색이 style로 적용됨
+    } else if (config.highlightToday && day.isToday) {
+      bgClass = "";
+    } else {
+      bgClass = "hover:bg-gray-100";
+    }
 
-    return `${baseClass} ${sizeClass} ${colorClass} ${bgClass}`;
+    return `${baseClass} ${sizeClass} ${colorClass} ${bgClass} ${cursorClass}`;
   };
 
   return (
@@ -97,9 +127,13 @@ export function MonthView({ days, config, isCompact = false }: MonthViewProps) {
           <div
             key={index}
             className={getDayCellClass(day)}
+            onClick={() => handleDayClick(day)}
             style={{
-              backgroundColor:
-                config.highlightToday && day.isToday ? themeStyles.todayBg : undefined,
+              backgroundColor: isSelected(day)
+                ? "#10b981" // 선택된 날짜는 초록색
+                : config.highlightToday && day.isToday
+                  ? themeStyles.todayBg
+                  : undefined,
               color:
                 config.showHolidays && day.isHoliday && day.isCurrentMonth
                   ? themeStyles.holidayText