style(admin): 콘서트 굿즈 섹션 UI 개선 + 드래그앤드롭 재정렬

- 그리드 4열 레이아웃으로 전환해 카드 공백감 해소
- 세로 이미지 잘림 방지: aspect-[3/4] + object-contain + 회색 배경
- 호버 시 삭제 버튼 노출, 순서 뱃지 상시 표시
- 마지막 칸에 '+ 추가' 점선 타일 추가 (다중 업로드 가능)
- @dnd-kit 기반 드래그앤드롭 재정렬 도입 (DragOverlay, rectSortingStrategy)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/package-lock.json

@@ -9,6 +9,9 @@
       "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",
@@ -303,6 +306,59 @@
         "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,6 +10,9 @@
   },
   "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/form/concert/MerchandiseSection.jsx

@@ -1,14 +1,82 @@
 import { useRef, useState } from "react";
-import { motion, AnimatePresence, Reorder } from "framer-motion";
+import {
-import { Image, Plus, Trash2, GripVertical } from "lucide-react";
+  DndContext, DragOverlay, closestCenter, PointerSensor, KeyboardSensor,
+  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({
@@ -16,6 +84,12 @@ 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) => {
@@ -32,12 +106,10 @@ function MerchandiseSection({ items, setItems }) {
     });
 
     setItems((prev) => [...prev, ...newItems]);
-
-    // input 초기화
     e.target.value = "";
   };
 
-  // 이미지 삭제 시도
+  // 이미지 삭제
   const handleRemoveItem = (id) => {
     const item = items.find((it) => it.id === id);
     setDeleteConfirm({
@@ -47,7 +119,6 @@ function MerchandiseSection({ items, setItems }) {
     });
   };
 
-  // 이미지 삭제 실행
   const confirmRemoveItem = () => {
     if (deleteConfirm.itemId !== null) {
       setItems((prev) => {
@@ -61,6 +132,19 @@ 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
@@ -83,84 +167,71 @@ function MerchandiseSection({ items, setItems }) {
       <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
         <h2 className="text-lg font-bold text-gray-900 mb-6">굿즈</h2>
 
-      <input
+        <input
-        ref={fileInputRef}
+          ref={fileInputRef}
-        type="file"
+          type="file"
-        accept="image/*"
+          accept="image/*"
-        multiple
+          multiple
-        onChange={handleFileChange}
+          onChange={handleFileChange}
-        className="hidden"
+          className="hidden"
-      />
+        />
 
-      {items.length === 0 ? (
+        {items.length === 0 ? (
-        <div
+          <div
-          onClick={() => fileInputRef.current?.click()}
+            onClick={() => fileInputRef.current?.click()}
-          className="flex flex-col items-center justify-center py-12 border-2 border-dashed border-gray-200 rounded-xl cursor-pointer hover:border-primary hover:bg-primary/5 transition-colors"
+            className="flex flex-col items-center justify-center py-12 border-2 border-dashed border-gray-200 rounded-xl cursor-pointer hover:border-primary hover:bg-primary/5 transition-colors"
-        >
+          >
-          <Image size={36} className="text-gray-300 mb-3" />
+            <Image size={36} className="text-gray-300 mb-3" />
-          <p className="text-sm text-gray-400">
+            <p className="text-sm text-gray-400">
-            클릭하여 굿즈 이미지를 추가하세요
+              클릭하여 굿즈 이미지를 추가하세요
-          </p>
+            </p>
-          <p className="text-xs text-gray-300 mt-1">여러 장 선택 가능</p>
+            <p className="text-xs text-gray-300 mt-1">여러 장 선택 가능</p>
-        </div>
+          </div>
-      ) : (
+        ) : (
-        <Reorder.Group
+          <>
-          axis="y"
+            <DndContext
-          values={items}
+              sensors={sensors}
-          onReorder={setItems}
+              collisionDetection={closestCenter}
-          className="flex flex-col gap-3"
+              onDragStart={(e) => setActiveId(e.active.id)}
-        >
+              onDragCancel={() => setActiveId(null)}
-          <AnimatePresence initial={false}>
+              onDragEnd={handleDragEnd}
-            {items.map((item, index) => (
+            >
-              <Reorder.Item
+              <SortableContext items={items.map((it) => it.id)} strategy={rectSortingStrategy}>
-                key={item.id}
+                <div className="grid grid-cols-4 gap-3">
-                value={item}
+                  {items.map((item, index) => (
-                initial={{ opacity: 0, scale: 0.98, y: -8 }}
+                    <SortableMerchandiseCard
-                animate={{ opacity: 1, scale: 1, y: 0 }}
+                      key={item.id}
-                exit={{ opacity: 0, scale: 0.98, y: -8 }}
+                      item={item}
-                transition={{ duration: 0.15, ease: "easeOut" }}
+                      index={index}
-                className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl"
+                      onRemove={handleRemoveItem}
+                    />
+                  ))}
+                  <button
+                    type="button"
+                    onClick={() => fileInputRef.current?.click()}
+                    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"
+                  >
+                    <Plus size={24} />
+                    <span className="text-xs mt-1">추가</span>
+                  </button>
+                </div>
+              </SortableContext>
+              <DragOverlay
+                dropAnimation={{
+                  duration: 200,
+                  easing: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+                }}
               >
-                <div className="cursor-grab active:cursor-grabbing text-gray-300 hover:text-gray-500 transition-colors">
+                {activeItem ? (
-                  <GripVertical size={18} />
+                  <MerchandiseCardContent item={activeItem} index={activeIndex} dragging />
-                </div>
+                ) : null}
-
+              </DragOverlay>
-                <div className="w-20 h-20 rounded-lg overflow-hidden flex-shrink-0 bg-gray-200">
+            </DndContext>
-                  <img
+            <p className="text-xs text-gray-400 mt-3">
-                    src={item.preview}
+              드래그하여 순서를 변경할 수 있습니다. 순서대로 표시됩니다.
-                    alt={`굿즈 ${index + 1}`}
+            </p>
-                    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={() => handleRemoveItem(item.id)}
-                  className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
-                >
-                  <Trash2 size={16} />
-                </button>
-              </Reorder.Item>
-            ))}
-          </AnimatePresence>
-        </Reorder.Group>
-      )}
-
-      {items.length > 0 && (
-        <p className="text-xs text-gray-400 mt-3">
-          드래그하여 순서를 변경할 수 있습니다. 순서대로 표시됩니다.
-        </p>
-      )}
       </div>
     </>
   );