From 2d6d1b8e8a86aedc0f56a964cbec14df9c6a5e32 Mon Sep 17 00:00:00 2001
From: hyungi <hyun49196@gmail.com>
Date: Mon, 15 Jun 2026 14:05:35 +0900
Subject: [PATCH] =?UTF-8?q?fix(markdown):=20=EC=88=98=EC=8B=9D=20pre-rende?=
 =?UTF-8?q?r(katex=20=EC=A7=81=EC=A0=91)=20+=20TL;DR=20=EB=A7=88=ED=81=AC?=
 =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20=EB=A0=8C=EB=8D=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

본문 $$수식$$가 raw로 노출되던 문제: marked-katex 토크나이저가 개요 anchor
splice/런타임 환경 영향으로 미발화 → marked 이전에 katex.renderToString 으로
직접 렌더 후 placeholder 복원(위치·인접 무관). TL;DR(ai_tldr)도 plain-text
보간이라 마크다운 미렌더 → renderDocMarkdown 경유로 교체(+summary-md 스타일).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/app.css                          | 11 ++++
 .../src/lib/components/AnalysisPanel.svelte   |  5 +-
 frontend/src/lib/utils/docMarkdown.ts         | 52 ++++++++++++++++++-
 .../src/routes/documents/[id]/+page.svelte    |  3 +-
 4 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index f7b6d63..ae4a8bb 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -213,3 +213,14 @@ body {
 
 /* Phase 1C: frontmatter 박스 — 본문 위 메타 표시 */
 .md-frontmatter dt { font-weight: 500; }
+
+/* AI 요약(TL;DR 등) 마크다운 렌더 — 좁은 카드에 맞게 문단/리스트 마진 압축 */
+.summary-md > :first-child { margin-top: 0; }
+.summary-md > :last-child { margin-bottom: 0; }
+.summary-md p { margin: 0 0 0.45em; }
+.summary-md ul, .summary-md ol { margin: 0.25em 0; padding-left: 1.2em; }
+.summary-md ul { list-style: disc; }
+.summary-md ol { list-style: decimal; }
+.summary-md li { margin: 0.1em 0; }
+.summary-md strong { font-weight: 700; }
+.summary-md code { background: rgba(0, 0, 0, 0.05); padding: 0 0.3em; border-radius: 3px; }
diff --git a/frontend/src/lib/components/AnalysisPanel.svelte b/frontend/src/lib/components/AnalysisPanel.svelte
index 557c644..b6d23a9 100644
--- a/frontend/src/lib/components/AnalysisPanel.svelte
+++ b/frontend/src/lib/components/AnalysisPanel.svelte
@@ -12,6 +12,7 @@
 -->
 <script lang="ts">
   import { api } from '$lib/api';
+  import { renderDocMarkdown } from '$lib/utils/docMarkdown';
   import Badge from '$lib/components/ui/Badge.svelte';
   import Button from '$lib/components/ui/Button.svelte';
   import Skeleton from '$lib/components/ui/Skeleton.svelte';
@@ -104,9 +105,7 @@
       </div>
 
       {#if tldr}
-        <p class="text-xs font-medium text-text leading-relaxed mb-2">
-          {tldr}
-        </p>
+        <div class="summary-md text-xs font-medium text-text leading-relaxed mb-2">{@html renderDocMarkdown(tldr)}</div>
       {/if}
 
       {#if bullets && bullets.length > 0}
diff --git a/frontend/src/lib/utils/docMarkdown.ts b/frontend/src/lib/utils/docMarkdown.ts
index 6db85a4..9af6d30 100644
--- a/frontend/src/lib/utils/docMarkdown.ts
+++ b/frontend/src/lib/utils/docMarkdown.ts
@@ -15,6 +15,7 @@
 
 import DOMPurify from 'dompurify';
 import { Marked } from 'marked';
+import katex from 'katex';
 // @ts-ignore — 타입 정의 누락 시 무시
 import markedKatex from 'marked-katex-extension';
 // @ts-ignore — 타입 정의 누락 시 무시
@@ -88,10 +89,59 @@ const SANITIZE_OPTS = {
   ALLOW_UNKNOWN_PROTOCOLS: false,
 } as const;
 
+// ── 수식 pre-render ──────────────────────────────────────────────────────────
+// marked-katex-extension 의 토크나이저는 `$$` 가 블록 선두에 있어야 발화하는데,
+// (1) 개요 anchor splice 가 `$$` 직전에 <span id="sec-N"> 를 끼우면 `$$` 가 문단 중간으로
+// 밀려 블록 규칙이 깨지고, (2) 빌드/런타임 환경에 따라 확장 토크나이저가 발화하지 않으면
+// `$$` 가 평문으로 새어 marked 의 백슬래시 이스케이프(\% → %, \, → ,)에 망가진다.
+// → marked 가 손대기 *전에* 수식을 katex 로 직접 렌더해 placeholder 로 보호한 뒤 복원한다.
+//   위치·인접 상황과 무관(전역 정규식)하므로 위 두 경우를 모두 우회한다.
+const _MATH_SLOT = (i: number) => `KX0MATHSLOT${i}MATHKX0`; // marked-안전(영숫자) + 충돌 불가
+const _MATH_SLOT_RE = /KX0MATHSLOT(\d+)MATHKX0/g;
+const _BLOCK_MATH_RE = /\$\$([\s\S]+?)\$\$/g;
+// 인라인 $...$ — 통화($5)·이스케이프(\$)·`$$` 회피. $ 직후 비공백, $ 직전 비공백.
+const _INLINE_MATH_RE = /(?<![\\$\d])\$(?!\s)([^$\n]*?[^$\n\s])\$(?!\d)/g;
+
+function _protectMath(text: string, slots: string[]): string {
+  const render = (tex: string, displayMode: boolean): string => {
+    slots.push(
+      katex.renderToString(tex.trim(), { displayMode, throwOnError: false, output: 'html' }),
+    );
+    return _MATH_SLOT(slots.length - 1);
+  };
+  return text
+    .replace(_BLOCK_MATH_RE, (m, tex) => {
+      try {
+        return render(String(tex), true);
+      } catch {
+        return m;
+      }
+    })
+    .replace(_INLINE_MATH_RE, (m, tex) => {
+      try {
+        return render(String(tex), false);
+      } catch {
+        return m;
+      }
+    });
+}
+
 export function renderDocMarkdown(text: string | null | undefined): string {
   if (!text) return '';
   try {
-    const html = docMarked.parse(text) as string;
+    const slots: string[] = [];
+    const protectedText = _protectMath(text, slots);
+    let html = docMarked.parse(protectedText) as string;
+    if (slots.length) {
+      // 블록 수식이 단독 문단이면 marked 가 <p> 로 감싸므로 그 <p> 를 벗겨 블록 수식이 문단에
+      // 매몰되지 않게 한다. (katex-display 는 block 이라 <p> 안에 두면 브라우저가 자동 분리.)
+      html = html
+        .replace(
+          new RegExp(`<p>\\s*KX0MATHSLOT(\\d+)MATHKX0\\s*</p>`, 'g'),
+          (m, i) => slots[Number(i)] ?? m,
+        )
+        .replace(_MATH_SLOT_RE, (m, i) => slots[Number(i)] ?? m);
+    }
     return DOMPurify.sanitize(html, SANITIZE_OPTS);
   } catch {
     // 마지막 안전망: 모든 태그 제거 후 escape
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index 6ba0bd2..3583370 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -16,6 +16,7 @@
   import Skeleton from '$lib/components/ui/Skeleton.svelte';
   import HandwriteCanvas from '$lib/components/HandwriteCanvas.svelte';
   import MarkdownDoc from '$lib/components/MarkdownDoc.svelte';
+  import { renderDocMarkdown } from '$lib/utils/docMarkdown';
   import MarkdownStatusBadge from '$lib/components/MarkdownStatusBadge.svelte';
   import NoteEditor from '$lib/components/editors/NoteEditor.svelte';
   import EditUrlEditor from '$lib/components/editors/EditUrlEditor.svelte';
@@ -263,7 +264,7 @@
     {#if doc.ai_tldr || doc.ai_summary}
       <div style="background:#f4f7f1;border:1px solid #dde3d6;border-radius:14px;padding:13px;">
         <div style="font-size:10.5px;font-weight:700;color:#697061;letter-spacing:.4px;margin-bottom:7px;">TL;DR</div>
-        <div style="font-size:12px;line-height:1.5;color:#23291f;">{doc.ai_tldr || doc.ai_summary}</div>
+        <div class="summary-md" style="font-size:12px;line-height:1.5;color:#23291f;">{@html renderDocMarkdown(doc.ai_tldr || doc.ai_summary)}</div>
       </div>
     {/if}
     {#if doc.ai_bullets && doc.ai_bullets.length}