hyungi_document_server/frontend/src/lib/components/MarkdownDoc.svelte

<script lang="ts">
  /**
   * 문서 본문 canonical markdown 렌더러 (Phase 1C).
   *
   * 우선순위:
   *   1. md_content (Phase 1B 의 marker_worker 가 채운 canonical markdown)
   *   2. extracted_text fallback (기존 본문)
   *   3. placeholder
   *
   * 기능:
   *   - md_frontmatter (JSONB) 가 비어있지 않으면 본문 위에 메타 박스
   *   - heading anchor (h1~h6 id 자동 부여 + # 링크)
   *   - 이미지는 placeholder card 로 렌더 (1B.5 ImgAuth wiring 전)
   *   - KaTeX ($...$ inline / $$...$$ block)
   *   - DOMPurify sanitize
   *   - md_status badge (processing/success/skipped/failed) — MarkdownStatusBadge 위임
   */
  import { renderDocMarkdown } from '$lib/utils/docMarkdown';
  import MarkdownStatusBadge from '$lib/components/MarkdownStatusBadge.svelte';

  type Props = {
    mdContent?: string | null;
    mdFrontmatter?: Record<string, unknown> | null;
    extractedText?: string | null;
    mdStatus?: string | null;
    mdExtractionError?: string | null;
    mdExtractionQuality?: Record<string, unknown> | null;
    placeholder?: string;
    /** 추가 래퍼 클래스. tailwind prose-* / spacing 등을 호출 측에서 입혀야 할 때. */
    class?: string;
  };

  let {
    mdContent = null,
    mdFrontmatter = null,
    extractedText = null,
    mdStatus = null,
    mdExtractionError = null,
    mdExtractionQuality = null,
    placeholder = '*텍스트 추출 대기 중*',
    class: klass = '',
  }: Props = $props();

  let usingMarkdown = $derived(!!(mdContent && mdContent.trim()));
  let body = $derived(
    usingMarkdown
      ? (mdContent as string)
      : extractedText && extractedText.trim()
        ? extractedText
        : placeholder,
  );
  let renderedHtml = $derived(renderDocMarkdown(body));

  let frontmatterEntries = $derived.by(() => {
    if (!usingMarkdown || !mdFrontmatter) return [] as [string, unknown][];
    return Object.entries(mdFrontmatter).filter(
      ([, v]) => v !== null && v !== undefined && v !== '',
    );
  });

  function formatValue(v: unknown): string {
    if (v === null || v === undefined) return '';
    if (typeof v === 'object') {
      try {
        return JSON.stringify(v);
      } catch {
        return String(v);
      }
    }
    return String(v);
  }

  let containerRef: HTMLDivElement | undefined = $state();

  // heading anchor 후처리 — gfmHeadingId 가 부여한 id 에 # 링크 prepend.
  // string-level 정규식 처리 대신 DOM 후처리 — id 에 따옴표/HTML 메타 들어와도 안전.
  $effect(() => {
    // renderedHtml 변할 때마다 재실행
    void renderedHtml;
    if (!containerRef) return;
    const headings = containerRef.querySelectorAll<HTMLHeadingElement>(
      'h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]',
    );
    for (const h of headings) {
      if (h.querySelector('a.heading-anchor')) continue;
      const id = h.getAttribute('id');
      if (!id) continue;
      const a = document.createElement('a');
      a.className = 'heading-anchor';
      a.setAttribute('href', `#${id}`);
      a.setAttribute('aria-label', '이 항목으로 링크');
      a.textContent = '#';
      h.insertBefore(a, h.firstChild);
    }
  });
</script>

<div class="mb-2">
  <MarkdownStatusBadge {mdStatus} {mdExtractionError} {mdExtractionQuality} />
</div>

{#if frontmatterEntries.length}
  <dl
    class="md-frontmatter mb-4 grid grid-cols-[max-content,1fr] gap-x-3 gap-y-1 rounded border border-border/60 bg-bg/40 px-4 py-3 text-xs"
  >
    <div class="col-span-2 mb-1 text-[10px] uppercase tracking-wide text-dim">메타</div>
    {#each frontmatterEntries as [k, v] (k)}
      <dt class="text-dim">{k}</dt>
      <dd class="break-words text-text">{formatValue(v)}</dd>
    {/each}
  </dl>
{/if}

<div
  bind:this={containerRef}
  class="markdown-body markdown-doc leading-relaxed {klass}"
>
  {@html renderedHtml}
</div>