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

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')"
       >
         폴더 추가