From 1cf49c7239b5f930717147e236db9c5a5246f10a Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Wed, 31 Dec 2025 22:35:09 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20=EB=85=84=EC=9B=94=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=ED=8C=9D=EC=97=85=20=EC=99=B8=EB=B6=80=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=EC=8B=9C=20=EB=8B=AB=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/pc/Schedule.jsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/pc/Schedule.jsx b/frontend/src/pages/pc/Schedule.jsx
index bc95dcd..dad1e7a 100644
--- a/frontend/src/pages/pc/Schedule.jsx
+++ b/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 }}