From 8525c9aefb1b843203a51d863248713bee235f3a Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Wed, 29 Apr 2026 07:13:39 +0900
Subject: [PATCH] =?UTF-8?q?fix(study):=20=EB=A7=88=ED=81=AC=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88=20=ED=81=B4?=
 =?UTF-8?q?=EB=9E=98=EC=8A=A4=20prose=20=E2=86=92=20markdown-body?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@tailwindcss/typography 플러그인 미설치 — prose prose-sm prose-invert
max-w-none 클래스가 무효라 결과 페이지(특히 모르겠음·틀림 카드)와 풀이 페이지의
질문 본문/사용자 해설/AI 해설/분야 설명에서 마크다운 스타일링이 안 먹었음.

이 codebase 의 정식 마크다운 클래스는 src/app.css 에 정의된 .markdown-body
(h1~h4, ul/ol, blockquote, code, pre, table, hr 등 완비). 모든 renderMathMarkdown
컨테이너에 markdown-body + math-area 두 클래스 적용.

영향 파일:
- review/+page.svelte (풀이 중 본문)
- quiz-sessions/[sid]/+page.svelte (결과 카드 expand 시 본문/해설/AI/분야설명)
- questions/[qid]/+page.svelte (보기 페이지)
- questions/[qid]/edit/+page.svelte (편집 페이지의 AI 풀이 미리보기)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../study/topics/[id]/questions/[qid]/+page.svelte     |  8 ++++----
 .../topics/[id]/questions/[qid]/edit/+page.svelte      |  2 +-
 .../study/topics/[id]/quiz-sessions/[sid]/+page.svelte | 10 +++++-----
 .../src/routes/study/topics/[id]/review/+page.svelte   |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/routes/study/topics/[id]/questions/[qid]/+page.svelte b/frontend/src/routes/study/topics/[id]/questions/[qid]/+page.svelte
index 6a24bea..be341d1 100644
--- a/frontend/src/routes/study/topics/[id]/questions/[qid]/+page.svelte
+++ b/frontend/src/routes/study/topics/[id]/questions/[qid]/+page.svelte
@@ -233,7 +233,7 @@
           </div>
 
           <!-- 본문 -->
-          <div class="text-base text-text leading-relaxed math-area">
+          <div class="text-base text-text leading-relaxed markdown-body math-area">
             {@html renderMathMarkdown(q.question_text)}
           </div>
 
@@ -262,9 +262,9 @@
 
           <!-- 사용자 입력 해설 (있을 때만) -->
           {#if q.explanation}
-            <div class="rounded border border-default bg-bg/30 p-3 text-sm text-text math-area">
+            <div class="rounded border border-default bg-bg/30 p-3 text-sm text-text">
               <div class="text-[10px] text-dim mb-1.5 font-medium">사용자 입력 해설</div>
-              <div>{@html renderMathMarkdown(q.explanation)}</div>
+              <div class="markdown-body math-area">{@html renderMathMarkdown(q.explanation)}</div>
             </div>
           {/if}
 
@@ -305,7 +305,7 @@
             {/if}
 
             {#if (aiState === 'success' || aiState === 'stale') && aiData?.ai_explanation}
-              <div class="text-xs text-text leading-relaxed prose prose-sm prose-invert max-w-none math-area">
+              <div class="text-xs text-text leading-relaxed markdown-body math-area">
                 {@html renderMathMarkdown(aiData.ai_explanation)}
               </div>
               {#if aiData.evidence?.length}
diff --git a/frontend/src/routes/study/topics/[id]/questions/[qid]/edit/+page.svelte b/frontend/src/routes/study/topics/[id]/questions/[qid]/edit/+page.svelte
index e945f11..828c18b 100644
--- a/frontend/src/routes/study/topics/[id]/questions/[qid]/edit/+page.svelte
+++ b/frontend/src/routes/study/topics/[id]/questions/[qid]/edit/+page.svelte
@@ -387,7 +387,7 @@
           {/if}
 
           {#if aiOpen && aiBody}
-            <div class="text-sm text-text leading-relaxed bg-bg/30 border border-default rounded p-3 prose prose-sm prose-invert max-w-none math-area">
+            <div class="text-sm text-text leading-relaxed bg-bg/30 border border-default rounded p-3 markdown-body math-area">
               {@html renderMathMarkdown(aiBody)}
             </div>
             {#if aiEvidence?.length}
diff --git a/frontend/src/routes/study/topics/[id]/quiz-sessions/[sid]/+page.svelte b/frontend/src/routes/study/topics/[id]/quiz-sessions/[sid]/+page.svelte
index 7b72d48..66c202a 100644
--- a/frontend/src/routes/study/topics/[id]/quiz-sessions/[sid]/+page.svelte
+++ b/frontend/src/routes/study/topics/[id]/quiz-sessions/[sid]/+page.svelte
@@ -320,7 +320,7 @@
 
           {#if isOpen}
             <div class="border-t border-default p-3 flex flex-col gap-3 bg-bg/20">
-              <div class="text-sm text-text leading-relaxed math-area">{@html renderMathMarkdown(it.q.question_text)}</div>
+              <div class="text-sm text-text leading-relaxed markdown-body math-area">{@html renderMathMarkdown(it.q.question_text)}</div>
 
               {#if it.q.images?.length > 0}
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
@@ -349,9 +349,9 @@
               </div>
 
               {#if it.q.explanation}
-                <div class="rounded border border-default bg-surface p-3 text-xs text-text math-area">
+                <div class="rounded border border-default bg-surface p-3 text-xs text-text">
                   <div class="text-[10px] text-dim mb-1">사용자 입력 해설</div>
-                  <div class="text-text">{@html renderMathMarkdown(it.q.explanation)}</div>
+                  <div class="markdown-body math-area">{@html renderMathMarkdown(it.q.explanation)}</div>
                 </div>
               {/if}
 
@@ -420,7 +420,7 @@
       <div class="text-[11px] text-error">{st.error}</div>
     {/if}
     {#if isLoaded}
-      <div class="text-xs text-text leading-relaxed prose prose-sm prose-invert max-w-none math-area">
+      <div class="text-xs text-text leading-relaxed markdown-body math-area">
         {@html renderMathMarkdown(data.ai_explanation)}
       </div>
       {#if data.evidence?.length}
@@ -468,7 +468,7 @@
       <div class="text-[11px] text-error">{st.error}</div>
     {/if}
     {#if isLoaded}
-      <div class="text-xs text-text leading-relaxed prose prose-sm prose-invert max-w-none math-area">
+      <div class="text-xs text-text leading-relaxed markdown-body math-area">
         {@html renderMathMarkdown(data.content)}
       </div>
       {#if data.evidence?.length}
diff --git a/frontend/src/routes/study/topics/[id]/review/+page.svelte b/frontend/src/routes/study/topics/[id]/review/+page.svelte
index 56fd8ac..dd4ca16 100644
--- a/frontend/src/routes/study/topics/[id]/review/+page.svelte
+++ b/frontend/src/routes/study/topics/[id]/review/+page.svelte
@@ -224,7 +224,7 @@
     <Card>
       {#snippet children()}
         <div class="p-5 flex flex-col gap-4">
-          <div class="text-base text-text leading-relaxed math-area">{@html renderMathMarkdown(currentQ.question_text)}</div>
+          <div class="text-base text-text leading-relaxed markdown-body math-area">{@html renderMathMarkdown(currentQ.question_text)}</div>
 
           {#if currentQ.images?.length > 0}
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-1">