카드 드래그시 원본 카드가 있던 자리를 표시

src/renderer/handlers/drag-drop.js

@@ -1,6 +1,7 @@
 let _grid, _gridContainer, _dragGhostEl, _fileExplorerEl;
 let _state, _cb, _onFolderDrop;
 let _placeholder        = null;
+let _originPlaceholders = [];
 let _dropTargetIdx      = null;
 
 let dragMode    = null;
@@ -75,13 +76,16 @@ function _onDragStart(e) {
     e.dataTransfer.setDragImage(img, 0, 0);
     _showGhost(e, `📦 ${count}개 이동 중`);
 
-    // 브라우저가 드래그 이미지를 캡처한 뒤 카드 숨기고 플레이스홀더 삽입
+    // 브라우저가 드래그 이미지를 캡처한 뒤 카드 숨기고 원본 위치 표시
     requestAnimationFrame(() => {
-      const firstCard = _getCardEl(toHide[0]);
-      if (firstCard) _grid.insertBefore(_placeholder, firstCard);
       toHide.forEach(i => {
         const c = _getCardEl(i);
-        if (c) c.classList.add('drag-hidden');
+        if (c) {
+          const originPh = _createOriginPlaceholder();
+          _grid.insertBefore(originPh, c);
+          _originPlaceholders.push(originPh);
+          c.classList.add('drag-hidden');
+        }
       });
     });
   } else {
@@ -93,7 +97,9 @@ function _onDragStart(e) {
 
     const srcCard = this;
     requestAnimationFrame(() => {
-      _grid.insertBefore(_placeholder, srcCard);
+      const originPh = _createOriginPlaceholder();
+      _grid.insertBefore(originPh, srcCard);
+      _originPlaceholders.push(originPh);
       srcCard.classList.add('drag-hidden');
     });
   }
@@ -144,7 +150,7 @@ function _onDragEnd() {
   _stopScroll();
   _hideGhost();
   _clearTreeHover();
-  // 플레이스홀더 제거 및 숨긴 카드 복원 (_moveSingle/_moveMulti 에서 이미 처리했으면 no-op)
+  _clearOriginPlaceholders();
   if (_placeholder.parentNode) _placeholder.parentNode.removeChild(_placeholder);
   _dropTargetIdx = null;
   document.querySelectorAll('.card').forEach(c =>
@@ -229,8 +235,7 @@ function _onGridDrop(e) {
   if (!dragMode) return;
   if (e.target.closest('.card')) return;
   e.preventDefault();
-  _dropTargetIdx = _state.files.length;
+  _dropTargetIdx = null; // 빈 영역 드롭 → 이동 없이 복원
-  _performDrop();
 }
 
 // ── 이동 로직 ─────────────────────────────────────
@@ -241,6 +246,7 @@ function _moveSingle(srcIdx, targetIdx) {
   _state.files.splice(insertAt, 0, moved);
 
   if (_placeholder.parentNode) _placeholder.parentNode.removeChild(_placeholder);
+  _clearOriginPlaceholders();
   const srcCard    = _getCardEl(srcIdx);
   const targetCard = _getCardEl(targetIdx);
   if (srcCard) srcCard.classList.remove('drag-hidden');
@@ -275,8 +281,8 @@ function _moveMulti(targetIdx) {
   for (let i = 0; i < movedFiles.length; i++) newSel.add(adjustedTarget + i);
   _state.selectedIdxs = newSel;
 
-  // 플레이스홀더 제거, 숨긴 카드 복원 후 DOM 재정렬
   if (_placeholder.parentNode) _placeholder.parentNode.removeChild(_placeholder);
+  _clearOriginPlaceholders();
   const byPath = new Map();
   Array.from(_grid.children).forEach(c => {
     c.classList.remove('drag-hidden');
@@ -357,3 +363,22 @@ function _hideGhost() {
 function _getCardEl(idx) {
   return _grid.querySelector(`.card[data-idx="${idx}"]`);
 }
+
+function _createOriginPlaceholder() {
+  const ph = document.createElement('div');
+  ph.className = 'card card-origin-placeholder';
+  ph.addEventListener('dragover',  e => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; });
+  ph.addEventListener('dragenter', e => e.preventDefault());
+  ph.addEventListener('drop', e => {
+    e.preventDefault();
+    _dropTargetIdx = null; // 원본 위치에 드롭 → 이동 없이 복원
+  });
+  return ph;
+}
+
+function _clearOriginPlaceholders() {
+  _originPlaceholders.forEach(ph => {
+    if (ph.parentNode) ph.parentNode.removeChild(ph);
+  });
+  _originPlaceholders = [];
+}

src/renderer/style.css

@@ -245,6 +245,12 @@ main {
 .card.drag-over { border-color: var(--accent) !important; background: var(--drag-over); }
 .card.drag-hidden { display: none; }
 
+.card-origin-placeholder {
+  border: 2px dashed rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 8px;
+}
+
 .card-placeholder {
   border: 2px dashed var(--accent);
   background: rgba(124, 106, 247, 0.08);