+ {queue.map((item, index) => {
+ const isDropTarget = dragOverIndex === index && draggingIndex !== index;
+
+ return (
+
{
+ dragItem.current = index;
+ // 🌟 마우스 잔상(고스트)이 까맣게 캡처되는 것을 막기 위한 0초 딜레이 트릭
+ setTimeout(() => setDraggingIndex(index), 0);
+ }}
+ onDragEnter={() => {
+ dragOverItem.current = index;
+ setDragOverIndex(index);
+ }}
+ onDragEnd={handleSort}
+ onDragOver={(e) => e.preventDefault()}
+ className={`relative flex items-center gap-3 group bg-neutral-900/50 p-2 rounded-md transition-all duration-200 ease-in-out cursor-grab active:cursor-grabbing border border-transparent hover:border-neutral-700 my-1
+ ${draggingIndex === index ? 'opacity-30 scale-95 shadow-inner' : 'opacity-100'}
+ ${isDropTarget ? 'mt-10' : 'mt-1'}
+ `}
+ >
+ {/* 초록색 드롭 인디케이터 선 */}
+ {isDropTarget && (
+
+ )}
+
+
+
+
+
+
+ {item.info?.artworkUrl ? (
+

+ ) : null}
+
+
+
+
+ {item.info?.title || "제목 없음"}
+
+
+ {item.info?.author?.replace(" - Topic", "") || "알 수 없는 아티스트"}
+
+
+
+
+
+ );
+ })}
+
+ {/* 🌟 [신규 추가] 맨 아래로 드래그하기 위한 전용 투명 드롭존 */}
+ {draggingIndex !== null && (
+
{
+ dragOverItem.current = queue.length;
+ setDragOverIndex(queue.length);
+ }}
+ onDragOver={(e) => e.preventDefault()}
+ className={`relative h-12 flex items-center justify-center transition-all ${dragOverIndex === queue.length ? 'mt-4' : 'mt-0'
+ }`}
+ >
+ {dragOverIndex === queue.length && (
+
+ )}
-