대표 이미지와 미디어 화면 개선

components/admin/AdminPostForm.vue

@@ -18,6 +18,10 @@ const emit = defineEmits(['submit'])
 
 const slugTouched = ref(Boolean(props.initialPost.slug))
 const blockEditor = ref(null)
+const mediaItems = ref([])
+const isMediaPickerOpen = ref(false)
+const isLoadingMedia = ref(false)
+const isUploadingFeaturedImage = ref(false)
 
 const form = reactive({
   title: props.initialPost.title || '',
@@ -67,6 +71,83 @@ const parseTags = (value) => [...new Set(value
   .map((tag) => toSlug(tag))
   .filter(Boolean))]
 
+/**
+ * 미디어 라이브러리 목록 조회
+ * @returns {Promise<void>}
+ */
+const fetchMediaItems = async () => {
+  isLoadingMedia.value = true
+
+  try {
+    mediaItems.value = await $fetch('/admin/api/media')
+  } finally {
+    isLoadingMedia.value = false
+  }
+}
+
+/**
+ * 대표 이미지 선택 창 열기
+ * @returns {Promise<void>}
+ */
+const openMediaPicker = async () => {
+  isMediaPickerOpen.value = true
+  await fetchMediaItems()
+}
+
+/**
+ * 대표 이미지 선택 창 닫기
+ * @returns {void}
+ */
+const closeMediaPicker = () => {
+  isMediaPickerOpen.value = false
+}
+
+/**
+ * 대표 이미지 선택
+ * @param {Object} item - 미디어 항목
+ * @returns {void}
+ */
+const selectFeaturedImage = (item) => {
+  form.featuredImage = item.url
+  closeMediaPicker()
+}
+
+/**
+ * 대표 이미지 삭제
+ * @returns {void}
+ */
+const removeFeaturedImage = () => {
+  form.featuredImage = ''
+}
+
+/**
+ * 대표 이미지 파일 업로드
+ * @param {Event} event - 파일 입력 이벤트
+ * @returns {Promise<void>}
+ */
+const uploadFeaturedImage = async (event) => {
+  const files = event.target.files
+
+  if (!files?.length) {
+    return
+  }
+
+  const formData = new FormData()
+  formData.append('files', files[0])
+  isUploadingFeaturedImage.value = true
+
+  try {
+    const result = await $fetch('/admin/api/uploads', {
+      method: 'POST',
+      body: formData
+    })
+    form.featuredImage = result.files?.[0]?.url || ''
+  } finally {
+    event.target.value = ''
+    isUploadingFeaturedImage.value = false
+  }
+}
+
 /**
  * 제목 입력 후 본문 에디터로 이동
  * @returns {void}
@@ -154,14 +235,38 @@ const submitPost = () => {
           >
         </label>
 
-        <label class="admin-post-form__field grid gap-2 text-sm">
-          <span class="admin-post-form__label font-medium">대표 이미지 URL</span>
-          <input
-            v-model="form.featuredImage"
-            class="admin-post-form__input rounded border border-line bg-white px-3 py-2"
-            type="url"
-          >
-        </label>
+        <div class="admin-post-form__field grid gap-2 text-sm">
+          <span class="admin-post-form__label font-medium">대표 이미지</span>
+          <figure v-if="form.featuredImage" class="admin-post-form__featured overflow-hidden rounded border border-line bg-white">
+            <img class="admin-post-form__featured-image aspect-[4/3] w-full bg-surface object-cover" :src="form.featuredImage" alt="">
+            <figcaption class="admin-post-form__featured-actions grid gap-2 p-3">
+              <p class="admin-post-form__featured-url break-all text-xs text-muted">
+                {{ form.featuredImage }}
+              </p>
+              <div class="admin-post-form__featured-buttons flex flex-wrap gap-2">
+                <button class="admin-post-form__featured-change rounded border border-line px-3 py-1.5 text-xs font-semibold" type="button" @click="openMediaPicker">
+                  변경
+                </button>
+                <label class="admin-post-form__featured-reupload cursor-pointer rounded border border-line px-3 py-1.5 text-xs font-semibold">
+                  새 업로드
+                  <input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
+                </label>
+                <button class="admin-post-form__featured-remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700" type="button" @click="removeFeaturedImage">
+                  삭제
+                </button>
+              </div>
+            </figcaption>
+          </figure>
+          <div v-else class="admin-post-form__featured-empty grid gap-2 rounded border border-dashed border-line bg-white p-4">
+            <button class="admin-post-form__featured-select rounded border border-line px-3 py-2 text-sm font-semibold" type="button" @click="openMediaPicker">
+              미디어에서 선택
+            </button>
+            <label class="admin-post-form__featured-upload cursor-pointer rounded bg-[#15171a] px-3 py-2 text-center text-sm font-semibold text-white">
+              {{ isUploadingFeaturedImage ? '업로드 중' : '새 이미지 업로드' }}
+              <input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
+            </label>
+          </div>
+        </div>
       </aside>
     </div>
 
@@ -177,5 +282,44 @@ const submitPost = () => {
         {{ saving ? '저장 중' : submitLabel }}
       </button>
     </div>
+
+    <div
+      v-if="isMediaPickerOpen"
+      class="admin-post-form__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-post-form__media-picker-panel max-h-[80vh] w-full max-w-4xl overflow-hidden bg-white text-ink shadow-xl">
+        <div class="admin-post-form__media-picker-header flex items-center justify-between border-b border-line px-5 py-4">
+          <h2 class="admin-post-form__media-picker-title text-lg font-semibold">
+            대표 이미지 선택
+          </h2>
+          <button class="admin-post-form__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-post-form__media-picker-body max-h-[62vh] overflow-y-auto p-5">
+          <p v-if="isLoadingMedia" class="admin-post-form__media-picker-loading text-sm text-muted">
+            미디어를 불러오는 중입니다.
+          </p>
+          <div v-else-if="mediaItems.length" class="admin-post-form__media-picker-grid grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-6">
+            <button
+              v-for="item in mediaItems"
+              :key="item.url"
+              class="admin-post-form__media-picker-item overflow-hidden border border-line bg-white text-left"
+              type="button"
+              @click="selectFeaturedImage(item)"
+            >
+              <img class="admin-post-form__media-picker-image aspect-square w-full bg-surface object-cover" :src="item.url" :alt="item.title">
+              <span class="admin-post-form__media-picker-name block truncate px-2 py-1.5 text-xs font-semibold text-ink">{{ item.name }}</span>
+            </button>
+          </div>
+          <p v-else class="admin-post-form__media-picker-empty border border-dashed border-line p-8 text-center text-sm text-muted">
+            선택할 미디어가 없습니다.
+          </p>
+        </div>
+      </section>
+    </div>
   </form>
 </template>