본문 이미지 URL 계산 분리

components/content/ContentMarkdownRenderer.vue

@@ -4,11 +4,11 @@ import {
   getImageDisplayCaption
 } from '../../lib/markdown-image.js'
 import {
-  getPostBodyPreviewThumbnailUrl,
-  getPostBodyThumbnailUrl,
-  getPostLightboxThumbnailUrl,
-  withGeneratedImageCacheVersion
-} from '../../lib/post-card-thumbnail-url.js'
+  getContentDisplayImageSrcset,
+  getContentDisplayImageUrl,
+  getContentLightboxImageUrl,
+  getGalleryImageSizes
+} from '../../lib/content-image-urls.js'
 import { readEditableTextFromElement, setEditableCaretOffset } from '../../lib/markdown-inline.js'
 import {
   applyLiveSelectionDelete,
@@ -232,58 +232,6 @@ const contentLightboxImages = computed(() => {
   return images
 })
 
-/**
- * 게시물 본문 표시용 이미지 URL을 조회한다.
- * @param {string|null|undefined} imageUrl - 원본 이미지 URL
- * @returns {string} 표시용 이미지 URL
- */
-const getContentDisplayImageUrl = (imageUrl) => {
-  const bodyThumbnailUrl = getPostBodyThumbnailUrl(imageUrl)
-
-  return bodyThumbnailUrl
-    ? withGeneratedImageCacheVersion(bodyThumbnailUrl)
-    : imageUrl || ''
-}
-
-/**
- * 게시물 라이트박스용 이미지 URL을 조회한다.
- * @param {string|null|undefined} imageUrl - 원본 이미지 URL
- * @returns {string} 라이트박스용 이미지 URL
- */
-const getContentLightboxImageUrl = (imageUrl) => {
-  const lightboxThumbnailUrl = getPostLightboxThumbnailUrl(imageUrl)
-
-  return lightboxThumbnailUrl
-    ? withGeneratedImageCacheVersion(lightboxThumbnailUrl)
-    : imageUrl || ''
-}
-
-/**
- * 게시물 본문 이미지의 반응형 srcset을 만든다.
- * @param {string|null|undefined} imageUrl - 원본 이미지 URL
- * @returns {string} srcset 문자열
- */
-const getContentDisplayImageSrcset = (imageUrl) => {
-  const previewUrl = getPostBodyPreviewThumbnailUrl(imageUrl)
-  const bodyUrl = getPostBodyThumbnailUrl(imageUrl)
-
-  return [
-    previewUrl ? `${withGeneratedImageCacheVersion(previewUrl)} 720w` : '',
-    bodyUrl ? `${withGeneratedImageCacheVersion(bodyUrl)} 1600w` : ''
-  ].filter(Boolean).join(', ')
-}
-
-/**
- * 갤러리 표시용 이미지 sizes 값을 만든다.
- * @param {number} rowLength - 갤러리 행 이미지 개수
- * @returns {string} sizes 속성
- */
-const getGalleryImageSizes = (rowLength) => {
-  const columnWidth = rowLength >= 3 ? '33vw' : rowLength === 2 ? '50vw' : '100vw'
-
-  return `(max-width: 768px) 100vw, ${columnWidth}`
-}
-
 /**
  * 갤러리 이미지를 행 단위로 최대 3개씩 나눈다.
  * @param {Array<Object>} images - 갤러리 이미지 목록