관리자 이미지와 갤러리 블록 추가

components/content/ContentMarkdownRenderer.vue

@@ -6,21 +6,48 @@ const props = defineProps({
   }
 })
 
+const activeLightboxImages = ref([])
+const activeLightboxIndex = ref(0)
+
 /**
  * 마크다운 블록을 생성
  * @param {string} type - 블록 타입
  * @param {string|Array<string>} text - 블록 텍스트
  * @param {number|null} level - 제목 레벨
  * @param {string} id - 블록 ID
- * @returns {{ id: string, type: string, text: string|Array<string>, level: number|null }} 블록
+ * @param {Object} options - 추가 블록 옵션
+ * @returns {Object} 블록
  */
-const createBlock = (type = 'paragraph', text = '', level = null, id = '') => ({
+const createBlock = (type = 'paragraph', text = '', level = null, id = '', options = {}) => ({
   id,
   type,
   text,
-  level
+  level,
+  url: options.url || '',
+  alt: options.alt || '',
+  width: options.width || 'regular',
+  images: options.images || []
 })
 
+/**
+ * 이미지 마크다운 행을 이미지 데이터로 변환
+ * @param {string} line - 마크다운 행
+ * @returns {Object|null} 이미지 데이터
+ */
+const parseImageLine = (line) => {
+  const match = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)(?:\{width=(regular|wide|full)\})?$/)
+
+  if (!match) {
+    return null
+  }
+
+  return {
+    alt: match[1],
+    url: match[2],
+    width: match[3] || 'regular'
+  }
+}
+
 /**
  * 마크다운 문자열을 렌더링용 블록 목록으로 변환
  * @param {string} markdown - 마크다운 문자열
@@ -40,6 +67,33 @@ const parseMarkdownBlocks = (markdown) => {
       continue
     }
 
+    if (trimmedLine === ':::gallery') {
+      const images = []
+      index += 1
+
+      while (index < lines.length && lines[index].trim() !== ':::') {
+        const image = parseImageLine(lines[index])
+
+        if (image) {
+          images.push(image)
+        }
+
+        index += 1
+      }
+
+      blocks.push(createBlock('gallery', '', null, `block-${blocks.length}`, { images }))
+      index += 1
+      continue
+    }
+
+    const image = parseImageLine(trimmedLine)
+
+    if (image) {
+      blocks.push(createBlock('image', '', null, `block-${blocks.length}`, image))
+      index += 1
+      continue
+    }
+
     if (trimmedLine.startsWith('```')) {
       const codeLines = []
       index += 1
@@ -94,6 +148,45 @@ const parseMarkdownBlocks = (markdown) => {
 }
 
 const blocks = computed(() => parseMarkdownBlocks(props.content))
+const activeLightboxImage = computed(() => activeLightboxImages.value[activeLightboxIndex.value])
+
+/**
+ * 라이트박스를 연다
+ * @param {Array<Object>} images - 이미지 목록
+ * @param {number} index - 시작 인덱스
+ * @returns {void}
+ */
+const openLightbox = (images, index) => {
+  activeLightboxImages.value = images
+  activeLightboxIndex.value = index
+}
+
+/**
+ * 라이트박스를 닫는다
+ * @returns {void}
+ */
+const closeLightbox = () => {
+  activeLightboxImages.value = []
+  activeLightboxIndex.value = 0
+}
+
+/**
+ * 라이트박스 이전 이미지로 이동
+ * @returns {void}
+ */
+const showPreviousImage = () => {
+  activeLightboxIndex.value = activeLightboxIndex.value === 0
+    ? activeLightboxImages.value.length - 1
+    : activeLightboxIndex.value - 1
+}
+
+/**
+ * 라이트박스 다음 이미지로 이동
+ * @returns {void}
+ */
+const showNextImage = () => {
+  activeLightboxIndex.value = (activeLightboxIndex.value + 1) % activeLightboxImages.value.length
+}
 </script>
 
 <template>
@@ -110,6 +203,20 @@ const blocks = computed(() => parseMarkdownBlocks(props.content))
           {{ item }}
         </li>
       </ProseList>
+      <ProseImage v-else-if="block.type === 'image'" :src="block.url" :alt="block.alt" :variant="block.width">
+        {{ block.alt }}
+      </ProseImage>
+      <div v-else-if="block.type === 'gallery'" class="content-markdown-renderer__gallery my-8 grid grid-cols-2 gap-2 md:grid-cols-3">
+        <button
+          v-for="(image, imageIndex) in block.images"
+          :key="`${block.id}-${image.url}`"
+          class="content-markdown-renderer__gallery-button overflow-hidden rounded bg-surface"
+          type="button"
+          @click="openLightbox(block.images, imageIndex)"
+        >
+          <img class="content-markdown-renderer__gallery-image aspect-[4/3] w-full object-cover transition-transform hover:scale-[1.02]" :src="image.url" :alt="image.alt">
+        </button>
+      </div>
       <pre
         v-else-if="block.type === 'code'"
         class="content-markdown-renderer__code my-6 overflow-x-auto rounded bg-[#15171a] px-4 py-3 text-sm leading-6 text-white"
@@ -119,5 +226,34 @@ const blocks = computed(() => parseMarkdownBlocks(props.content))
         {{ block.text }}
       </p>
     </template>
+
+    <div
+      v-if="activeLightboxImage"
+      class="content-markdown-renderer__lightbox fixed inset-0 z-50 grid place-items-center bg-black/90 px-5 py-8"
+      role="dialog"
+      aria-modal="true"
+      @click.self="closeLightbox"
+    >
+      <button class="content-markdown-renderer__lightbox-close absolute right-5 top-5 rounded bg-white px-3 py-2 text-sm font-semibold text-ink" type="button" @click="closeLightbox">
+        닫기
+      </button>
+      <button
+        v-if="activeLightboxImages.length > 1"
+        class="content-markdown-renderer__lightbox-prev absolute left-5 top-1/2 rounded bg-white px-3 py-2 text-sm font-semibold text-ink"
+        type="button"
+        @click="showPreviousImage"
+      >
+        이전
+      </button>
+      <img class="content-markdown-renderer__lightbox-image max-h-[84vh] max-w-[92vw] object-contain" :src="activeLightboxImage.url" :alt="activeLightboxImage.alt">
+      <button
+        v-if="activeLightboxImages.length > 1"
+        class="content-markdown-renderer__lightbox-next absolute right-5 top-1/2 rounded bg-white px-3 py-2 text-sm font-semibold text-ink"
+        type="button"
+        @click="showNextImage"
+      >
+        다음
+      </button>
+    </div>
   </div>
 </template>