본문 갤러리 이미지 계산 분리

components/content/ContentMarkdownRenderer.vue

@@ -41,6 +41,7 @@ import {
   normalizeQuoteEditableValue
 } from '../../lib/markdown-quote.js'
 import { getInArticleAdAfterBlockIds } from '../../lib/content-in-article-ad.js'
+import { getContentLightboxImages, getGalleryRows } from '../../lib/content-gallery-images.js'
 import { parseMarkdownBlocks } from '../../lib/markdown-block-parser.js'
 import { createHeadingIdFactory } from '../../lib/markdown-toc.js'
 import ContentMarkdownCodeBlockEditor from './ContentMarkdownCodeBlockEditor.vue'
@@ -203,52 +204,7 @@ const tailInsertBeforeLine = computed(() => {
 })
 const activeLightboxImage = computed(() => activeLightboxImages.value[activeLightboxIndex.value])
 
-const contentLightboxImages = computed(() => {
-  const images = []
-
-  blocks.value.forEach((block) => {
-    if (block.type === 'image' && block.url) {
-      images.push({
-        ...block,
-        lightboxKey: block.id
-      })
-      return
-    }
-
-    if (block.type === 'gallery' && Array.isArray(block.images)) {
-      block.images.forEach((image, imageIndex) => {
-        if (!image?.url) {
-          return
-        }
-
-        images.push({
-          ...image,
-          lightboxKey: `${block.id}:${imageIndex}`
-        })
-      })
-    }
-  })
-
-  return images
-})
-
-/**
- * 갤러리 이미지를 행 단위로 최대 3개씩 나눈다.
- * @param {Array<Object>} images - 갤러리 이미지 목록
- * @returns {Array<{ startIndex: number, images: Array<Object> }>} 행 목록
- */
-const getGalleryRows = (images) => {
-  const rows = []
-
-  for (let index = 0; index < images.length; index += 3) {
-    rows.push({
-      startIndex: index,
-      images: images.slice(index, index + 3)
-    })
-  }
-
-  return rows
-}
+const contentLightboxImages = computed(() => getContentLightboxImages(blocks.value))
 
 /**
  * 갤러리 이미지 비율 저장 키를 만든다.