미리보기 집중 모드와 빈 줄 공백 보존

components/content/ContentMarkdownRenderer.vue

@@ -138,6 +138,13 @@ const hasMarkdownHardBreak = (line) => / {2,}$/.test(line)
  */
 const cleanParagraphLine = (line) => line.replace(/ {2,}$/, '').trim()
 
+/**
+ * 빈 줄 공백 블록 높이를 반환한다.
+ * @param {Object} block - 렌더링 블록
+ * @returns {string} Tailwind 높이 클래스
+ */
+const getSpacerHeightClass = (block) => block.meta?.legacy ? 'h-6' : 'h-8'
+
 /**
  * 닫힘 표식까지의 행 목록을 반환
  * @param {Array<string>} lines - 전체 마크다운 행
@@ -263,7 +270,14 @@ const parseMarkdownBlocks = (markdown) => {
     const line = lines[index]
     const trimmedLine = line.trim()
 
-    if (trimmedLine === BLANK_PARAGRAPH_MARKER || !trimmedLine) {
+    if (trimmedLine === BLANK_PARAGRAPH_MARKER) {
+      blocks.push(createBlock('spacer', '', null, `block-${blocks.length}`, { meta: { legacy: true } }))
+      index += 1
+      continue
+    }
+
+    if (!trimmedLine) {
+      blocks.push(createBlock('spacer', '', null, `block-${blocks.length}`))
       index += 1
       continue
     }
@@ -546,7 +560,8 @@ const showNextImage = () => {
 <template>
   <div class="content-markdown-renderer">
     <template v-for="block in blocks" :key="block.id">
-      <ProseHeading v-if="block.type === 'heading'" :level="block.level">
+      <div v-if="block.type === 'spacer'" class="content-markdown-renderer__spacer" :class="getSpacerHeightClass(block)" aria-hidden="true" />
+      <ProseHeading v-else-if="block.type === 'heading'" :level="block.level">
         <template v-for="(segment, segmentIndex) in parseInlineSegments(block.text)" :key="`${block.id}-heading-${segmentIndex}`">
           <strong v-if="segment.type === 'strong'">{{ segment.text }}</strong>
           <em v-else-if="segment.type === 'em'">{{ segment.text }}</em>