미디어 폴더 패널 렌더링 분리

components/admin/AdminMediaFolderPanel.vue

@@ -0,0 +1,170 @@
+<script setup>
+const openMenuId = defineModel('openMenuId', {
+  type: String,
+  default: ''
+})
+
+/** 서버 `MEDIA_THUMBNAIL_ROOT`와 동일한 썸네일 논리 폴더 라벨 */
+const MEDIA_THUMBNAIL_ROOT = '썸네일'
+
+const props = defineProps({
+  activeFolder: {
+    type: String,
+    default: ''
+  },
+  activeSystemMediaCount: {
+    type: Number,
+    default: 0
+  },
+  activeSystemMediaHint: {
+    type: String,
+    default: ''
+  },
+  activeSystemMediaTitle: {
+    type: String,
+    default: ''
+  },
+  folderMediaCounts: {
+    type: Object,
+    default: () => ({})
+  },
+  folders: {
+    type: Array,
+    default: () => []
+  },
+  libraryCount: {
+    type: Number,
+    default: 0
+  },
+  mode: {
+    type: String,
+    default: 'library'
+  },
+  deletingFolder: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits([
+  'create-folder',
+  'drop-folder',
+  'remove-folder',
+  'select-folder'
+])
+
+/**
+ * 논리 폴더 경로가 썸네일 전용 루트인지 확인한다.
+ * @param {string} folder - 폴더 경로
+ * @returns {boolean} 썸네일 전용이면 true
+ */
+const isThumbnailFolderPath = (folder) => folder === MEDIA_THUMBNAIL_ROOT || String(folder).startsWith(`${MEDIA_THUMBNAIL_ROOT}/`)
+
+/**
+ * 폴더 행 메뉴 id를 반환한다.
+ * @param {string} folder - 폴더 경로
+ * @returns {string} 행 메뉴 id
+ */
+const getFolderMenuId = (folder) => `folder:${folder}`
+
+/**
+ * 폴더 경로의 표시 이름을 반환한다.
+ * @param {string} folder - 폴더 경로
+ * @returns {string} 표시 이름
+ */
+const getFolderName = (folder) => String(folder || '').split('/').filter(Boolean).pop() || '미분류'
+
+/**
+ * 폴더 깊이를 반환한다.
+ * @param {string} folder - 폴더 경로
+ * @returns {number} 폴더 깊이
+ */
+const getFolderDepth = (folder) => Math.max(String(folder || '').split('/').filter(Boolean).length - 1, 0)
+</script>
+
+<template>
+  <aside
+    v-if="props.mode === 'library'"
+    class="admin-media-folder-panel admin-media__folders rounded border border-line bg-white p-3"
+  >
+    <button
+      class="admin-media__folder-button flex w-full items-center justify-between rounded px-3 py-2 text-left text-sm font-semibold hover:bg-surface"
+      :class="!props.activeFolder ? 'bg-[#15171a] text-white hover:bg-[#15171a]' : 'text-ink'"
+      type="button"
+      @click="emit('select-folder', '')"
+      @dragover.prevent
+      @drop.prevent="emit('drop-folder', '미분류')"
+    >
+      <span>전체 미디어</span>
+      <span>{{ props.libraryCount }}</span>
+    </button>
+
+    <div class="admin-media__folder-list mt-3 grid gap-1">
+      <div
+        v-for="folder in props.folders"
+        :key="folder"
+        class="admin-media__folder-row flex items-stretch rounded"
+        :class="props.activeFolder === folder ? 'bg-[#15171a] text-white' : 'text-ink hover:bg-surface'"
+      >
+        <button
+          class="admin-media__folder-button flex min-w-0 flex-1 items-center justify-between rounded py-2 pr-3 text-left text-sm"
+          :style="{ paddingLeft: `${12 + getFolderDepth(folder) * 14}px` }"
+          type="button"
+          @click="emit('select-folder', folder)"
+          @dragover.prevent
+          @drop.prevent="emit('drop-folder', folder)"
+        >
+          <span class="admin-media__folder-name min-w-0 truncate">{{ getFolderName(folder) }}</span>
+          <span class="admin-media__folder-count shrink-0 text-xs opacity-70">{{ props.folderMediaCounts[folder] || 0 }}</span>
+        </button>
+        <AdminRowMoreMenu
+          v-if="folder !== '미분류' && !isThumbnailFolderPath(folder)"
+          v-model:open-menu-id="openMenuId"
+          :item-id="getFolderMenuId(folder)"
+          menu-label="폴더 메뉴"
+          size="sm"
+          class="mr-0.5 shrink-0"
+          :inverse="props.activeFolder === folder"
+          :busy="props.deletingFolder === folder"
+        >
+          <button
+            class="admin-row-more-menu__item admin-row-more-menu__item--danger"
+            type="button"
+            role="menuitem"
+            :disabled="props.deletingFolder === folder"
+            @click="emit('remove-folder', folder)"
+          >
+            폴더 삭제
+          </button>
+        </AdminRowMoreMenu>
+      </div>
+    </div>
+
+    <div class="admin-media__folder-actions mt-4 border-t border-line pt-4">
+      <button
+        class="admin-media__folder-add w-full rounded bg-[#15171a] px-3 py-2 text-xs font-semibold text-white"
+        type="button"
+        @click="emit('create-folder')"
+      >
+        폴더 추가
+      </button>
+    </div>
+  </aside>
+
+  <aside
+    v-else
+    class="admin-media-folder-panel admin-media__folders admin-media__folders--thumbnails rounded border border-line bg-white p-3"
+  >
+    <button
+      class="admin-media__folder-button flex w-full items-center justify-between rounded px-3 py-2 text-left text-sm font-semibold bg-[#15171a] text-white hover:bg-[#15171a]"
+      type="button"
+      @click="emit('select-folder', '')"
+    >
+      <span>{{ props.activeSystemMediaTitle }}</span>
+      <span>{{ props.activeSystemMediaCount }}</span>
+    </button>
+    <p class="admin-media__thumb-hint mt-4 text-xs leading-relaxed text-muted">
+      {{ props.activeSystemMediaHint }}
+    </p>
+  </aside>
+</template>