본문 이미지 URL 계산 분리

lib/content-image-urls.js

@@ -0,0 +1,58 @@
+import {
+  getPostBodyPreviewThumbnailUrl,
+  getPostBodyThumbnailUrl,
+  getPostLightboxThumbnailUrl,
+  withGeneratedImageCacheVersion
+} from './post-card-thumbnail-url.js'
+
+/**
+ * 게시물 본문 표시용 이미지 URL을 조회한다.
+ * @param {string|null|undefined} imageUrl - 원본 이미지 URL
+ * @returns {string} 표시용 이미지 URL
+ */
+export const getContentDisplayImageUrl = (imageUrl) => {
+  const bodyThumbnailUrl = getPostBodyThumbnailUrl(imageUrl)
+
+  return bodyThumbnailUrl
+    ? withGeneratedImageCacheVersion(bodyThumbnailUrl)
+    : imageUrl || ''
+}
+
+/**
+ * 게시물 라이트박스용 이미지 URL을 조회한다.
+ * @param {string|null|undefined} imageUrl - 원본 이미지 URL
+ * @returns {string} 라이트박스용 이미지 URL
+ */
+export const getContentLightboxImageUrl = (imageUrl) => {
+  const lightboxThumbnailUrl = getPostLightboxThumbnailUrl(imageUrl)
+
+  return lightboxThumbnailUrl
+    ? withGeneratedImageCacheVersion(lightboxThumbnailUrl)
+    : imageUrl || ''
+}
+
+/**
+ * 게시물 본문 이미지의 반응형 srcset을 만든다.
+ * @param {string|null|undefined} imageUrl - 원본 이미지 URL
+ * @returns {string} srcset 문자열
+ */
+export 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 속성
+ */
+export const getGalleryImageSizes = (rowLength) => {
+  const columnWidth = rowLength >= 3 ? '33vw' : rowLength === 2 ? '50vw' : '100vw'
+
+  return `(max-width: 768px) 100vw, ${columnWidth}`
+}