파생 이미지 캐시 재검증 적용

pages/admin/media/index.vue

@@ -10,7 +10,8 @@ import {
 import {
   isPageCoverThumbnailUrl,
   isPostBodyThumbnailUrl,
-  isPostCardThumbnailUrl
+  isPostCardThumbnailUrl,
+  withGeneratedImageCacheVersion
 } from '~/lib/post-card-thumbnail-url.js'
 
 definePageMeta({
@@ -131,6 +132,21 @@ const getPostBodyThumbnailResolutionLabel = (item) => {
  */
 const isSystemManagedMediaItem = (item) => Boolean(item?.avatarOwner) || isPostCardThumbnailDiskItem(item) || isPageCoverThumbnailDiskItem(item) || isPostBodyThumbnailDiskItem(item)
 
+/**
+ * 미디어 미리보기 이미지 URL을 반환한다.
+ * @param {Object} item - 미디어 항목
+ * @returns {string} 미리보기 URL
+ */
+const getMediaPreviewUrl = (item) => {
+  const url = String(item?.url || '')
+
+  if (!isPostCardThumbnailDiskItem(item) && !isPageCoverThumbnailDiskItem(item) && !isPostBodyThumbnailDiskItem(item)) {
+    return url
+  }
+
+  return withGeneratedImageCacheVersion(url, `${item?.updatedAt || ''}-${item?.size || ''}`)
+}
+
 /**
  * 파일명 변경·삭제·드래그 이동이 제한되는지 여부
  * @param {Object} item - 미디어 항목
@@ -330,7 +346,7 @@ const activeSystemMediaHint = computed(() => {
   }
 
   if (activeTab.value === 'postBodyThumbnails') {
-    return '게시물 본문을 빠르게 보여주기 위해 원본 이미지에서 자동 생성한 WebP 이미지입니다. 본문에는 이 파일을 우선 표시하고, 크게 보기에서는 원본 이미지를 사용합니다. 원본과 연결되어 있어 이름 변경과 폴더 이동은 제한됩니다.'
+    return '게시물 본문을 빠르게 보여주기 위해 원본 이미지에서 자동 생성한 WebP 이미지입니다. 본문에는 720px·1600px 파일을 우선 표시하고, 크게 보기에는 2560px 파일을 우선 사용합니다. 원본과 연결되어 있어 이름 변경과 폴더 이동은 제한됩니다.'
   }
 
   return '회원 프로필에서 쓰는 이미지는 연결 회원이 있을 때만 삭제·이름 변경이 막힙니다. 프로필에서 바꾸거나 해제해도 디스크 파일은 삭제되지 않으며 이 목록에 남습니다. 목록이 바로 안 바뀌면 페이지를 새로고침하세요. 관리자는 필요 시 삭제·다운로드로 정리할 수 있습니다.'
@@ -1437,7 +1453,7 @@ watch(filteredMediaUrls, (urls) => {
               <img
                 v-if="getMediaItemKind(item) === 'image'"
                 class="admin-media__image aspect-square w-full bg-surface object-cover"
-                :src="item.url"
+                :src="getMediaPreviewUrl(item)"
                 :alt="item.title"
               >
               <AdminMediaVideoThumbnail
@@ -1533,7 +1549,7 @@ watch(filteredMediaUrls, (urls) => {
           <img
             v-if="getMediaItemKind(selectedMedia) === 'image'"
             class="admin-media__preview-image max-h-[72vh] max-w-full object-contain"
-            :src="selectedMedia.url"
+            :src="getMediaPreviewUrl(selectedMedia)"
             :alt="selectedMedia.title"
           >
           <video