From 637172ddd784722321711a448f94a855e4203384 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Tue, 31 Mar 2026 18:09:26 +0900
Subject: [PATCH] =?UTF-8?q?style(concert):=20=EB=84=A4=EC=9D=B4=ED=8B=B0?=
 =?UTF-8?q?=EB=B8=8C=20select=EB=A5=BC=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 선택된 회차 + 날짜 표시, 화살표 아이콘 회전 애니메이션
- 활성 항목 primary 하이라이트
- 외부 클릭 시 자동 닫기

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../schedules/form/concert/SetlistSection.jsx | 64 +++++++++++++++----
 1 file changed, 51 insertions(+), 13 deletions(-)

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
           )}
         </div>
 
-        {/* 회차 선택 드롭다운 (2개 이상일 때만) */}
+        {/* 회차 선택 커스텀 드롭다운 (2개 이상일 때만) */}
         {rounds.length > 1 && (
-          <div className="mb-4">
-            <select
-              value={activeRoundId}
-              onChange={(e) => setActiveRoundId(Number(e.target.value))}
-              className="px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+          <div className="relative mb-4" ref={roundDropdownRef}>
+            <button
+              type="button"
+              onClick={() => setRoundDropdownOpen(!roundDropdownOpen)}
+              className="flex items-center justify-between gap-2 w-48 px-3 py-2 border border-gray-200 rounded-lg text-sm bg-white hover:border-gray-300 transition-colors"
             >
-              {rounds.map((round, index) => (
-                <option key={round.id} value={round.id}>
-                  {index + 1}회차{round.date ? ` (${round.date})` : ''}
-                </option>
-              ))}
-            </select>
+              <span className="truncate">
+                {activeRoundIndex + 1}회차
+                {rounds[activeRoundIndex]?.date ? ` (${rounds[activeRoundIndex].date})` : ''}
+              </span>
+              <ChevronDown size={14} className={`text-gray-400 transition-transform ${roundDropdownOpen ? 'rotate-180' : ''}`} />
+            </button>
+            {roundDropdownOpen && (
+              <div className="absolute left-0 top-full mt-1 w-48 bg-white border border-gray-200 rounded-lg shadow-lg z-10 py-1">
+                {rounds.map((round, index) => (
+                  <button
+                    key={round.id}
+                    type="button"
+                    onClick={() => {
+                      setActiveRoundId(round.id);
+                      setRoundDropdownOpen(false);
+                    }}
+                    className={`w-full px-3 py-2 text-sm text-left transition-colors ${
+                      round.id === activeRoundId
+                        ? 'bg-primary/10 text-primary font-medium'
+                        : 'hover:bg-gray-50 text-gray-700'
+                    }`}
+                  >
+                    {index + 1}회차{round.date ? ` (${round.date})` : ''}
+                  </button>
+                ))}
+              </div>
+            )}
           </div>
         )}