feat(clause-kb): 책 API(절 목차/백링크) + /book/[id] 유기적 책 리더 + persist 스크립트

frontend/src/routes/book/[id]/+page.svelte

@@ -0,0 +1,201 @@
+<script>
+  // ASME 절-지식베이스: 유기적 단일-책 리더. parent 표준의 절-문서들을 한 권의 책처럼 탐색.
+  // 좌: Part-그룹 TOC / 우: 선택 절 본문 + breadcrumb + 이전/다음 + 양방향 백링크.
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import { api } from '$lib/api';
+  import MarkdownDoc from '$lib/components/MarkdownDoc.svelte';
+
+  let parentId = $state(null);
+  let parentTitle = $state('');
+  let clauses = $state([]);
+  let selectedId = $state(null);
+  let clauseDoc = $state(null);
+  let links = $state(null);
+  let expanded = $state({});
+  let loading = $state(false);
+
+  let parts = $derived.by(() => {
+    const out = [], idx = {};
+    for (const c of clauses) {
+      const p = c.clause_part || '·';
+      if (!(p in idx)) { idx[p] = out.length; out.push({ part: p, items: [] }); }
+      out[idx[p]].items.push(c);
+    }
+    return out;
+  });
+  let selMeta = $derived(clauses.find((c) => c.id === selectedId) || null);
+  const strip = (title, code) => (title || '').replace(code || '', '').trim();
+
+  async function loadBook() {
+    const r = await api(`/documents/${parentId}/clauses`);
+    parentTitle = r?.parent_title ?? '';
+    clauses = r?.clauses ?? [];
+    const e = {};
+    for (const c of clauses) e[c.clause_part || '·'] = true;
+    expanded = e;
+  }
+  async function loadClause(id) {
+    if (!id) return;
+    loading = true;
+    selectedId = id;
+    try {
+      const [d, l] = await Promise.all([
+        api(`/documents/${id}`),
+        api(`/documents/${id}/backlinks`)
+      ]);
+      clauseDoc = d;
+      links = l;
+      const sel = clauses.find((c) => c.id === id);
+      if (sel) expanded = { ...expanded, [sel.clause_part || '·']: true };
+      goto(`/book/${parentId}?c=${id}`, { replaceState: true, keepFocus: true, noScroll: true });
+      window.scrollTo({ top: 0 });
+    } finally {
+      loading = false;
+    }
+  }
+
+  onMount(async () => {
+    parentId = Number($page.params.id);
+    await loadBook();
+    const c = Number($page.url.searchParams.get('c'));
+    await loadClause(c && clauses.find((x) => x.id === c) ? c : clauses[0]?.id);
+  });
+</script>
+
+<div class="book">
+  <aside class="toc">
+    <a class="btitle" href={`/documents/${parentId}`}>{parentTitle || 'ASME 표준'}</a>
+    <div class="hint">절 {clauses.length}개 · 한 권의 책처럼 탐색</div>
+    {#each parts as g (g.part)}
+      <div class="part">
+        <button class="phead" onclick={() => (expanded = { ...expanded, [g.part]: !expanded[g.part] })}>
+          <span class="caret">{expanded[g.part] ? '▾' : '▸'}</span>
+          <span class="pname">{g.part}</span>
+          <span class="cnt">{g.items.length}</span>
+        </button>
+        {#if expanded[g.part]}
+          <ul>
+            {#each g.items as c (c.id)}
+              <li>
+                <button class="citem" class:active={c.id === selectedId} onclick={() => loadClause(c.id)}>
+                  <b>{c.clause_code}</b><span class="ct">{strip(c.title, c.clause_code)}</span>
+                </button>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </div>
+    {/each}
+  </aside>
+
+  <main class="reader">
+    {#if clauseDoc}
+      <nav class="crumb">
+        <a href={`/documents/${parentId}`}>{parentTitle}</a>
+        <span class="sep">›</span><span>{selMeta?.clause_part}</span>
+        <span class="sep">›</span><b>{links?.clause_code ?? selMeta?.clause_code}</b>
+      </nav>
+      <div class="flow">
+        <button disabled={!links?.prev} onclick={() => loadClause(links?.prev?.id)}>
+          ← {links?.prev?.clause_code ?? ''}
+        </button>
+        <span class="flowmid">{selMeta?.clause_part}</span>
+        <button disabled={!links?.next} onclick={() => loadClause(links?.next?.id)}>
+          {links?.next?.clause_code ?? ''} →
+        </button>
+      </div>
+      <h1 class="ctitle">{clauseDoc.title}</h1>
+      {#key clauseDoc.id}
+        <MarkdownDoc
+          documentId={clauseDoc.id}
+          mdContent={clauseDoc.md_content ?? clauseDoc.extracted_text}
+          mdStatus={null}
+          class="prose prose-base max-w-none text-text"
+        />
+      {/key}
+
+      {#if links && (links.forward.length || links.back.length)}
+        <section class="xlinks">
+          {#if links.forward.length}
+            <div class="xcol">
+              <h3>이 절이 참조 <span>{links.forward.length}</span></h3>
+              <ul>
+                {#each links.forward as f}
+                  <li>
+                    {#if f.doc_id}
+                      <button class="xref" onclick={() => loadClause(f.doc_id)}>{f.code}</button>
+                    {:else}
+                      <span class="xref dangling" title="외부/미분해 참조">{f.code}</span>
+                    {/if}
+                    {#if f.title}<span class="xt">{strip(f.title, f.code)}</span>{/if}
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          {/if}
+          {#if links.back.length}
+            <div class="xcol">
+              <h3>이 절을 참조 <span>{links.back.length}</span></h3>
+              <ul>
+                {#each links.back as b}
+                  <li>
+                    <button class="xref" onclick={() => loadClause(b.doc_id)}>{b.code}</button>
+                    {#if b.title}<span class="xt">{strip(b.title, b.code)}</span>{/if}
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          {/if}
+        </section>
+      {/if}
+    {:else}
+      <p class="empty">{loading ? '로딩…' : '왼쪽에서 절을 선택하세요'}</p>
+    {/if}
+  </main>
+</div>
+
+<style>
+  .book { display: grid; grid-template-columns: 300px 1fr; gap: 0; min-height: 100vh; align-items: start; }
+  .toc { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; border-right: 1px solid #e5e7eb; padding: 16px 12px; background: #fafafa; }
+  .btitle { display: block; font-weight: 700; font-size: 15px; color: #111827; text-decoration: none; line-height: 1.35; }
+  .btitle:hover { text-decoration: underline; }
+  .hint { font-size: 11.5px; color: #6b7280; margin: 4px 0 14px; }
+  .part { margin-bottom: 2px; }
+  .phead { display: flex; align-items: center; gap: 7px; width: 100%; background: none; border: 0; cursor: pointer; padding: 5px 6px; font-size: 13px; font-weight: 600; color: #374151; border-radius: 6px; }
+  .phead:hover { background: #f0f0f0; }
+  .caret { color: #9ca3af; width: 10px; }
+  .pname { flex: 1; text-align: left; }
+  .cnt { font-size: 11px; color: #9ca3af; }
+  .toc ul { list-style: none; margin: 0 0 4px; padding: 0 0 0 16px; }
+  .citem { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 3px 7px; font-size: 12.5px; color: #4b5563; border-radius: 5px; line-height: 1.4; }
+  .citem:hover { background: #eef2ff; }
+  .citem.active { background: #e0e7ff; color: #1e3a8a; }
+  .citem b { color: #1d4ed8; margin-right: 5px; }
+  .citem.active b { color: #1e3a8a; }
+  .ct { color: #6b7280; }
+  .citem.active .ct { color: #334155; }
+  .reader { padding: 26px 34px 80px; max-width: 880px; }
+  .crumb { font-size: 12.5px; color: #6b7280; margin-bottom: 12px; }
+  .crumb a { color: #2563eb; text-decoration: none; }
+  .crumb a:hover { text-decoration: underline; }
+  .crumb .sep { margin: 0 6px; color: #cbd5e1; }
+  .flow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
+  .flow button { background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 7px; padding: 6px 12px; font-size: 12.5px; color: #374151; cursor: pointer; }
+  .flow button:hover:not(:disabled) { background: #e5e7eb; }
+  .flow button:disabled { opacity: 0.4; cursor: default; }
+  .flowmid { font-size: 11.5px; color: #9ca3af; }
+  .ctitle { font-size: 22px; font-weight: 700; color: #111827; margin: 0 0 18px; letter-spacing: -0.2px; }
+  .xlinks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; padding-top: 20px; border-top: 1px solid #e5e7eb; }
+  @media (max-width: 700px) { .book { grid-template-columns: 1fr; } .toc { position: static; max-height: none; } .xlinks { grid-template-columns: 1fr; } }
+  .xcol h3 { font-size: 13px; color: #374151; margin: 0 0 8px; }
+  .xcol h3 span { color: #9ca3af; font-weight: 400; }
+  .xcol ul { list-style: none; margin: 0; padding: 0; }
+  .xcol li { display: flex; align-items: baseline; gap: 7px; padding: 2px 0; font-size: 12.5px; }
+  .xref { background: #eff6ff; border: 1px solid #dbeafe; color: #1d4ed8; border-radius: 5px; padding: 1px 7px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
+  .xref:hover { background: #dbeafe; }
+  .xref.dangling { background: #f9fafb; border-color: #e5e7eb; color: #9ca3af; cursor: default; }
+  .xt { color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .empty { color: #9ca3af; padding: 60px 0; text-align: center; }
+</style>