글쓰기 문단 입력과 편집 영역 정리

components/content/ContentMarkdownRenderer.vue

@@ -124,6 +124,20 @@ const isMarkdownBlockStart = (line) => {
     Boolean(parseImageLine(trimmedLine))
 }
 
+/**
+ * 마크다운 hard break 표식이 있는 행인지 확인한다.
+ * @param {string} line - 마크다운 행
+ * @returns {boolean} hard break 여부
+ */
+const hasMarkdownHardBreak = (line) => / {2,}$/.test(line)
+
+/**
+ * 문단 행에서 hard break 표식을 제거한다.
+ * @param {string} line - 마크다운 행
+ * @returns {string} 정리된 문단 행
+ */
+const cleanParagraphLine = (line) => line.replace(/ {2,}$/, '').trim()
+
 /**
  * 닫힘 표식까지의 행 목록을 반환
  * @param {Array<string>} lines - 전체 마크다운 행
@@ -398,10 +412,11 @@ const parseMarkdownBlocks = (markdown) => {
       continue
     }
 
-    const paragraphLines = [trimmedLine]
+    const paragraphLines = [cleanParagraphLine(line)]
+    let shouldJoinNextLine = hasMarkdownHardBreak(line)
     index += 1
 
-    while (index < lines.length) {
+    while (shouldJoinNextLine && index < lines.length) {
       const nextLine = lines[index]
       const nextTrimmedLine = nextLine.trim()
 
@@ -409,7 +424,8 @@ const parseMarkdownBlocks = (markdown) => {
         break
       }
 
-      paragraphLines.push(nextTrimmedLine)
+      paragraphLines.push(cleanParagraphLine(nextLine))
+      shouldJoinNextLine = hasMarkdownHardBreak(nextLine)
       index += 1
     }
 
@@ -616,7 +632,7 @@ const showNextImage = () => {
         class="content-markdown-renderer__code my-6 overflow-x-auto rounded bg-[#15171a] px-4 py-3 text-sm leading-6 text-white"
       ><code>{{ block.text }}</code></pre>
       <hr v-else-if="block.type === 'divider'" class="content-markdown-renderer__divider my-10 border-line">
-      <p v-else class="content-markdown-renderer__paragraph mb-6 text-[15px] leading-8 text-[var(--site-text)] last:mb-0">
+      <p v-else class="content-markdown-renderer__paragraph mb-2.5 text-[15px] leading-8 text-[var(--site-text)] last:mb-0">
         <template v-for="(lineSegments, lineIndex) in parseInlineSegmentLines(block.text)" :key="`${block.id}-paragraph-line-${lineIndex}`">
           <br v-if="lineIndex > 0">
           <template v-for="(segment, segmentIndex) in lineSegments" :key="`${block.id}-paragraph-${lineIndex}-${segmentIndex}`">

components/content/ProseHeading.vue

@@ -12,7 +12,7 @@ const tagName = computed(() => `h${Math.min(Math.max(props.level, 1), 6)}`)
 <template>
   <component
     :is="tagName"
-    class="prose-heading mt-12 font-semibold leading-[1.25] tracking-normal first:mt-0"
+    class="prose-heading mb-2.5 mt-12 font-semibold leading-[1.25] tracking-normal first:mt-0"
     :class="{
       'text-[clamp(1.35rem,1.25rem+0.35vw,1.6rem)] leading-[1.15]': level === 1,
       'text-[clamp(1.2rem,1.15rem+0.3vw,1.4rem)]': level === 2,