대표 이미지 전용 카드 썸네일로 정리

pages/admin/media/index.vue

@@ -25,6 +25,7 @@ const editingUrl = ref('')
 const editingName = ref('')
 const editingCategory = ref('')
 const deletingUrl = ref('')
+const regeneratingThumbnailUrl = ref('')
 const selectedMediaUrl = ref('')
 const selectedMediaUrls = ref([])
 const lastSelectedIndex = ref(-1)
@@ -136,6 +137,16 @@ const getMediaBadgeClass = (item) => {
   return 'bg-[#15171a] text-white'
 }
 
+/**
+ * 카드 썸네일을 생성할 수 있는 원본 이미지인지 확인한다.
+ * @param {Object} item - 미디어 항목
+ * @returns {boolean} 생성 가능 여부
+ */
+const canRegeneratePostThumbnail = (item) => (
+  item?.thumbnailStatus?.role === 'original'
+  && (item.thumbnailStatus.isFallbackActive || item.thumbnailStatus.hasThumbnail)
+)
+
 /**
  * 미디어 항목 종류를 반환한다.
  * @param {Object} item - 미디어 항목
@@ -820,6 +831,35 @@ const deleteMedia = async (item) => {
   }
 }
 
+/**
+ * 선택한 원본 이미지의 카드 썸네일을 다시 생성한다.
+ * @param {Object} item - 미디어 항목
+ * @returns {Promise<void>}
+ */
+const regeneratePostThumbnail = async (item) => {
+  if (!canRegeneratePostThumbnail(item)) {
+    return
+  }
+
+  regeneratingThumbnailUrl.value = item.url
+
+  try {
+    await $fetch('/admin/api/media/thumbnail', {
+      method: 'POST',
+      body: {
+        url: item.url
+      }
+    })
+    await refresh()
+    selectedMediaUrl.value = item.url
+    showToast('success', '카드 썸네일을 생성했습니다.')
+  } catch (error) {
+    showToast('error', error?.data?.message || '카드 썸네일을 생성하지 못했습니다.')
+  } finally {
+    regeneratingThumbnailUrl.value = ''
+  }
+}
+
 /**
  * 선택한 미디어 중 삭제 가능한 항목을 한 번에 삭제한다.
  * @returns {Promise<void>}
@@ -1304,6 +1344,15 @@ watch(filteredMediaUrls, (urls) => {
                 <span v-if="selectedMedia.thumbnailStatus.originalUrl" class="text-muted">
                   원본: {{ selectedMedia.thumbnailStatus.originalUrl }}
                 </span>
+                <button
+                  v-if="canRegeneratePostThumbnail(selectedMedia)"
+                  class="admin-media__thumbnail-regenerate mt-1 justify-self-start rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold text-ink transition hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
+                  type="button"
+                  :disabled="regeneratingThumbnailUrl === selectedMedia.url"
+                  @click="regeneratePostThumbnail(selectedMedia)"
+                >
+                  {{ regeneratingThumbnailUrl === selectedMedia.url ? '생성 중' : (selectedMedia.thumbnailStatus.hasThumbnail ? '카드 썸네일 다시 생성' : '카드 썸네일 생성') }}
+                </button>
               </dd>
             </div>
           </dl>