refactor:메뉴 그룹 드래그 UX 개선 - 체크박스 대신 상위 메뉴 자동 감지

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/js/menu-sortable.js

@@ -1,7 +1,7 @@
 /**
  * 메뉴 관리 페이지 전용 SortableJS 초기화 스크립트
  * HTMX hx-boost 네비게이션에서도 동작하도록 전역으로 정의
- * - 그룹 드래그: 체크된 항목들을 함께 이동
+ * - 그룹 드래그: 상위 메뉴 드래그 시 하위 메뉴 자동 포함
  */
 
 // 드래그 상태 관리
@@ -80,23 +80,26 @@ function removeDragIndicator() {
 }
 
 /**
- * 체크된 항목 + 그 하위 메뉴를 재귀적으로 수집
+ * 상위 메뉴 드래그 시 하위 메뉴를 재귀적으로 수집
+ * - 자식이 있는 메뉴(상위 메뉴)를 드래그하면 자동으로 모든 하위 포함
+ * - 자식이 없는 메뉴(리프 메뉴)는 단독 드래그
  */
 function collectGroupItems(draggedRow) {
     const draggedId = draggedRow.dataset.menuId;
-    const checkbox = draggedRow.querySelector('.menu-checkbox');
 
-    // 드래그 항목이 체크 안 되어 있으면 단독 드래그
-    if (!checkbox || !checkbox.checked) return [draggedRow];
+    // 하위 메뉴가 있는지 확인 (DOM에서 data-parent-id로 탐색)
+    const directChildren = document.querySelectorAll(`#menu-sortable tr.menu-row[data-parent-id="${draggedId}"]`);
+    if (directChildren.length === 0) return [draggedRow];
 
-    // 체크된 모든 항목 수집
-    const checkedRows = Array.from(document.querySelectorAll('#menu-sortable .menu-checkbox:checked'))
-        .map(cb => cb.closest('tr.menu-row'))
-        .filter(Boolean);
+    // 드래그 항목 + 모든 하위 메뉴를 재귀적으로 수집
+    const items = [draggedRow];
+    const descendantIds = getDescendantIds(draggedId);
+    descendantIds.forEach(id => {
+        const row = document.querySelector(`#menu-sortable tr.menu-row[data-menu-id="${id}"]`);
+        if (row) items.push(row);
+    });
 
-    if (checkedRows.length <= 1) return [draggedRow];
-
-    return checkedRows;
+    return items;
 }
 
 /**