🔧 년월 선택 팝업 외부 클릭시 닫기 기능 추가

frontend/src/pages/pc/Schedule.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Clock, MapPin, Users, ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react';
 import { schedules } from '../../data/dummy';
@@ -7,6 +7,24 @@ function Schedule() {
     const [currentDate, setCurrentDate] = useState(new Date());
     const [selectedDate, setSelectedDate] = useState(null);
     const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);
+    const pickerRef = useRef(null);
+
+    // 외부 클릭시 팝업 닫기
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (pickerRef.current && !pickerRef.current.contains(event.target)) {
+                setShowYearMonthPicker(false);
+            }
+        };
+
+        if (showYearMonthPicker) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [showYearMonthPicker]);
 
     // 달력 관련 함수
     const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
@@ -123,6 +141,7 @@ function Schedule() {
                             <AnimatePresence>
                                 {showYearMonthPicker && (
                                     <motion.div
+                                        ref={pickerRef}
                                         initial={{ opacity: 0, y: -10 }}
                                         animate={{ opacity: 1, y: 0 }}
                                         exit={{ opacity: 0, y: -10 }}