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 }) { {/* 트랙 목록 */}
- {group.tracks.map((track) => ( -
- - {track.trackNumber} - - - {track.songName} - - {!!track.isTitleTrack && ( - - 타이틀 +
+ {order ?? ""} +
+ + {track.trackNumber} - )} - - ))} + + {track.songName} + + {!!track.isTitleTrack && ( + + 타이틀 + + )} + + ); + })} ))}