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

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

components/admin/AdminNavPrimaryBranch.vue

@@ -0,0 +1,160 @@
+<script setup>
+import AdminNavPrimaryBranch from './AdminNavPrimaryBranch.vue'
+
+const props = defineProps({
+  /** buildNavigationEditorTree 결과 */
+  wraps: {
+    type: Array,
+    required: true
+  },
+  /** 들여쓰기 단계 */
+  depth: {
+    type: Number,
+    default: 0
+  },
+  /** 루트면 `'root'`, 아니면 부모 항목 id */
+  parentKey: {
+    type: String,
+    default: 'root'
+  },
+  /** 드래그 중인 항목 id */
+  draggingId: {
+    type: String,
+    default: ''
+  },
+  /** 드롭 대상 위에 올린 항목 id */
+  dragOverId: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits([
+  'drag-start',
+  'drag-over',
+  'drag-end',
+  'drop',
+  'add-child',
+  'remove'
+])
+
+/**
+ * 드래그 시작
+ * @param {DragEvent} event - 이벤트
+ * @param {string} itemId - 항목 id
+ * @returns {void}
+ */
+const onDragStart = (event, itemId) => {
+  if (!event.dataTransfer) {
+    return
+  }
+  emit('drag-start', { parentKey: props.parentKey, itemId })
+  event.dataTransfer.effectAllowed = 'move'
+}
+
+/**
+ * 드래그 오버
+ * @param {DragEvent} event - 이벤트
+ * @param {string} itemId - 항목 id
+ * @returns {void}
+ */
+const onDragOver = (event, itemId) => {
+  event.preventDefault()
+  emit('drag-over', itemId)
+}
+
+/**
+ * 드롭
+ * @param {DragEvent} event - 이벤트
+ * @param {string} itemId - 대상 id
+ * @returns {void}
+ */
+const onDrop = (event, itemId) => {
+  event.preventDefault()
+  emit('drop', { parentKey: props.parentKey, targetId: itemId })
+}
+
+/**
+ * 드래그 종료
+ * @returns {void}
+ */
+const onDragEnd = () => {
+  emit('drag-end')
+}
+</script>
+
+<template>
+  <ul class="admin-nav-primary-branch space-y-2" :class="depth ? 'mt-1 border-l border-line pl-3' : ''">
+    <li
+      v-for="wrap in wraps"
+      :key="wrap.item.id"
+      class="admin-nav-primary-branch__row rounded border border-transparent bg-white px-2 py-2 transition-colors"
+        :class="dragOverId === wrap.item.id ? 'border-ink/20 bg-[#f5f5f2]' : draggingId === wrap.item.id ? 'opacity-60' : ''"
+    >
+      <div class="admin-nav-primary-branch__controls flex flex-wrap items-center gap-2" :style="{ paddingLeft: `${depth * 4}px` }">
+        <span
+          class="admin-nav-primary-branch__handle cursor-grab select-none text-muted active:cursor-grabbing"
+          draggable="true"
+          title="드래그하여 순서 변경"
+          @dragstart="onDragStart($event, wrap.item.id)"
+          @dragover="onDragOver($event, wrap.item.id)"
+          @drop="onDrop($event, wrap.item.id)"
+          @dragend="onDragEnd"
+        >
+          ::
+        </span>
+        <label class="admin-nav-primary-branch__visible flex items-center gap-1 text-xs text-muted">
+          <input v-model="wrap.item.isVisible" class="h-4 w-4" type="checkbox">
+          표시
+        </label>
+        <label class="admin-nav-primary-branch__folder flex items-center gap-1 text-xs text-muted">
+          <input v-model="wrap.item.isFolder" class="h-4 w-4" type="checkbox">
+          폴더
+        </label>
+        <input
+          v-model="wrap.item.label"
+          class="admin-nav-primary-branch__label min-w-[120px] flex-1 rounded border border-line px-2 py-1.5 text-sm"
+          type="text"
+          placeholder="라벨"
+          required
+        >
+        <input
+          v-model="wrap.item.url"
+          class="admin-nav-primary-branch__url min-w-[160px] flex-1 rounded border border-line px-2 py-1.5 text-sm font-mono"
+          type="text"
+          placeholder="URL (# 또는 /경로)"
+          required
+        >
+        <button
+          class="admin-nav-primary-branch__add-child rounded border border-line px-2 py-1 text-xs font-semibold"
+          type="button"
+          @click="emit('add-child', wrap.item.id)"
+        >
+          하위
+        </button>
+        <button
+          class="admin-nav-primary-branch__remove rounded border border-red-200 px-2 py-1 text-xs font-semibold text-red-700"
+          type="button"
+          @click="emit('remove', wrap.item.id)"
+        >
+          삭제
+        </button>
+      </div>
+      <AdminNavPrimaryBranch
+        v-if="wrap.children.length"
+        class="admin-nav-primary-branch__children mt-2"
+        :wraps="wrap.children"
+        :depth="depth + 1"
+        :parent-key="String(wrap.item.id)"
+        :dragging-id="draggingId"
+        :drag-over-id="dragOverId"
+        @drag-start="emit('drag-start', $event)"
+        @drag-over="emit('drag-over', $event)"
+        @drag-end="emit('drag-end')"
+        @drop="emit('drop', $event)"
+        @add-child="emit('add-child', $event)"
+        @remove="emit('remove', $event)"
+      />
+    </li>
+  </ul>
+</template>