From 18efd952c475b32ed25cff3b335a215b96640367 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Thu, 23 Apr 2026 17:22:14 +0900
Subject: [PATCH] =?UTF-8?q?style(admin):=20=EC=84=B8=ED=8A=B8=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=93=9C=EB=9E=98=EA=B7=B8=EC=95=A4?=
 =?UTF-8?q?=EB=93=9C=EB=A1=AD=20=EC=9E=AC=EC=A0=95=EB=A0=AC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- framer-motion의 Reorder를 사용해 세트리스트 곡 순서를 드래그로 변경 가능
- 카드 왼쪽에 GripVertical 핸들 영역 분리, 오른쪽에 기존 폼 필드
- 내부 input/버튼은 드래그 임계값 덕분에 자유롭게 조작 가능

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../schedules/form/concert/SetlistSection.jsx | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 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 f10fcdd..76084bb 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,6 @@
 import { useState, useRef, useEffect } from "react";
-import { Plus, Trash2, Users, Search, Copy, ChevronDown } from "lucide-react";
+import { Reorder } from "framer-motion";
+import { Plus, Trash2, Users, Search, Copy, ChevronDown, GripVertical } from "lucide-react";
 
 import ConfirmDialog from "@/components/pc/admin/common/ConfirmDialog";
 import SongSearchDialog from "./SongSearchDialog";
@@ -36,6 +37,7 @@ function SetlistSection({ rounds, setlists, setSetlists, members, selectedMember
     }));
   };
 
+
   // 삭제 확인 다이얼로그
   const [deleteConfirm, setDeleteConfirm] = useState({
     isOpen: false,
@@ -283,10 +285,24 @@ function SetlistSection({ rounds, setlists, setSetlists, members, selectedMember
           </div>
         )}
 
-        <div ref={containerRef} className="flex flex-col gap-4">
-            {setlist.map((song, index) => (
-              <div key={song.id}>
-                <div className="p-4 bg-gray-50 rounded-xl space-y-3">
+        <Reorder.Group
+          axis="y"
+          values={setlist}
+          onReorder={(next) => updateCurrentSetlist(next)}
+          ref={containerRef}
+          className="flex flex-col gap-4"
+        >
+          {setlist.map((song, index) => (
+            <Reorder.Item
+              key={song.id}
+              value={song}
+              className="flex items-stretch bg-gray-50 rounded-xl overflow-hidden cursor-grab active:cursor-grabbing"
+            >
+              {/* 드래그 핸들 (시각적 표시용, 카드 전체가 드래그 가능) */}
+              <div className="flex items-center px-2 text-gray-300">
+                <GripVertical size={18} />
+              </div>
+              <div className="flex-1 p-4 space-y-3 min-w-0">
                   {/* 헤더 */}
                   <div className="flex items-center justify-between">
                     <span className="text-sm font-medium text-gray-700">
@@ -375,10 +391,10 @@ function SetlistSection({ rounds, setlists, setSetlists, members, selectedMember
                       })}
                     </div>
                   </div>
-                </div>
               </div>
-            ))}
-        </div>
+            </Reorder.Item>
+          ))}
+        </Reorder.Group>
 
         <div className="flex gap-2 mt-4">
           <button