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() { {showYearMonthPicker && (