Merge remote-tracking branch 'origin/develop' into develop

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;
 }
 
 /**

resources/views/menus/index.blade.php

@@ -8,7 +8,7 @@
         <div>
             <h1 class="text-2xl font-bold text-gray-800">메뉴 관리</h1>
             <p class="text-sm text-gray-500 mt-1 hidden sm:block" id="modeDescription">
-                드래그: 순서 변경 | <span class="font-medium text-blue-600">→ 오른쪽</span>: 하위로 이동 | <span class="font-medium text-orange-600">← 왼쪽</span>: 상위로 이동
+                드래그: 순서 변경 | <span class="font-medium text-blue-600">→ 오른쪽</span>: 하위로 이동 | <span class="font-medium text-orange-600">← 왼쪽</span>: 상위로 이동 | <span class="font-medium text-purple-600">상위 메뉴 드래그 시 하위 메뉴 자동 포함</span>
             </p>
         </div>
         <div class="flex flex-wrap items-center gap-2 sm:gap-3">
@@ -557,7 +557,7 @@ function initFilterForm() {
             importFilter.classList.add('hidden');
 
             // 설명 복원
-            modeDescription.innerHTML = '드래그: 순서 변경 | <span class="font-medium text-blue-600">→ 오른쪽</span>: 하위로 이동 | <span class="font-medium text-orange-600">← 왼쪽</span>: 상위로 이동';
+            modeDescription.innerHTML = '드래그: 순서 변경 | <span class="font-medium text-blue-600">→ 오른쪽</span>: 하위로 이동 | <span class="font-medium text-orange-600">← 왼쪽</span>: 상위로 이동 | <span class="font-medium text-purple-600">상위 메뉴 드래그 시 하위 메뉴 자동 포함</span>';
         }
 
         // 테이블 새로고침