From cdb94972a32d87c769638f71538737187114e21f Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Tue, 31 Mar 2026 18:08:39 +0900
Subject: [PATCH] =?UTF-8?q?refactor(concert):=20=EC=84=B8=ED=8A=B8?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=9A=8C=EC=B0=A8=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=EC=9D=84=20=ED=83=AD=EC=97=90=EC=84=9C=20=EB=93=9C?=
 =?UTF-8?q?=EB=A1=AD=EB=8B=A4=EC=9A=B4=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 탭 UI → select 드롭다운 (회차가 많아도 깔끔)
- 드롭다운에 날짜 표시 (예: "1회차 (2026-04-01)")
- 회차 전환 시 애니메이션 제거
- framer-motion 의존성 제거

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../schedules/form/concert/SetlistSection.jsx | 42 +++++++------------
 1 file changed, 15 insertions(+), 27 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 32be8bf..40cfa52 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,4 @@
 import { useState, useRef, useEffect } from "react";
-import { motion, AnimatePresence } from "framer-motion";
 import { Plus, Trash2, Users, Search, Copy } from "lucide-react";
 
 import ConfirmDialog from "@/components/pc/admin/common/ConfirmDialog";
@@ -229,36 +228,26 @@ function SetlistSection({ rounds, setlists, setSetlists, members, selectedMember
           )}
         </div>
 
-        {/* 회차 탭 (2개 이상일 때만) */}
+        {/* 회차 선택 드롭다운 (2개 이상일 때만) */}
         {rounds.length > 1 && (
-          <div className="flex gap-1 mb-4 p-1 bg-gray-100 rounded-lg">
-            {rounds.map((round, index) => (
-              <button
-                key={round.id}
-                type="button"
-                onClick={() => setActiveRoundId(round.id)}
-                className={`flex-1 py-2 text-sm font-medium rounded-md transition-colors ${
-                  activeRoundId === round.id
-                    ? "bg-white text-primary shadow-sm"
-                    : "text-gray-500 hover:text-gray-700"
-                }`}
-              >
-                {index + 1}회차
-              </button>
-            ))}
+          <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"
+            >
+              {rounds.map((round, index) => (
+                <option key={round.id} value={round.id}>
+                  {index + 1}회차{round.date ? ` (${round.date})` : ''}
+                </option>
+              ))}
+            </select>
           </div>
         )}
 
         <div ref={containerRef} className="flex flex-col gap-4">
-          <AnimatePresence initial={false}>
             {setlist.map((song, index) => (
-              <motion.div
-                key={song.id}
-                initial={{ opacity: 0, scale: 0.98, y: -8 }}
-                animate={{ opacity: 1, scale: 1, y: 0 }}
-                exit={{ opacity: 0, scale: 0.98, y: -8 }}
-                transition={{ duration: 0.15, ease: "easeOut" }}
-              >
+              <div key={song.id}>
                 <div className="p-4 bg-gray-50 rounded-xl space-y-3">
                   {/* 헤더 */}
                   <div className="flex items-center justify-between">
@@ -349,9 +338,8 @@ function SetlistSection({ rounds, setlists, setSetlists, members, selectedMember
                     </div>
                   </div>
                 </div>
-              </motion.div>
+              </div>
             ))}
-          </AnimatePresence>
         </div>
 
         <div className="flex gap-2 mt-4">