frontend/package-lock.json

@@ -9,9 +9,6 @@
       "version": "2.0.0",
       "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@dnd-kit/core": "^6.3.1",
-        "@dnd-kit/sortable": "^10.0.0",
-        "@dnd-kit/utilities": "^3.2.2",
         "@tanstack/react-query": "^5.90.16",
         "@tanstack/react-virtual": "^3.13.18",
         "canvas-confetti": "^1.9.4",
@@ -306,59 +303,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@dnd-kit/accessibility": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
-      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@dnd-kit/core": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
-      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@dnd-kit/accessibility": "^3.1.1",
-        "@dnd-kit/utilities": "^3.2.2",
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@dnd-kit/sortable": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
-      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
-      "license": "MIT",
-      "dependencies": {
-        "@dnd-kit/utilities": "^3.2.2",
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "@dnd-kit/core": "^6.3.0",
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@dnd-kit/utilities": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
-      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
     "node_modules/@esbuild/linux-x64": {
       "version": "0.21.5",
       "cpu": [

frontend/package.json

@@ -10,9 +10,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.6",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@tanstack/react-query": "^5.90.16",
     "@tanstack/react-virtual": "^3.13.18",
     "canvas-confetti": "^1.9.4",

frontend/src/pages/pc/admin/schedules/edit/ConcertEditForm.jsx

@@ -241,7 +241,7 @@ function ConcertEditForm() {
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
         onSubmit={handleSubmit}
-        className="space-y-6 max-w-4xl mx-auto px-6 py-8"
+        className="space-y-6"
       >
         <ConcertInfoSection
           title={title}

frontend/src/pages/pc/admin/schedules/edit/VarietyEditForm.jsx

@@ -128,7 +128,7 @@ function VarietyEditForm() {
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.4 }}
         onSubmit={handleSubmit}
-        className="space-y-6 max-w-4xl mx-auto px-6 py-8"
+        className="space-y-6"
       >
         {/* 프로그램 정보 */}
         <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">

frontend/src/pages/pc/admin/schedules/form/concert/MerchandiseSection.jsx

@@ -1,82 +1,14 @@
 import { useRef, useState } from "react";
-import {
+import { motion, AnimatePresence, Reorder } from "framer-motion";
-  DndContext, DragOverlay, closestCenter, PointerSensor, KeyboardSensor,
+import { Image, Plus, Trash2, GripVertical } from "lucide-react";
-  useSensor, useSensors,
-} from "@dnd-kit/core";
-import {
-  SortableContext, sortableKeyboardCoordinates, useSortable, rectSortingStrategy,
-  arrayMove,
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { Image, Plus, Trash2 } from "lucide-react";
 
 import ConfirmDialog from "@/components/pc/admin/common/ConfirmDialog";
 
 /**
- * 카드 컨텐츠 (Sortable wrapper와 DragOverlay에서 공통 사용)
+ * 굿즈 섹션
+ * - 다수의 굿즈 이미지 업로드
+ * - 드래그로 순서 변경
  */
-function MerchandiseCardContent({ item, index, onRemove, dragging = false }) {
-  return (
-    <div
-      className={`relative group aspect-[3/4] rounded-xl overflow-hidden bg-white border transition-shadow ${
-        dragging ? "border-primary shadow-xl" : "border-gray-100"
-      }`}
-    >
-      <img
-        src={item.preview}
-        alt={`굿즈 ${index + 1}`}
-        className="w-full h-full object-contain bg-gray-50 pointer-events-none"
-        draggable={false}
-      />
-      <span className="absolute top-2 left-2 min-w-[24px] h-6 px-2 rounded-full bg-black/60 text-white text-xs font-medium flex items-center justify-center pointer-events-none">
-        {index + 1}
-      </span>
-      {onRemove && (
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            onRemove(item.id);
-          }}
-          onPointerDown={(e) => e.stopPropagation()}
-          className="absolute top-2 right-2 w-7 h-7 rounded-full bg-black/60 hover:bg-red-500 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10"
-        >
-          <Trash2 size={13} />
-        </button>
-      )}
-    </div>
-  );
-}
-
-/**
- * 정렬 가능한 굿즈 카드
- */
-function SortableMerchandiseCard({ item, index, onRemove }) {
-  const {
-    attributes, listeners, setNodeRef, transform, transition, isDragging,
-  } = useSortable({
-    id: item.id,
-    transition: { duration: 200, easing: "cubic-bezier(0.25, 0.1, 0.25, 1)" },
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      {...attributes}
-      {...listeners}
-      className={`touch-none cursor-grab active:cursor-grabbing ${isDragging ? "opacity-30" : ""}`}
-    >
-      <MerchandiseCardContent item={item} index={index} onRemove={onRemove} />
-    </div>
-  );
-}
-
 function MerchandiseSection({ items, setItems }) {
   const fileInputRef = useRef(null);
   const [deleteConfirm, setDeleteConfirm] = useState({
@@ -84,12 +16,6 @@ function MerchandiseSection({ items, setItems }) {
     itemId: null,
     itemName: null,
   });
-  const [activeId, setActiveId] = useState(null);
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
-  );
 
   // 이미지 추가
   const handleFileChange = (e) => {
@@ -106,10 +32,12 @@ function MerchandiseSection({ items, setItems }) {
     });
 
     setItems((prev) => [...prev, ...newItems]);
+
+    // input 초기화
     e.target.value = "";
   };
 
-  // 이미지 삭제
+  // 이미지 삭제 시도
   const handleRemoveItem = (id) => {
     const item = items.find((it) => it.id === id);
     setDeleteConfirm({
@@ -119,6 +47,7 @@ function MerchandiseSection({ items, setItems }) {
     });
   };
 
+  // 이미지 삭제 실행
   const confirmRemoveItem = () => {
     if (deleteConfirm.itemId !== null) {
       setItems((prev) => {
@@ -132,19 +61,6 @@ function MerchandiseSection({ items, setItems }) {
     setDeleteConfirm({ isOpen: false, itemId: null, itemName: null });
   };
 
-  const handleDragEnd = (event) => {
-    const { active, over } = event;
-    setActiveId(null);
-    if (!over || active.id === over.id) return;
-
-    const oldIdx = items.findIndex((it) => it.id === active.id);
-    const newIdx = items.findIndex((it) => it.id === over.id);
-    setItems(arrayMove(items, oldIdx, newIdx));
-  };
-
-  const activeItem = items.find((it) => it.id === activeId);
-  const activeIndex = items.findIndex((it) => it.id === activeId);
-
   return (
     <>
       <ConfirmDialog
@@ -188,49 +104,62 @@ function MerchandiseSection({ items, setItems }) {
           <p className="text-xs text-gray-300 mt-1">여러 장 선택 가능</p>
         </div>
       ) : (
-          <>
+        <Reorder.Group
-            <DndContext
+          axis="y"
-              sensors={sensors}
+          values={items}
-              collisionDetection={closestCenter}
+          onReorder={setItems}
-              onDragStart={(e) => setActiveId(e.active.id)}
+          className="flex flex-col gap-3"
-              onDragCancel={() => setActiveId(null)}
-              onDragEnd={handleDragEnd}
         >
-              <SortableContext items={items.map((it) => it.id)} strategy={rectSortingStrategy}>
+          <AnimatePresence initial={false}>
-                <div className="grid grid-cols-4 gap-3">
             {items.map((item, index) => (
-                    <SortableMerchandiseCard
+              <Reorder.Item
                 key={item.id}
-                      item={item}
+                value={item}
-                      index={index}
+                initial={{ opacity: 0, scale: 0.98, y: -8 }}
-                      onRemove={handleRemoveItem}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.98, y: -8 }}
+                transition={{ duration: 0.15, ease: "easeOut" }}
+                className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl"
+              >
+                <div className="cursor-grab active:cursor-grabbing text-gray-300 hover:text-gray-500 transition-colors">
+                  <GripVertical size={18} />
+                </div>
+
+                <div className="w-20 h-20 rounded-lg overflow-hidden flex-shrink-0 bg-gray-200">
+                  <img
+                    src={item.preview}
+                    alt={`굿즈 ${index + 1}`}
+                    className="w-full h-full object-cover"
+                    draggable={false}
                   />
-                  ))}
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm text-gray-700 truncate">
+                    {item.file?.name}
+                  </p>
+                  <p className="text-xs text-gray-400 mt-0.5">
+                    {index + 1}번째
+                  </p>
+                </div>
+
                 <button
                   type="button"
-                    onClick={() => fileInputRef.current?.click()}
+                  onClick={() => handleRemoveItem(item.id)}
-                    className="aspect-[3/4] rounded-xl border-2 border-dashed border-gray-200 hover:border-primary hover:bg-primary/5 text-gray-400 hover:text-primary transition-colors flex flex-col items-center justify-center"
+                  className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                 >
-                    <Plus size={24} />
+                  <Trash2 size={16} />
-                    <span className="text-xs mt-1">추가</span>
                 </button>
-                </div>
+              </Reorder.Item>
-              </SortableContext>
+            ))}
-              <DragOverlay
+          </AnimatePresence>
-                dropAnimation={{
+        </Reorder.Group>
-                  duration: 200,
+      )}
-                  easing: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+
-                }}
+      {items.length > 0 && (
-              >
-                {activeItem ? (
-                  <MerchandiseCardContent item={activeItem} index={activeIndex} dragging />
-                ) : null}
-              </DragOverlay>
-            </DndContext>
         <p className="text-xs text-gray-400 mt-3">
           드래그하여 순서를 변경할 수 있습니다. 순서대로 표시됩니다.
         </p>
-          </>
       )}
       </div>
     </>

frontend/src/pages/pc/admin/schedules/form/concert/SetlistSection.jsx

@@ -1,6 +1,5 @@
 import { useState, useRef, useEffect } from "react";
-import { Reorder } from "framer-motion";
+import { Plus, Trash2, Users, Search, Copy, ChevronDown } from "lucide-react";
-import { Plus, Trash2, Users, Search, Copy, ChevronDown, GripVertical } from "lucide-react";
 
 import ConfirmDialog from "@/components/pc/admin/common/ConfirmDialog";
 import SongSearchDialog from "./SongSearchDialog";
@@ -37,7 +36,6 @@ function SetlistSection({ rounds, setlists, setSetlists, members, selectedMember
     }));
   };
 
-
   // 삭제 확인 다이얼로그
   const [deleteConfirm, setDeleteConfirm] = useState({
     isOpen: false,
@@ -285,24 +283,10 @@ function SetlistSection({ rounds, setlists, setSetlists, members, selectedMember
           </div>
         )}
 
-        <Reorder.Group
+        <div ref={containerRef} className="flex flex-col gap-4">
-          axis="y"
-          values={setlist}
-          onReorder={(next) => updateCurrentSetlist(next)}
-          ref={containerRef}
-          className="flex flex-col gap-4"
-        >
             {setlist.map((song, index) => (
-            <Reorder.Item
+              <div key={song.id}>
-              key={song.id}
+                <div className="p-4 bg-gray-50 rounded-xl space-y-3">
-              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">
@@ -392,9 +376,9 @@ function SetlistSection({ rounds, setlists, setSetlists, members, selectedMember
                     </div>
                   </div>
                 </div>
-            </Reorder.Item>
+              </div>
             ))}
-        </Reorder.Group>
+        </div>
 
         <div className="flex gap-2 mt-4">
           <button

frontend/src/pages/pc/admin/schedules/form/concert/SongSearchDialog.jsx

@@ -1,7 +1,7 @@
 import { useState, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { motion, AnimatePresence } from "framer-motion";
-import { X, Search, Music, Disc3 } from "lucide-react";
+import { X, Search, Music, Check, Disc3 } from "lucide-react";
 
 /**
  * 곡 검색 다이얼로그
@@ -71,14 +71,7 @@ function SongSearchDialog({ isOpen, onClose, onSelect, albums }) {
     });
   };
 
-  // 선택 순서 매핑 (trackId → 순번)
+  const isSelected = (trackId) => selectedTracks.some((t) => t.id === trackId);
-  const selectionOrder = useMemo(() => {
-    const m = new Map();
-    selectedTracks.forEach((t, i) => m.set(t.id, i + 1));
-    return m;
-  }, [selectedTracks]);
-
-  const isSelected = (trackId) => selectionOrder.has(trackId);
 
   // 확인
   const handleConfirm = () => {
@@ -176,26 +169,27 @@ function SongSearchDialog({ isOpen, onClose, onSelect, albums }) {
 
                       {/* 트랙 목록 */}
                       <div className="space-y-1">
-                        {group.tracks.map((track) => {
+                        {group.tracks.map((track) => (
-                          const order = selectionOrder.get(track.id);
-                          const selected = order !== undefined;
-                          return (
                           <button
                             key={track.id}
                             type="button"
                             onClick={() => toggleTrack(track)}
                             className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors ${
-                                selected ? "bg-primary/10" : "hover:bg-gray-50"
+                              isSelected(track.id)
+                                ? "bg-primary/10"
+                                : "hover:bg-gray-50"
                             }`}
                           >
                             <div
-                                className={`w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 text-[11px] font-bold leading-none transition-colors ${
+                              className={`w-5 h-5 rounded border flex items-center justify-center flex-shrink-0 ${
-                                  selected
+                                isSelected(track.id)
-                                    ? "bg-primary text-white"
+                                  ? "bg-primary border-primary"
-                                    : "border border-gray-300 text-transparent"
+                                  : "border-gray-300"
                               }`}
                             >
-                                <span className="translate-y-[0.5px]">{order ?? ""}</span>
+                              {isSelected(track.id) && (
+                                <Check size={12} className="text-white" />
+                              )}
                             </div>
                             <span className="text-sm text-gray-400 w-5 text-right flex-shrink-0">
                               {track.trackNumber}
@@ -209,8 +203,7 @@ function SongSearchDialog({ isOpen, onClose, onSelect, albums }) {
                               </span>
                             )}
                           </button>
-                          );
+                        ))}
-                        })}
                       </div>
                     </div>
                   ))}