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

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