fix(study): 암기카드 학습 — 카드 앞면/정답/근거 마크다운+수식 렌더

근거(evidence) 패널이 ##·$$..$$·표·**굵게** 를 raw 평문으로 노출하던 문제. study 다른 화면과 동일하게 renderMathMarkdown(블록, 근거)·renderMathMarkdownInline(인라인, 앞면·정답 LaTeX) 적용. cloze 빈칸 [____]는 링크정의 없어 literal 보존.
- 검토 반영(유효 지적): 근거 max-h-[70vh] overflow-y-auto + overflow-x-auto(표), 정답 break-words, 근거 폰트 text-xs 통일.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
hyungi
2026-06-07 15:14:14 +09:00
parent 6a85087b83
commit a76cc4a453
@@ -20,6 +20,7 @@
import Button from '$lib/components/ui/Button.svelte';
import Skeleton from '$lib/components/ui/Skeleton.svelte';
import EmptyState from '$lib/components/ui/EmptyState.svelte';
import { renderMathMarkdown, renderMathMarkdownInline } from '$lib/utils/mathMarkdown';
// sr_schedule.py 단일 source 미러 — '암'(correct) 다음 복습일 라벨 전용(실제 스케줄은 백엔드).
// stage===null = 신규 카드(progress 없음): '암'이면 백엔드가 due 안 박음(외움→큐 제외)이라 '안 나옴'.
@@ -368,14 +369,17 @@
<div class="mt-3 text-[10px] font-bold uppercase tracking-wide text-faint">
앞 — {current.format === 'qa' ? '질문' : '회상'}
</div>
<div class="mt-1 text-lg font-semibold leading-relaxed text-text md:mt-2 md:text-2xl">{frontText(current)}</div>
<div class="math-area mt-1 break-words text-lg font-semibold leading-relaxed text-text md:mt-2 md:text-2xl">{@html renderMathMarkdownInline(frontText(current))}</div>
{#if revealed}
<div class="mt-4 rounded-lg border border-accent-ring bg-bg px-4 py-3 md:mt-6">
<div class="text-[10px] font-bold uppercase tracking-wide text-faint">정답</div>
<div class="mt-0.5 text-xl font-bold text-accent md:text-3xl">{current.fact}</div>
<div class="math-area mt-0.5 break-words text-xl font-bold text-accent md:text-3xl">{@html renderMathMarkdownInline(current.fact)}</div>
{#if current.evidence?.length && current.evidence[0].snippet}
<div class="mt-2 text-[11px] leading-relaxed text-dim md:hidden">근거: {current.evidence[0].snippet}</div>
<div class="mt-2 md:hidden">
<div class="text-[10px] font-bold uppercase tracking-wide text-faint">근거</div>
<div class="markdown-body math-area mt-1 overflow-x-auto text-xs leading-relaxed text-dim">{@html renderMathMarkdown(current.evidence[0].snippet)}</div>
</div>
{/if}
</div>
{/if}
@@ -424,9 +428,9 @@
<!-- 우측 근거 (데스크탑 전용; reveal 시 채움, 자리 예약으로 레이아웃 점프 0) -->
<div class="hidden md:flex md:flex-col md:self-stretch md:justify-center">
{#if revealed && current.evidence?.length && current.evidence[0].snippet}
<div class="rounded-lg border border-default bg-surface p-4">
<div class="max-h-[70vh] overflow-y-auto rounded-lg border border-default bg-surface p-4">
<div class="text-[10px] font-bold uppercase tracking-wide text-faint">근거</div>
<div class="mt-1.5 text-xs leading-relaxed text-dim">{current.evidence[0].snippet}</div>
<div class="markdown-body math-area mt-1.5 overflow-x-auto text-xs leading-relaxed text-dim">{@html renderMathMarkdown(current.evidence[0].snippet)}</div>
</div>
{:else if revealed}
<div class="rounded-lg border border-dashed border-default p-4 text-[11px] leading-relaxed text-faint">확정 풀이에서 추출한 카드 — 별도 인용 없음</div>