v1.12.21 관리자 미디어 조작 개선 및 CSP 관찰 안내 정리

2026-09-28 16:52:14 +09:00
parent 5482318b84
commit 6886c57d04
18 changed files with 488 additions and 60 deletions
--- a/components/admin/AdminMediaFolderPanel.vue
+++ b/components/admin/AdminMediaFolderPanel.vue
@@ -43,6 +43,14 @@ const props = defineProps({
  deletingFolder: {
    type: String,
    default: ''
+  },
+  draggingCount: {
+    type: Number,
+    default: 0
+  },
+  busy: {
+    type: Boolean,
+    default: false
  }
 })

@@ -53,6 +61,8 @@ const emit = defineEmits([
  'select-folder'
 ])

+const hoveredFolder = ref(null)
+
 /**
 * 논리 폴더 경로가 썸네일 전용 루트인지 확인한다.
 * @param {string} folder - 폴더 경로
@@ -80,6 +90,54 @@ const getFolderName = (folder) => String(folder || '').split('/').filter(Boolean
 * @returns {number} 폴더 깊이
 */
 const getFolderDepth = (folder) => Math.max(String(folder || '').split('/').filter(Boolean).length - 1, 0)
+
+/**
+ * 내부 미디어 드래그만 폴더 이동 대상으로 허용한다.
+ * @param {DragEvent} event - 드래그 이벤트
+ * @param {string} folder - 대상 폴더
+ * @returns {void}
+ */
+const onFolderDragOver = (event, folder) => {
+  if (!props.draggingCount || props.busy || isThumbnailFolderPath(folder) || (props.deletingFolder && props.deletingFolder === folder)) {
+    return
+  }
+  event.preventDefault()
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
+  hoveredFolder.value = folder
+}
+
+/**
+ * 폴더 내부 요소 간 이동을 제외하고 드롭 강조를 해제한다.
+ * @param {DragEvent} event - 드래그 이탈 이벤트
+ * @returns {void}
+ */
+const onFolderDragLeave = (event) => {
+  if (!event.currentTarget.contains(event.relatedTarget)) {
+    hoveredFolder.value = null
+  }
+}
+
+/**
+ * 유효한 내부 드래그에 한해 폴더 이동을 요청한다.
+ * @param {DragEvent} event - 드롭 이벤트
+ * @param {string} folder - 대상 폴더
+ * @returns {void}
+ */
+const onFolderDrop = (event, folder) => {
+  event.preventDefault()
+  hoveredFolder.value = null
+  if (props.draggingCount && !props.busy && !isThumbnailFolderPath(folder) && props.deletingFolder !== folder) {
+    emit('drop-folder', folder)
+  }
+}
+
+watch(() => props.draggingCount, (count) => {
+  if (!count) {
+    hoveredFolder.value = null
+  }
+})
 </script>

 <template>
@@ -89,13 +147,19 @@ const getFolderDepth = (folder) => Math.max(String(folder || '').split('/').filt
  >
    <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'"
+      :class="hoveredFolder === '' ? 'bg-sky-50 text-sky-900 ring-2 ring-inset ring-sky-500 hover:bg-sky-50' : !props.activeFolder ? 'bg-[#15171a] text-white hover:bg-[#15171a]' : 'text-ink'"
      type="button"
+      :disabled="props.busy"
      @click="emit('select-folder', '')"
-      @dragover.prevent
-      @drop.prevent="emit('drop-folder', '미분류')"
+      @dragenter="onFolderDragOver($event, '')"
+      @dragover="onFolderDragOver($event, '')"
+      @dragleave="onFolderDragLeave"
+      @drop="onFolderDrop($event, '미분류')"
    >
-      <span>전체 미디어</span>
+      <span>
+        전체 미디어
+        <span v-if="hoveredFolder === ''" class="admin-media__folder-drop-hint mt-1 block text-xs font-semibold">놓으면 {{ props.draggingCount }}개를 미분류로 이동</span>
+      </span>
      <span>{{ props.libraryCount }}</span>
    </button>

@@ -103,18 +167,26 @@ const getFolderDepth = (folder) => Math.max(String(folder || '').split('/').filt
      <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'"
+        class="admin-media__folder-row flex items-stretch rounded transition-colors"
+        :class="hoveredFolder === folder ? 'admin-media__folder-row--drop-target bg-sky-50 text-sky-900 ring-2 ring-inset ring-sky-500' : props.activeFolder === folder ? 'bg-[#15171a] text-white' : 'text-ink hover:bg-surface'"
+        @dragenter="onFolderDragOver($event, folder)"
+        @dragover="onFolderDragOver($event, folder)"
+        @dragleave="onFolderDragLeave"
+        @drop="onFolderDrop($event, folder)"
      >
        <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"
+          :disabled="props.busy"
+          :title="folder"
+          :aria-current="props.activeFolder === folder ? 'true' : undefined"
          @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-label min-w-0">
+            <span class="admin-media__folder-name block truncate">{{ getFolderName(folder) }}</span>
+            <span v-if="hoveredFolder === folder" class="admin-media__folder-drop-hint mt-1 block text-xs font-semibold">놓으면 {{ props.draggingCount }}개 이동</span>
+          </span>
          <span class="admin-media__folder-count shrink-0 text-xs opacity-70">{{ props.folderMediaCounts[folder] || 0 }}</span>
        </button>
        <AdminRowMoreMenu
@@ -124,14 +196,14 @@ const getFolderDepth = (folder) => Math.max(String(folder || '').split('/').filt
          menu-label="폴더 메뉴"
          size="sm"
          class="mr-0.5 shrink-0"
-          :inverse="props.activeFolder === folder"
-          :busy="props.deletingFolder === folder"
+          :inverse="props.activeFolder === folder && hoveredFolder !== folder"
+          :busy="props.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"
+            :disabled="props.busy || props.deletingFolder === folder"
            @click="emit('remove-folder', folder)"
          >
            폴더 삭제
@@ -144,6 +216,7 @@ const getFolderDepth = (folder) => Math.max(String(folder || '').split('/').filt
      <button
        class="admin-media__folder-add w-full rounded bg-[#15171a] px-3 py-2 text-xs font-semibold text-white"
        type="button"
+        :disabled="props.busy"
        @click="emit('create-folder')"
      >
        폴더 추가
--- a/components/admin/AdminMediaGrid.vue
+++ b/components/admin/AdminMediaGrid.vue
@@ -31,11 +31,20 @@ const props = defineProps({
  selectedUrls: {
    type: Array,
    default: () => []
+  },
+  draggingUrls: {
+    type: Array,
+    default: () => []
+  },
+  disabled: {
+    type: Boolean,
+    default: false
  }
 })

 const emit = defineEmits([
  'drag-start',
+  'drag-end',
  'image-error',
  'open-detail',
  'toggle-selection'
@@ -55,9 +64,16 @@ const isMediaSelected = (item) => props.selectedUrls.includes(item?.url)
      v-for="(item, index) in props.items"
      :key="item.url"
      class="admin-media__item group relative overflow-hidden border border-line bg-white text-left outline-none transition hover:border-[#15171a]"
-      :draggable="props.activeTab === 'library'"
+      :class="[
+        isMediaSelected(item) ? 'admin-media__item--selected' : '',
+        props.draggingUrls.includes(item.url) ? 'admin-media__item--dragging opacity-40' : '',
+        props.disabled ? 'opacity-60' : props.activeTab === 'library' ? 'cursor-grab active:cursor-grabbing' : ''
+      ]"
+      :draggable="props.activeTab === 'library' && !props.disabled"
      @dragstart="emit('drag-start', $event, item)"
+      @dragend="emit('drag-end')"
    >
+      <span v-if="isMediaSelected(item)" class="admin-media__selection-outline pointer-events-none absolute inset-0 z-20 border-2 border-sky-600" aria-hidden="true" />
      <button
        type="button"
        class="admin-media__select-toggle absolute left-1.5 top-1.5 z-10 grid size-7 place-items-center rounded-md border-2 shadow-md outline-none transition focus-visible:ring-2 focus-visible:ring-[#15171a] focus-visible:ring-offset-1"
@@ -66,6 +82,7 @@ const isMediaSelected = (item) => props.selectedUrls.includes(item?.url)
          : 'border-[#394047] bg-white/95 text-[#15171a] hover:border-[#15171a] hover:bg-white'"
        :aria-label="`${item.name} 선택`"
        :aria-pressed="isMediaSelected(item)"
+        :disabled="props.disabled"
        @click.stop="emit('toggle-selection', item, index, $event)"
      >
        <svg
@@ -86,6 +103,7 @@ const isMediaSelected = (item) => props.selectedUrls.includes(item?.url)
      <button
        class="admin-media__thumb flex w-full flex-col text-left outline-none"
        type="button"
+        :disabled="props.disabled"
        @click="emit('open-detail', item)"
      >
        <span class="admin-media__thumb-frame relative block w-full overflow-hidden">
@@ -96,6 +114,7 @@ const isMediaSelected = (item) => props.selectedUrls.includes(item?.url)
            :alt="item.title"
            loading="lazy"
            decoding="async"
+            :draggable="false"
            @error="emit('image-error', $event, item)"
          >
          <AdminMediaVideoThumbnail
--- a/components/admin/AdminMediaVideoThumbnail.vue
+++ b/components/admin/AdminMediaVideoThumbnail.vue
@@ -77,6 +77,7 @@ const seekPreviewFrame = () => {
      :src="thumbnailUrl"
      :alt="alt"
      loading="lazy"
+      :draggable="false"
    >
    <span
      v-else