메뉴 관리: 탭 분리·드래그 정렬·상단 트리·공개 접기 (v0.0.94)

Co-authored-by: Cursor <cursoragent@cursor.com>

pages/admin/navigation/index.vue

@@ -1,31 +1,55 @@
 <script setup>
+import { buildNavigationEditorTree } from '~/lib/navigation-editor-tree.js'
+
 definePageMeta({
   layout: 'admin'
 })
 
 const saving = ref(false)
-const errorMessage = ref('')
-const toast = ref(null)
-let toastTimer = null
+const activeTab = ref('primary')
+const { toast, showToast, clearToast } = useAdminToast()
 
 const { data: navigationItems } = await useFetch('/admin/api/navigation', {
   default: () => []
 })
 
-const items = ref(navigationItems.value.map((item) => ({ ...item })))
+const items = ref(navigationItems.value.map((item) => ({
+  ...item,
+  parentId: item.parentId ?? null,
+  isFolder: Boolean(item.isFolder)
+})))
+
+const navDraggingId = ref('')
+const navDragParentKey = ref('')
+const navDragOverId = ref('')
+
+const footerDraggingId = ref('')
+const footerDragOverId = ref('')
 
 /**
  * 네비게이션 항목을 저장 API와 동일한 형태로 직렬화한다.
  * @param {Array<Object>} list - 항목 목록
  * @returns {string} 비교용 JSON 문자열
  */
-const serializeNavigationItems = (list) => JSON.stringify(list.map((item) => ({
-  label: String(item.label || '').trim(),
-  url: String(item.url || '').trim(),
-  location: item.location,
-  sortOrder: Number(item.sortOrder || 0),
-  isVisible: Boolean(item.isVisible)
-})))
+const serializeNavigationItems = (list) => JSON.stringify(
+  [...list]
+    .sort((a, b) => {
+      if (a.location !== b.location) {
+        return String(a.location).localeCompare(String(b.location))
+      }
+      return (a.sortOrder || 0) - (b.sortOrder || 0)
+    })
+    .map((item) => ({
+      id: String(item.id || '').trim(),
+      label: String(item.label || '').trim(),
+      url: String(item.url || '').trim(),
+      location: item.location,
+      sortOrder: Number(item.sortOrder || 0),
+      isVisible: Boolean(item.isVisible),
+      isFolder: Boolean(item.isFolder),
+      parentId: item.parentId ? String(item.parentId).trim() : null
+    }))
+)
 
 /** 서버에서 불러온 네비게이션 직렬화 스냅샷 */
 const navigationBaseline = ref(serializeNavigationItems(items.value))
@@ -36,43 +60,234 @@ const navigationBaseline = ref(serializeNavigationItems(items.value))
  */
 const isNavigationDirty = computed(() => serializeNavigationItems(items.value) !== navigationBaseline.value)
 
+const primaryTree = computed(() => buildNavigationEditorTree(items.value, 'primary'))
+
+const footerItemsSorted = computed(() =>
+  items.value
+    .filter((item) => item.location === 'footer' && !item.parentId)
+    .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
+)
+
 /**
- * 저장 상태 토스트 표시
- * @param {'success'|'error'|'info'} type - 토스트 타입
- * @param {string} message - 표시 메시지
+ * 하위 항목 id를 모두 모은 뒤 삭제한다.
+ * @param {string} rootId - 루트 id
  * @returns {void}
  */
-const showToast = (type, message) => {
-  window.clearTimeout(toastTimer)
-  toast.value = { type, message }
-  toastTimer = window.setTimeout(() => {
-    toast.value = null
-  }, 3200)
+const removeItemCascade = (rootId) => {
+  const toRemove = new Set([String(rootId)])
+  let growing = true
+  while (growing) {
+    growing = false
+    for (const it of items.value) {
+      const pid = it.parentId ? String(it.parentId) : ''
+      if (pid && toRemove.has(pid) && !toRemove.has(String(it.id))) {
+        toRemove.add(String(it.id))
+        growing = true
+      }
+    }
+  }
+  items.value = items.value.filter((i) => !toRemove.has(String(i.id)))
 }
 
 /**
- * 새 네비게이션 항목 추가
- * @param {'primary'|'footer'} location - 표시 위치
+ * 상단 메뉴 동일 부모 형제 사이에서 순서만 바꾼다.
+ * @param {string|null} parentId - 부모 id
+ * @param {string} sourceId - 이동할 id
+ * @param {string} targetId - 놓인 위치 기준 id
  * @returns {void}
  */
-const addNavigationItem = (location = 'primary') => {
-  items.value.push({
-    id: `new-${Date.now()}`,
-    label: '',
-    url: '/',
-    location,
-    sortOrder: items.value.length * 10 + 10,
-    isVisible: true
+const reorderPrimarySiblings = (parentId, sourceId, targetId) => {
+  const pid = parentId || null
+  const siblings = items.value
+    .filter((i) => i.location === 'primary' && (pid ? i.parentId === pid : !i.parentId))
+    .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
+  const ids = siblings.map((s) => String(s.id))
+  const si = ids.indexOf(String(sourceId))
+  const ti = ids.indexOf(String(targetId))
+  if (si < 0 || ti < 0 || si === ti) {
+    return
+  }
+  const nextOrder = [...siblings]
+  const [mv] = nextOrder.splice(si, 1)
+  nextOrder.splice(ti, 0, mv)
+  nextOrder.forEach((row, idx) => {
+    row.sortOrder = (idx + 1) * 10
   })
 }
 
 /**
- * 네비게이션 항목 삭제
- * @param {number} index - 항목 인덱스
+ * 하단 메뉴 순서 변경
+ * @param {string} sourceId - 이동할 id
+ * @param {string} targetId - 기준 id
  * @returns {void}
  */
-const removeNavigationItem = (index) => {
-  items.value.splice(index, 1)
+const reorderFooter = (sourceId, targetId) => {
+  const list = footerItemsSorted.value.map((i) => i)
+  const ids = list.map((s) => String(s.id))
+  const si = ids.indexOf(String(sourceId))
+  const ti = ids.indexOf(String(targetId))
+  if (si < 0 || ti < 0 || si === ti) {
+    return
+  }
+  const [mv] = list.splice(si, 1)
+  list.splice(ti, 0, mv)
+  list.forEach((row, idx) => {
+    row.sortOrder = (idx + 1) * 10
+  })
+}
+
+/**
+ * 상단 트리 드래그 시작
+ * @param {{ parentKey: string, itemId: string }} payload - 부모 키와 항목 id
+ * @returns {void}
+ */
+const onPrimaryDragStart = ({ parentKey, itemId }) => {
+  navDragParentKey.value = parentKey
+  navDraggingId.value = itemId
+}
+
+/**
+ * 상단 트리 드래그 오버
+ * @param {string} itemId - 항목 id
+ * @returns {void}
+ */
+const onPrimaryDragOver = (itemId) => {
+  navDragOverId.value = itemId
+}
+
+/**
+ * 상단 트리 드래그 종료
+ * @returns {void}
+ */
+const onPrimaryDragEnd = () => {
+  navDraggingId.value = ''
+  navDragParentKey.value = ''
+  navDragOverId.value = ''
+}
+
+/**
+ * 상단 트리 드롭
+ * @param {{ parentKey: string, targetId: string }} payload - 부모 키와 대상 id
+ * @returns {void}
+ */
+const onPrimaryDrop = ({ parentKey, targetId }) => {
+  if (navDragParentKey.value !== parentKey) {
+    showToast('error', '같은 단계의 메뉴 안에서만 순서를 바꿀 수 있습니다.')
+    onPrimaryDragEnd()
+    return
+  }
+  const parentId = parentKey === 'root' ? null : parentKey
+  reorderPrimarySiblings(parentId, navDraggingId.value, targetId)
+  onPrimaryDragEnd()
+}
+
+/**
+ * 하단 행 드래그 시작
+ * @param {DragEvent} event - 이벤트
+ * @param {string} id - 항목 id
+ * @returns {void}
+ */
+const onFooterDragStart = (event, id) => {
+  if (!event.dataTransfer) {
+    return
+  }
+  footerDraggingId.value = id
+  event.dataTransfer.effectAllowed = 'move'
+}
+
+/**
+ * 하단 행 드래그 오버
+ * @param {DragEvent} event - 이벤트
+ * @param {string} id - 항목 id
+ * @returns {void}
+ */
+const onFooterDragOver = (event, id) => {
+  event.preventDefault()
+  footerDragOverId.value = id
+}
+
+/**
+ * 하단 행 드롭
+ * @param {DragEvent} event - 이벤트
+ * @param {string} targetId - 대상 id
+ * @returns {void}
+ */
+const onFooterDrop = (event, targetId) => {
+  event.preventDefault()
+  if (!footerDraggingId.value) {
+    return
+  }
+  reorderFooter(footerDraggingId.value, targetId)
+  footerDraggingId.value = ''
+  footerDragOverId.value = ''
+}
+
+/**
+ * 하단 드래그 종료
+ * @returns {void}
+ */
+const onFooterDragEnd = () => {
+  footerDraggingId.value = ''
+  footerDragOverId.value = ''
+}
+
+/**
+ * 상단 루트 항목 추가
+ * @returns {void}
+ */
+const addPrimaryRoot = () => {
+  const roots = items.value.filter((i) => i.location === 'primary' && !i.parentId)
+  const maxOrder = Math.max(0, ...roots.map((r) => r.sortOrder || 0))
+  items.value.push({
+    id: crypto.randomUUID(),
+    label: '새 메뉴',
+    url: '/',
+    location: 'primary',
+    parentId: null,
+    sortOrder: maxOrder + 10,
+    isVisible: true,
+    isFolder: false
+  })
+}
+
+/**
+ * 상단 특정 항목의 하위 추가
+ * @param {string} parentId - 부모 id
+ * @returns {void}
+ */
+const addPrimaryChild = (parentId) => {
+  const pid = String(parentId)
+  const siblings = items.value.filter((i) => i.location === 'primary' && String(i.parentId || '') === pid)
+  const maxOrder = Math.max(0, ...siblings.map((r) => r.sortOrder || 0))
+  items.value.push({
+    id: crypto.randomUUID(),
+    label: '새 하위 메뉴',
+    url: '#',
+    location: 'primary',
+    parentId: pid,
+    sortOrder: maxOrder + 10,
+    isVisible: true,
+    isFolder: false
+  })
+}
+
+/**
+ * 하단 항목 추가
+ * @returns {void}
+ */
+const addFooterItem = () => {
+  const list = items.value.filter((i) => i.location === 'footer' && !i.parentId)
+  const maxOrder = Math.max(0, ...list.map((r) => r.sortOrder || 0))
+  items.value.push({
+    id: crypto.randomUUID(),
+    label: '',
+    url: '/',
+    location: 'footer',
+    parentId: null,
+    sortOrder: maxOrder + 10,
+    isVisible: true,
+    isFolder: false
+  })
 }
 
 /**
@@ -85,7 +300,7 @@ const saveNavigation = async () => {
   }
 
   saving.value = true
-  errorMessage.value = ''
+  clearToast()
   showToast('info', '네비게이션을 저장하는 중입니다.')
 
   try {
@@ -93,34 +308,36 @@ const saveNavigation = async () => {
       method: 'PUT',
       body: {
         items: items.value.map((item) => ({
+          id: item.id,
           label: item.label,
           url: item.url,
           location: item.location,
           sortOrder: Number(item.sortOrder || 0),
-          isVisible: Boolean(item.isVisible)
+          isVisible: Boolean(item.isVisible),
+          parentId: item.parentId ?? null,
+          isFolder: Boolean(item.isFolder)
         }))
       }
     })
 
-    items.value = savedItems.map((item) => ({ ...item }))
+    items.value = savedItems.map((item) => ({
+      ...item,
+      parentId: item.parentId ?? null,
+      isFolder: Boolean(item.isFolder)
+    }))
     navigationBaseline.value = serializeNavigationItems(items.value)
     showToast('success', '네비게이션이 저장되었습니다.')
   } catch (error) {
-    errorMessage.value = error?.data?.message || '네비게이션을 저장하지 못했습니다.'
-    showToast('error', errorMessage.value)
+    showToast('error', error?.data?.message || '네비게이션을 저장하지 못했습니다.')
   } finally {
     saving.value = false
   }
 }
-
-onBeforeUnmount(() => {
-  window.clearTimeout(toastTimer)
-})
 </script>
 
 <template>
   <section class="admin-navigation bg-paper p-6">
-    <div class="admin-navigation__header mb-8 flex items-start justify-between gap-4">
+    <div class="admin-navigation__header mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
       <div>
         <p class="admin-navigation__eyebrow text-xs font-semibold uppercase text-muted">
           Navigation
@@ -128,99 +345,136 @@ onBeforeUnmount(() => {
         <h1 class="admin-navigation__title mt-2 text-3xl font-semibold">
           메뉴 관리
         </h1>
+        <p class="admin-navigation__lead mt-2 max-w-xl text-sm text-muted">
+          상단·하단을 탭으로 나누어 편집합니다. 상단은 드래그(::)로 같은 단계끼리 순서를 바꿀 수 있고, 폴더·하위 메뉴를 둘 수 있습니다. 하단은 한 줄 목록만 지원합니다.
+        </p>
       </div>
       <div class="admin-navigation__header-actions flex flex-wrap gap-2">
-        <button class="admin-navigation__add rounded border border-line bg-white px-4 py-2 text-sm font-semibold" type="button" @click="addNavigationItem('primary')">
-          상단 메뉴 추가
-        </button>
-        <button class="admin-navigation__add rounded border border-line bg-white px-4 py-2 text-sm font-semibold" type="button" @click="addNavigationItem('footer')">
-          하단 메뉴 추가
-        </button>
-      </div>
-    </div>
-
-    <p v-if="errorMessage" class="admin-navigation__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-      {{ errorMessage }}
-    </p>
-
-    <form class="admin-navigation__form grid gap-5" @submit.prevent="saveNavigation">
-      <div class="admin-navigation__table overflow-hidden border border-line bg-white">
-        <table class="admin-navigation__table-inner w-full border-collapse text-left text-sm">
-          <thead class="admin-navigation__table-head bg-[#f5f5f2] text-xs uppercase text-muted">
-            <tr>
-              <th class="admin-navigation__cell px-4 py-3">표시</th>
-              <th class="admin-navigation__cell px-4 py-3">라벨</th>
-              <th class="admin-navigation__cell px-4 py-3">URL</th>
-              <th class="admin-navigation__cell px-4 py-3">위치</th>
-              <th class="admin-navigation__cell px-4 py-3">순서</th>
-              <th class="admin-navigation__cell px-4 py-3">관리</th>
-            </tr>
-          </thead>
-          <tbody class="admin-navigation__table-body divide-y divide-line">
-            <tr v-for="(item, index) in items" :key="item.id || index" class="admin-navigation__row">
-              <td class="admin-navigation__cell px-4 py-3">
-                <input v-model="item.isVisible" class="admin-navigation__checkbox h-4 w-4" type="checkbox">
-              </td>
-              <td class="admin-navigation__cell px-4 py-3">
-                <input
-                  v-model="item.label"
-                  class="admin-navigation__input w-full rounded border border-line px-3 py-2"
-                  type="text"
-                  required
-                >
-              </td>
-              <td class="admin-navigation__cell px-4 py-3">
-                <input
-                  v-model="item.url"
-                  class="admin-navigation__input w-full rounded border border-line px-3 py-2"
-                  type="text"
-                  required
-                  pattern="^(\/|https?:\/\/).*"
-                >
-              </td>
-              <td class="admin-navigation__cell px-4 py-3">
-                <select v-model="item.location" class="admin-navigation__select rounded border border-line px-3 py-2">
-                  <option value="primary">상단</option>
-                  <option value="footer">하단</option>
-                </select>
-              </td>
-              <td class="admin-navigation__cell px-4 py-3">
-                <input
-                  v-model.number="item.sortOrder"
-                  class="admin-navigation__sort w-24 rounded border border-line px-3 py-2"
-                  type="number"
-                  min="0"
-                  step="1"
-                >
-              </td>
-              <td class="admin-navigation__cell px-4 py-3">
-                <button class="admin-navigation__remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700" type="button" @click="removeNavigationItem(index)">
-                  삭제
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <p v-if="items.length === 0" class="admin-navigation__empty rounded border border-dashed border-line bg-white p-8 text-center text-sm text-muted">
-        메뉴 항목이 없습니다.
-      </p>
-
-      <div class="admin-navigation__actions flex justify-end border-t border-line pt-5">
         <button
           class="admin-navigation__submit rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-          type="submit"
+          type="button"
           :disabled="saving || !isNavigationDirty"
+          @click="saveNavigation"
         >
           {{ saving ? '저장 중' : '메뉴 저장' }}
         </button>
       </div>
-    </form>
+    </div>
+
+    <div class="admin-navigation__tabs mb-6 flex gap-2 border-b border-line">
+      <button
+        class="admin-navigation__tab -mb-px border-b-2 px-4 py-2 text-sm font-semibold transition-colors"
+        :class="activeTab === 'primary' ? 'border-ink text-ink' : 'border-transparent text-muted hover:text-ink'"
+        type="button"
+        @click="activeTab = 'primary'"
+      >
+        상단 네비게이션
+      </button>
+      <button
+        class="admin-navigation__tab -mb-px border-b-2 px-4 py-2 text-sm font-semibold transition-colors"
+        :class="activeTab === 'footer' ? 'border-ink text-ink' : 'border-transparent text-muted hover:text-ink'"
+        type="button"
+        @click="activeTab = 'footer'"
+      >
+        하단 네비게이션
+      </button>
+    </div>
+
+    <div v-show="activeTab === 'primary'" class="admin-navigation__panel-primary space-y-4">
+      <div class="flex flex-wrap gap-2">
+        <button
+          class="admin-navigation__add rounded border border-line bg-white px-4 py-2 text-sm font-semibold"
+          type="button"
+          @click="addPrimaryRoot"
+        >
+          상단 메뉴 추가
+        </button>
+      </div>
+
+      <div v-if="primaryTree.length === 0" class="admin-navigation__empty rounded border border-dashed border-line bg-white p-8 text-center text-sm text-muted">
+        상단 메뉴가 없습니다. 위 버튼으로 항목을 추가하세요.
+      </div>
+
+      <AdminNavPrimaryBranch
+        v-else
+        :wraps="primaryTree"
+        parent-key="root"
+        :dragging-id="navDraggingId"
+        :drag-over-id="navDragOverId"
+        @drag-start="onPrimaryDragStart"
+        @drag-over="onPrimaryDragOver"
+        @drag-end="onPrimaryDragEnd"
+        @drop="onPrimaryDrop"
+        @add-child="addPrimaryChild"
+        @remove="removeItemCascade"
+      />
+    </div>
+
+    <div v-show="activeTab === 'footer'" class="admin-navigation__panel-footer space-y-4">
+      <div class="flex flex-wrap gap-2">
+        <button
+          class="admin-navigation__add rounded border border-line bg-white px-4 py-2 text-sm font-semibold"
+          type="button"
+          @click="addFooterItem"
+        >
+          하단 메뉴 추가
+        </button>
+      </div>
+
+      <div v-if="footerItemsSorted.length === 0" class="admin-navigation__empty rounded border border-dashed border-line bg-white p-8 text-center text-sm text-muted">
+        하단 메뉴가 없습니다.
+      </div>
+
+      <ul v-else class="admin-navigation__footer-list space-y-2 rounded border border-line bg-white p-4">
+        <li
+          v-for="item in footerItemsSorted"
+          :key="item.id"
+          class="admin-navigation__footer-row flex flex-wrap items-center gap-2 rounded border border-transparent px-2 py-2 transition-colors"
+          :class="footerDragOverId === item.id ? 'border-ink/20 bg-[#f5f5f2]' : ''"
+        >
+          <span
+            class="admin-navigation__footer-handle cursor-grab select-none text-muted active:cursor-grabbing"
+            draggable="true"
+            title="드래그하여 순서 변경"
+            @dragstart="onFooterDragStart($event, item.id)"
+            @dragover="onFooterDragOver($event, item.id)"
+            @drop="onFooterDrop($event, item.id)"
+            @dragend="onFooterDragEnd"
+          >
+            ::
+          </span>
+          <label class="flex items-center gap-1 text-xs text-muted">
+            <input v-model="item.isVisible" class="h-4 w-4" type="checkbox">
+            표시
+          </label>
+          <input
+            v-model="item.label"
+            class="min-w-[100px] flex-1 rounded border border-line px-2 py-1.5 text-sm"
+            type="text"
+            placeholder="라벨"
+            required
+          >
+          <input
+            v-model="item.url"
+            class="min-w-[140px] flex-1 rounded border border-line px-2 py-1.5 text-sm font-mono"
+            type="text"
+            placeholder="URL"
+            required
+          >
+          <button
+            class="rounded border border-red-200 px-2 py-1 text-xs font-semibold text-red-700"
+            type="button"
+            @click="removeItemCascade(item.id)"
+          >
+            삭제
+          </button>
+        </li>
+      </ul>
+    </div>
 
     <div
       v-if="toast"
-      class="admin-navigation__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"
+      class="admin-navigation__toast fixed right-5 top-5 z-[100] max-w-sm rounded border px-4 py-3 text-sm font-semibold shadow-lg"
       :class="{
         'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
         'border-red-200 bg-red-50 text-red-800': toast.type === 'error',