From 9e87549ca3194c8a1b4a30750bd819f63edcc0c3 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Thu, 23 Apr 2026 17:25:42 +0900
Subject: [PATCH] =?UTF-8?q?style(admin):=20=EA=B3=A1=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=20=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C=EA=B7=B8=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EC=88=9C=EC=84=9C=20=EB=B2=88=ED=98=B8=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 체크 아이콘 대신 선택 순서(1, 2, 3...) 숫자 뱃지 표시
- 선택 해제 시 남은 곡 번호 자동 재계산
- 숫자 시각 중심 보정 (leading-none + translate-y)
- 순서는 이미 클릭 순서대로 세트리스트에 추가됨 (selectedTracks push 순서 유지)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../form/concert/SongSearchDialog.jsx         | 75 ++++++++++---------
 1 file changed, 41 insertions(+), 34 deletions(-)

diff --git a/frontend/src/pages/pc/admin/schedules/form/concert/SongSearchDialog.jsx b/frontend/src/pages/pc/admin/schedules/form/concert/SongSearchDialog.jsx
index c1dd048..e3d1e9e 100644
--- a/frontend/src/pages/pc/admin/schedules/form/concert/SongSearchDialog.jsx
+++ b/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, Check, Disc3 } from "lucide-react";
+import { X, Search, Music, Disc3 } from "lucide-react";
 
 /**
  * 곡 검색 다이얼로그
@@ -71,7 +71,14 @@ function SongSearchDialog({ isOpen, onClose, onSelect, albums }) {
     });
   };
 
-  const isSelected = (trackId) => selectedTracks.some((t) => t.id === trackId);
+  // 선택 순서 매핑 (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 = () => {
@@ -169,41 +176,41 @@ function SongSearchDialog({ isOpen, onClose, onSelect, albums }) {
 
                       {/* 트랙 목록 */}
                       <div className="space-y-1">
-                        {group.tracks.map((track) => (
-                          <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 ${
-                              isSelected(track.id)
-                                ? "bg-primary/10"
-                                : "hover:bg-gray-50"
-                            }`}
-                          >
-                            <div
-                              className={`w-5 h-5 rounded border flex items-center justify-center flex-shrink-0 ${
-                                isSelected(track.id)
-                                  ? "bg-primary border-primary"
-                                  : "border-gray-300"
+                        {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) && (
-                                <Check size={12} className="text-white" />
-                              )}
-                            </div>
-                            <span className="text-sm text-gray-400 w-5 text-right flex-shrink-0">
-                              {track.trackNumber}
-                            </span>
-                            <span className="text-sm text-gray-900 flex-1 truncate">
-                              {track.songName}
-                            </span>
-                            {!!track.isTitleTrack && (
-                              <span className="text-[10px] px-1.5 py-0.5 bg-primary/10 text-primary rounded font-medium flex-shrink-0">
-                                타이틀
+                              <div
+                                className={`w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 text-[11px] font-bold leading-none transition-colors ${
+                                  selected
+                                    ? "bg-primary text-white"
+                                    : "border border-gray-300 text-transparent"
+                                }`}
+                              >
+                                <span className="translate-y-[0.5px]">{order ?? ""}</span>
+                              </div>
+                              <span className="text-sm text-gray-400 w-5 text-right flex-shrink-0">
+                                {track.trackNumber}
                               </span>
-                            )}
-                          </button>
-                        ))}
+                              <span className="text-sm text-gray-900 flex-1 truncate">
+                                {track.songName}
+                              </span>
+                              {!!track.isTitleTrack && (
+                                <span className="text-[10px] px-1.5 py-0.5 bg-primary/10 text-primary rounded font-medium flex-shrink-0">
+                                  타이틀
+                                </span>
+                              )}
+                            </button>
+                          );
+                        })}
                       </div>
                     </div>
                   ))}