diff --git a/frontend/src/pages/pc/admin/schedules/form/concert/SetlistSection.jsx b/frontend/src/pages/pc/admin/schedules/form/concert/SetlistSection.jsx index 40cfa52..f10fcdd 100644 --- a/frontend/src/pages/pc/admin/schedules/form/concert/SetlistSection.jsx +++ b/frontend/src/pages/pc/admin/schedules/form/concert/SetlistSection.jsx @@ -1,5 +1,5 @@ import { useState, useRef, useEffect } from "react"; -import { Plus, Trash2, Users, Search, Copy } from "lucide-react"; +import { Plus, Trash2, Users, Search, Copy, ChevronDown } from "lucide-react"; import ConfirmDialog from "@/components/pc/admin/common/ConfirmDialog"; import SongSearchDialog from "./SongSearchDialog"; @@ -49,6 +49,23 @@ function SetlistSection({ rounds, setlists, setSetlists, members, selectedMember // 복사 소스 선택 const [copyFrom, setCopyFrom] = useState(null); + // 회차 드롭다운 열림 상태 + const [roundDropdownOpen, setRoundDropdownOpen] = useState(false); + const roundDropdownRef = useRef(null); + + // 드롭다운 외부 클릭 닫기 + useEffect(() => { + const handleClickOutside = (e) => { + if (roundDropdownRef.current && !roundDropdownRef.current.contains(e.target)) { + setRoundDropdownOpen(false); + } + }; + if (roundDropdownOpen) { + document.addEventListener("mousedown", handleClickOutside); + } + return () => document.removeEventListener("mousedown", handleClickOutside); + }, [roundDropdownOpen]); + // 직접 입력 곡 추가 const addSong = () => { const newSong = { @@ -228,20 +245,41 @@ function SetlistSection({ rounds, setlists, setSetlists, members, selectedMember )} - {/* 회차 선택 드롭다운 (2개 이상일 때만) */} + {/* 회차 선택 커스텀 드롭다운 (2개 이상일 때만) */} {rounds.length > 1 && ( -
- + + {activeRoundIndex + 1}회차 + {rounds[activeRoundIndex]?.date ? ` (${rounds[activeRoundIndex].date})` : ''} + + + + {roundDropdownOpen && ( +
+ {rounds.map((round, index) => ( + + ))} +
+ )}
)}