관리자 미디어 라이브러리 기본 기능 추가

components/admin/AdminBlockEditor.vue

@@ -16,6 +16,10 @@ const slashMenuDirection = ref('down')
 const highlightedCommandIndex = ref(0)
 const isApplyingExternalValue = ref(false)
 const uploadingBlockIds = ref([])
+const mediaItems = ref([])
+const mediaPickerTarget = ref(null)
+const isMediaPickerOpen = ref(false)
+const isLoadingMedia = ref(false)
 let blockIdSeed = 0
 
 const imageWidthOptions = [
@@ -602,6 +606,73 @@ const uploadImages = async (files) => {
   return result.files || []
 }
 
+/**
+ * 미디어 라이브러리 목록 조회
+ * @returns {Promise<void>}
+ */
+const fetchMediaItems = async () => {
+  isLoadingMedia.value = true
+
+  try {
+    mediaItems.value = await $fetch('/admin/api/media')
+  } finally {
+    isLoadingMedia.value = false
+  }
+}
+
+/**
+ * 미디어 선택 창 열기
+ * @param {Object} block - 대상 블록
+ * @returns {Promise<void>}
+ */
+const openMediaPicker = async (block) => {
+  mediaPickerTarget.value = {
+    blockId: block.id,
+    type: block.type
+  }
+  isMediaPickerOpen.value = true
+  await fetchMediaItems()
+}
+
+/**
+ * 미디어 선택 창 닫기
+ * @returns {void}
+ */
+const closeMediaPicker = () => {
+  isMediaPickerOpen.value = false
+  mediaPickerTarget.value = null
+}
+
+/**
+ * 선택한 미디어를 블록에 적용
+ * @param {Object} mediaItem - 미디어 항목
+ * @returns {void}
+ */
+const selectMediaItem = (mediaItem) => {
+  const block = editorBlocks.value.find((item) => item.id === mediaPickerTarget.value?.blockId)
+
+  if (!block) {
+    return
+  }
+
+  if (mediaPickerTarget.value.type === 'gallery') {
+    block.images = [
+      ...block.images,
+      {
+        url: mediaItem.url,
+        alt: mediaItem.title,
+        width: 'regular'
+      }
+    ]
+  } else {
+    block.url = mediaItem.url
+    block.alt = mediaItem.title
+  }
+
+  emitContent()
+  closeMediaPicker()
+}
+
 /**
  * 단일 이미지 파일 선택 처리
  * @param {Event} event - 파일 입력 이벤트
@@ -852,6 +923,13 @@ defineExpose({
           <div v-if="block.url" class="admin-block-editor__image-frame relative overflow-hidden rounded bg-surface">
             <img class="admin-block-editor__image w-full object-cover" :src="block.url" :alt="block.alt">
             <div class="admin-block-editor__media-toolbar absolute inset-x-3 top-3 flex flex-wrap items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100 group-focus:opacity-100">
+              <button
+                class="admin-block-editor__media-option rounded bg-white/95 px-3 py-1 text-xs font-semibold text-ink shadow"
+                type="button"
+                @click="openMediaPicker(block)"
+              >
+                미디어 선택
+              </button>
               <button
                 v-for="option in imageWidthOptions"
                 :key="option.value"
@@ -864,13 +942,15 @@ defineExpose({
               </button>
             </div>
           </div>
-          <label
-            v-else
-            class="admin-block-editor__upload grid cursor-pointer place-items-center rounded border border-dashed border-line bg-surface px-6 py-14 text-center text-sm font-semibold text-muted"
-          >
-            {{ isUploading(block.id) ? '업로드 중' : '이미지 업로드' }}
-            <input class="sr-only" type="file" accept="image/*" @change="handleImageUpload($event, block)">
-          </label>
+          <div v-else class="admin-block-editor__upload grid gap-3 rounded border border-dashed border-line bg-surface px-6 py-14 text-center text-sm font-semibold text-muted">
+            <button class="admin-block-editor__media-select rounded border border-line bg-white px-3 py-2 text-ink" type="button" @click="openMediaPicker(block)">
+              미디어 선택
+            </button>
+            <label class="admin-block-editor__upload-label cursor-pointer rounded bg-[#15171a] px-3 py-2 text-white">
+              {{ isUploading(block.id) ? '업로드 중' : '새 이미지 업로드' }}
+              <input class="sr-only" type="file" accept="image/*" @change="handleImageUpload($event, block)">
+            </label>
+          </div>
           <input
             v-if="block.url"
             v-model="block.alt"
@@ -906,10 +986,15 @@ defineExpose({
               </button>
             </div>
           </div>
-          <label class="admin-block-editor__gallery-upload mt-3 inline-flex cursor-pointer rounded border border-line bg-white px-3 py-2 text-sm font-semibold text-ink">
-            {{ isUploading(block.id) ? '업로드 중' : block.images.length ? '이미지 추가' : '갤러리 이미지 업로드' }}
-            <input class="sr-only" type="file" accept="image/*" multiple @change="handleGalleryUpload($event, block)">
-          </label>
+          <div class="admin-block-editor__gallery-actions mt-3 flex flex-wrap gap-2">
+            <button class="admin-block-editor__gallery-select rounded border border-line bg-white px-3 py-2 text-sm font-semibold text-ink" type="button" @click="openMediaPicker(block)">
+              미디어 선택
+            </button>
+            <label class="admin-block-editor__gallery-upload inline-flex cursor-pointer rounded bg-[#15171a] px-3 py-2 text-sm font-semibold text-white">
+              {{ isUploading(block.id) ? '업로드 중' : block.images.length ? '새 이미지 추가' : '갤러리 이미지 업로드' }}
+              <input class="sr-only" type="file" accept="image/*" multiple @change="handleGalleryUpload($event, block)">
+            </label>
+          </div>
         </figure>
 
         <component
@@ -953,12 +1038,51 @@ defineExpose({
             type="button"
             @mousedown.prevent="applyCommand(command)"
           >
-            <span class="admin-block-editor__slash-label text-sm font-semibold">{{ command.label }}</span>
+            <span class="admin-block-editor__slash-label text-sm font-semibold text-ink">{{ command.label }}</span>
             <span class="admin-block-editor__slash-description text-xs text-muted">{{ command.description }}</span>
           </button>
         </div>
       </div>
     </div>
+
+    <div
+      v-if="isMediaPickerOpen"
+      class="admin-block-editor__media-picker fixed inset-0 z-50 grid place-items-center bg-black/40 px-5 py-8"
+      role="dialog"
+      aria-modal="true"
+      @click.self="closeMediaPicker"
+    >
+      <section class="admin-block-editor__media-picker-panel max-h-[80vh] w-full max-w-4xl overflow-hidden bg-white text-ink shadow-xl">
+        <div class="admin-block-editor__media-picker-header flex items-center justify-between border-b border-line px-5 py-4">
+          <h2 class="admin-block-editor__media-picker-title text-lg font-semibold">
+            미디어 선택
+          </h2>
+          <button class="admin-block-editor__media-picker-close rounded border border-line px-3 py-1.5 text-sm font-semibold" type="button" @click="closeMediaPicker">
+            닫기
+          </button>
+        </div>
+        <div class="admin-block-editor__media-picker-body max-h-[62vh] overflow-y-auto p-5">
+          <p v-if="isLoadingMedia" class="admin-block-editor__media-picker-loading text-sm text-muted">
+            미디어를 불러오는 중입니다.
+          </p>
+          <div v-else-if="mediaItems.length" class="admin-block-editor__media-picker-grid grid grid-cols-2 gap-3 md:grid-cols-4">
+            <button
+              v-for="item in mediaItems"
+              :key="item.url"
+              class="admin-block-editor__media-picker-item overflow-hidden border border-line bg-white text-left"
+              type="button"
+              @click="selectMediaItem(item)"
+            >
+              <img class="admin-block-editor__media-picker-image aspect-[4/3] w-full bg-surface object-cover" :src="item.url" :alt="item.title">
+              <span class="admin-block-editor__media-picker-name block truncate px-3 py-2 text-xs font-semibold text-ink">{{ item.name }}</span>
+            </button>
+          </div>
+          <p v-else class="admin-block-editor__media-picker-empty border border-dashed border-line p-8 text-center text-sm text-muted">
+            선택할 미디어가 없습니다.
+          </p>
+        </div>
+      </section>
+    </div>
   </div>
 </template>