라이트박스 이미지 파생 파일 적용

components/content/ContentMarkdownRenderer.vue

@@ -5,7 +5,11 @@ import {
   isImageUrl,
   parseImageMarkdownLine
 } from '../../lib/markdown-image.js'
-import { getPostBodyPreviewThumbnailUrl, getPostBodyThumbnailUrl } from '../../lib/post-card-thumbnail-url.js'
+import {
+  getPostBodyPreviewThumbnailUrl,
+  getPostBodyThumbnailUrl,
+  getPostLightboxThumbnailUrl
+} from '../../lib/post-card-thumbnail-url.js'
 import { readEditableTextFromElement, setEditableCaretOffset } from '../../lib/markdown-inline.js'
 import {
   applyLiveSelectionDelete,
@@ -1057,6 +1061,13 @@ const contentLightboxImages = computed(() => {
  */
 const getContentDisplayImageUrl = (imageUrl) => getPostBodyThumbnailUrl(imageUrl) || imageUrl || ''
 
+/**
+ * 게시물 라이트박스용 이미지 URL을 조회한다.
+ * @param {string|null|undefined} imageUrl - 원본 이미지 URL
+ * @returns {string} 라이트박스용 이미지 URL
+ */
+const getContentLightboxImageUrl = (imageUrl) => getPostLightboxThumbnailUrl(imageUrl) || imageUrl || ''
+
 /**
  * 게시물 본문 이미지의 반응형 srcset을 만든다.
  * @param {string|null|undefined} imageUrl - 원본 이미지 URL
@@ -1149,6 +1160,22 @@ const onGalleryImageError = (event, fallbackUrl) => {
   image.src = fallbackUrl
 }
 
+/**
+ * 라이트박스용 파생 이미지 로드 실패 시 원본 이미지로 되돌린다.
+ * @param {Event} event - 이미지 로드 이벤트
+ * @param {string} fallbackUrl - 원본 이미지 URL
+ * @returns {void}
+ */
+const onLightboxImageError = (event, fallbackUrl) => {
+  const image = event.target
+
+  if (!(image instanceof HTMLImageElement) || !fallbackUrl || image.src.endsWith(fallbackUrl)) {
+    return
+  }
+
+  image.src = fallbackUrl
+}
+
 /**
  * 갤러리 이미지 셀의 flex 비율 스타일을 만든다.
  * @param {Object} block - 갤러리 블록
@@ -3621,8 +3648,9 @@ onBeforeUnmount(() => {
       </button>
       <img
         class="content-markdown-renderer__lightbox-image max-h-[84vh] max-w-[92vw] object-contain"
-        :src="activeLightboxImage.url"
+        :src="getContentLightboxImageUrl(activeLightboxImage.url)"
         :alt="getImageAltAttribute(activeLightboxImage)"
+        @error="onLightboxImageError($event, activeLightboxImage.url)"
       >
       <button
         v-if="activeLightboxImages.length > 1"