@clazic/urban 0.2.5 → 0.2.7

package/web/scripts/components/pipeline-footer.js

@@ -0,0 +1,511 @@
+// 전역 하단 파이프라인 strip + 바텀시트 컨트롤러
+// - 9상태 칩 렌더, /api/pipeline/stats 실시간 카운트 (200ms 디바운스)
+// - 칩 클릭 시 /api/pending?status= 결과를 바텀시트로 슬라이드 업
+
+import { subscribe } from "../sse.js";
+
+const STAGES = [
+  { key: "waiting",     label: "대기" },
+  { key: "queued",      label: "큐" },
+  { key: "downloading", label: "다운로드" },
+  { key: "converting",  label: "변환" },
+  { key: "extracting",  label: "추출" },
+  { key: "graph",       label: "그래프" },
+  { key: "wiki",        label: "위키" },
+  { key: "done",        label: "완료" },
+  { key: "failed",      label: "실패" },
+];
+
+const STAGE_LABELS = Object.fromEntries(STAGES.map((s) => [s.key, s.label]));
+const RELOAD_TYPES = new Set(["item_stage", "pending", "done", "failure", "collect:download", "collect:convert"]);
+
+const KORDOC_STAGE_LABELS = { convert: "변환", render: "렌더링", probe: "속도측정", ocr: "OCR", proofread: "교정", merge: "병합" };
+const PAGE_SIZE = 50;
+
+const state = {
+  counts: {},
+  activeStatus: null,
+  sheetOffset: 0,
+  sheetTotal: 0,
+  sheetItems: [],
+  refreshTimer: null,
+  sheetTimer: null,
+  fallbackTimer: null,
+  prevFocus: null,
+  transitioning: false,
+  // SSE로 수신된 kordoc 최신 상태 캐시 — renderSheet 이후에도 적용할 수 있도록
+  // key: docid, value: { innerHTML, className, ocrModel, renderTotal }
+  kordocLiveState: new Map(),
+};
+
+/** kordoc 상태 우선순위: done(3) > progress(2) > loading(1) > 기타(0) */
+function kordocRank(className) {
+  if (className.includes("is-done"))     return 3;
+  if (className.includes("is-progress")) return 2;
+  if (className.includes("is-loading"))  return 1;
+  return 0;
+}
+
+const reducedMotion = () =>
+  typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+export async function mountPipelineFooter() {
+  const strip = document.getElementById("pipeline-strip");
+  const sheet = document.getElementById("pipeline-sheet");
+  if (!strip || !sheet) return;
+
+  renderChips(strip);
+  strip.addEventListener("click", onChipClick);
+
+  sheet.addEventListener("click", async (e) => {
+    if (e.target.closest("[data-close]")) { closeSheet(); return; }
+    const retryBtn = e.target.closest("[data-retry]");
+    if (retryBtn) {
+      e.stopPropagation();
+      const docid = retryBtn.dataset.retry;
+      if (!docid) return;
+      retryBtn.disabled = true;
+      retryBtn.textContent = "…";
+      try {
+        await retryDocid(docid);
+        // 시트 즉시 재로드
+        if (state.activeStatus) await reloadSheet(state.activeStatus, { resetOffset: true });
+        await refreshStats();
+      } finally {
+        retryBtn.disabled = false;
+        retryBtn.textContent = "↻";
+      }
+    }
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && isOpen()) {
+      e.stopPropagation();
+      closeSheet();
+    }
+  });
+  const more = document.getElementById("pipeline-sheet-more");
+  if (more) more.addEventListener("click", loadMore);
+
+  // SSE: pipeline_stats 이벤트로 실시간 칩 업데이트 (폴링 대체)
+  subscribe("pipeline_stats", onPipelineStats);
+
+  // SSE: 단계 변경 이벤트로 바텀시트 재로드
+  subscribe("message", onSse);
+
+  // SSE 연결 끊김 감지 — 10초 후 fallback fetch
+  subscribe("connection", (s) => {
+    clearTimeout(state.fallbackTimer);
+    if (s?.connected === false) {
+      state.fallbackTimer = setTimeout(refreshStats, 10_000);
+    }
+  });
+
+  // 초기 로드: SSE 연결 전 즉시 표시용 (서버 pushStatsOnce와 경합하지만 무해)
+  await refreshStats();
+}
+
+function renderChips(root) {
+  const ul = root.querySelector(".pipeline-strip__chips");
+  if (!ul) return;
+  ul.innerHTML = STAGES.map((s) => `
+    <li>
+      <button type="button" class="pipeline-chip pipeline-chip--zero"
+              role="tab"
+              data-status="${s.key}"
+              aria-pressed="false"
+              aria-label="${s.label} 0건">
+        <span class="pipeline-chip__dot" aria-hidden="true"></span>
+        <span class="pipeline-chip__label">${s.label}</span>
+        <span class="pipeline-chip__count" data-count="${s.key}">0</span>
+      </button>
+    </li>
+  `).join("");
+}
+
+async function refreshStats() {
+  try {
+    const r = await fetch("/api/pipeline/stats", { cache: "no-store" });
+    if (!r.ok) return;
+    const j = await r.json();
+    const counts = j.byStatus || j.counts || j || {};
+    state.counts = counts;
+    for (const s of STAGES) {
+      const n = Number(counts[s.key] ?? 0);
+      const btn = document.querySelector(`.pipeline-chip[data-status="${s.key}"]`);
+      if (!btn) continue;
+      const span = btn.querySelector(".pipeline-chip__count");
+      if (span) span.textContent = String(n);
+      btn.classList.toggle("pipeline-chip--zero", n === 0);
+      btn.setAttribute("aria-label", `${s.label} ${n}건`);
+    }
+  } catch (err) {
+    // silent
+  }
+}
+
+/** SSE pipeline_stats 이벤트 수신 → 칩 즉시 업데이트 (폴링 불필요) */
+function onPipelineStats(d) {
+  const counts = d?.byStatus || {};
+  state.counts = counts;
+  for (const s of STAGES) {
+    const n = Number(counts[s.key] ?? 0);
+    const btn = document.querySelector(`.pipeline-chip[data-status="${s.key}"]`);
+    if (!btn) continue;
+    const span = btn.querySelector(".pipeline-chip__count");
+    if (span) span.textContent = String(n);
+    btn.classList.toggle("pipeline-chip--zero", n === 0);
+    btn.setAttribute("aria-label", `${s.label} ${n}건`);
+  }
+}
+
+function onSse(d) {
+  if (!d) return;
+  if (d.type === "kordoc_stage" && d.docid) {
+    updateKordocInlineFooter(d);
+    return;
+  }
+  // stats는 pipeline_stats SSE 이벤트로 수신 — 여기서 refreshStats() 불필요
+  if (!RELOAD_TYPES.has(d.type)) return;
+  if (state.activeStatus) {
+    clearTimeout(state.sheetTimer);
+    state.sheetTimer = setTimeout(() => reloadSheet(state.activeStatus, { resetOffset: false }), 180);
+  }
+}
+
+function updateKordocInlineFooter(payload) {
+  const { docid, kordocStage, phase, current, total, model } = payload;
+  const label = KORDOC_STAGE_LABELS[kordocStage] ?? kordocStage;
+
+  // ocr·proofread는 페이지마다 stage_start가 반복 발생 — start는 캐시 업데이트만, DOM 갱신 생략
+  const CYCLE_STAGES = new Set(["ocr", "proofread"]);
+  if (phase === "start" && CYCLE_STAGES.has(kordocStage)) {
+    // 모델명은 캐시에 저장해두기 위해 el 없어도 처리
+    const el = document.querySelector(`[data-kordoc-footer="${CSS.escape(docid)}"]`);
+    if (kordocStage === "ocr") {
+      const modelName = model || payload.message?.match(/\((.+?)\)/)?.[1];
+      if (modelName) {
+        if (el && !el.dataset.ocrModel) el.dataset.ocrModel = modelName;
+        // 캐시에도 반영
+        const cached = state.kordocLiveState.get(docid);
+        if (cached) cached.ocrModel = cached.ocrModel || modelName;
+      }
+    }
+    return;
+  }
+
+  // DOM 요소 — 없어도 캐시는 업데이트 (나중에 renderSheet가 적용)
+  const el = document.querySelector(`[data-kordoc-footer="${CSS.escape(docid)}"]`);
+
+  if (phase === "start") {
+    const html = `<span>▶ ${escapeHtml(label)}</span><div class="kordoc-bar"><div class="kordoc-bar-fill"></div></div>`;
+    const cls = "pipeline-sheet__kordoc is-loading";
+    if (el) { el.innerHTML = html; el.className = cls; }
+    state.kordocLiveState.set(docid, { innerHTML: html, className: cls,
+      ocrModel: el?.dataset.ocrModel || state.kordocLiveState.get(docid)?.ocrModel || "",
+      renderTotal: el?.dataset.renderTotal || state.kordocLiveState.get(docid)?.renderTotal || "" });
+  } else if (phase === "progress") {
+    const hasPages = typeof current === "number" && typeof total === "number";
+    const pct = payload.percent ?? (hasPages && total > 0 ? Math.round((current / total) * 100) : 0);
+    const countLabel = hasPages ? ` ${current}/${total}` : ` ${pct}%`;
+    const cached = state.kordocLiveState.get(docid) ?? {};
+    let ocrModel = el?.dataset.ocrModel || cached.ocrModel || "";
+    if (kordocStage === "ocr" && !ocrModel) {
+      ocrModel = model || payload.message?.match(/\((.+?)\)/)?.[1] || "";
+    }
+    const renderTotal = (kordocStage === "render" && hasPages) ? String(total) : (el?.dataset.renderTotal || cached.renderTotal || "");
+    const modelHint = kordocStage === "ocr" && ocrModel ? ` · ${ocrModel}` : "";
+    const html = `<span>${escapeHtml(label)}${countLabel}${escapeHtml(modelHint)}</span><div class="kordoc-bar"><div class="kordoc-bar-fill" style="width:${pct}%"></div></div><span class="kordoc-pct">${pct}%</span>`;
+    const cls = "pipeline-sheet__kordoc is-progress";
+    if (el) {
+      if (ocrModel) el.dataset.ocrModel = ocrModel;
+      if (renderTotal) el.dataset.renderTotal = renderTotal;
+      el.innerHTML = html; el.className = cls;
+    }
+    state.kordocLiveState.set(docid, { innerHTML: html, className: cls, ocrModel, renderTotal });
+  } else if (phase === "done") {
+    const cached = state.kordocLiveState.get(docid) ?? {};
+    const ocrModel = el?.dataset.ocrModel || cached.ocrModel || "";
+    const renderTotal = el?.dataset.renderTotal || cached.renderTotal || "";
+    const ocrHint = kordocStage === "ocr" && ocrModel ? ` · ${ocrModel}` : "";
+    const renderHint = kordocStage === "render" && renderTotal ? ` · ${renderTotal}장` : "";
+    const text = `✓ ${label}${ocrHint}${renderHint}`;
+    const cls = "pipeline-sheet__kordoc is-done";
+    if (el) { el.textContent = text; el.className = cls; }
+    state.kordocLiveState.set(docid, { innerHTML: escapeHtml(text), className: cls, ocrModel, renderTotal });
+  } else if (phase === "error") {
+    const text = `✗ ${label}`;
+    const cls = "pipeline-sheet__kordoc is-error";
+    if (el) { el.textContent = text; el.className = cls; }
+    state.kordocLiveState.set(docid, { innerHTML: escapeHtml(text), className: cls,
+      ocrModel: el?.dataset.ocrModel || "", renderTotal: el?.dataset.renderTotal || "" });
+  }
+}
+
+function onChipClick(e) {
+  const btn = e.target.closest(".pipeline-chip");
+  if (!btn) return;
+  const status = btn.dataset.status;
+  if (!status) return;
+  if (state.activeStatus === status && isOpen()) {
+    closeSheet();
+    return;
+  }
+  for (const c of document.querySelectorAll(".pipeline-chip")) {
+    c.setAttribute("aria-pressed", c === btn ? "true" : "false");
+  }
+  openSheet(status);
+}
+
+export function isOpen() {
+  const sheet = document.getElementById("pipeline-sheet");
+  return !!sheet && !sheet.hasAttribute("hidden") && sheet.classList.contains("is-open");
+}
+
+export async function openSheet(status) {
+  const sheet = document.getElementById("pipeline-sheet");
+  if (!sheet) return;
+  state.activeStatus = status;
+  state.sheetOffset = 0;
+  state.sheetItems = [];
+  const titleEl = document.getElementById("pipeline-sheet-title");
+  if (titleEl) titleEl.textContent = STAGE_LABELS[status] || status;
+
+  state.prevFocus = document.activeElement;
+  sheet.hidden = false;
+  const panel = sheet.querySelector(".pipeline-sheet__panel");
+
+  if (reducedMotion()) {
+    sheet.classList.add("is-open");
+  } else {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => sheet.classList.add("is-open"));
+    });
+  }
+  if (panel) setTimeout(() => panel.focus({ preventScroll: true }), 60);
+
+  await reloadSheet(status, { resetOffset: true });
+}
+
+export function closeSheet() {
+  const sheet = document.getElementById("pipeline-sheet");
+  if (!sheet || sheet.hidden) return;
+  sheet.classList.remove("is-open");
+  for (const c of document.querySelectorAll(".pipeline-chip")) c.setAttribute("aria-pressed", "false");
+  state.activeStatus = null;
+
+  const finalize = () => {
+    sheet.hidden = true;
+    if (state.prevFocus && typeof state.prevFocus.focus === "function") {
+      state.prevFocus.focus();
+      state.prevFocus = null;
+    }
+  };
+  if (reducedMotion()) {
+    finalize();
+    return;
+  }
+  const panel = sheet.querySelector(".pipeline-sheet__panel");
+  let done = false;
+  const handler = () => { if (done) return; done = true; panel?.removeEventListener("transitionend", handler); finalize(); };
+  panel?.addEventListener("transitionend", handler);
+  setTimeout(handler, 320); // safety
+}
+
+export async function reloadSheet(status, { resetOffset = false } = {}) {
+  if (!status) status = state.activeStatus;
+  if (!status) return;
+  if (resetOffset) {
+    state.sheetOffset = 0;
+    state.sheetItems = [];
+  }
+  try {
+    const params = new URLSearchParams({
+      status,
+      limit: String(PAGE_SIZE),
+      offset: String(state.sheetOffset),
+    });
+    const r = await fetch(`/api/pending?${params}`, { cache: "no-store" });
+    if (!r.ok) return;
+    const j = await r.json();
+    const items = j.items || [];
+    state.sheetTotal = Number(j.total ?? items.length);
+    if (resetOffset || state.sheetOffset === 0) {
+      state.sheetItems = items;
+    } else {
+      state.sheetItems = state.sheetItems.concat(items);
+    }
+    renderSheet();
+  } catch (err) {
+    // silent
+  }
+}
+
+function loadMore() {
+  state.sheetOffset += PAGE_SIZE;
+  reloadSheet(state.activeStatus, { resetOffset: false });
+}
+
+function renderSheet() {
+  const listEl = document.getElementById("pipeline-sheet-list");
+  const countEl = document.getElementById("pipeline-sheet-count");
+  const moreEl = document.getElementById("pipeline-sheet-more");
+  if (!listEl) return;
+
+  if (countEl) countEl.textContent = `${state.sheetTotal}건`;
+
+  if (!state.sheetItems.length) {
+    listEl.innerHTML = `<li class="pipeline-sheet__empty">해당 상태의 진행 파일이 없습니다.</li>`;
+  } else {
+    listEl.innerHTML = state.sheetItems.map((it) => {
+      const title = escapeHtml(it.display_title || it.title || it.raw_filename || it.docid || "(제목 없음)");
+      const subId = escapeHtml(it.docid || "");
+      const rawFile = escapeHtml(it.raw_filename || "");
+      const source = escapeHtml(it.source || "");
+      const institution = escapeHtml(it.institution || "");
+      const updated = formatTs(it.finished_at || it.started_at || it.found_at);
+      const stage = escapeHtml(STAGE_LABELS[it.status] || it.status || "");
+      const isFailed = it.status === "failed";
+      const failedStage = escapeHtml(it.failed_stage || "");
+      const failedReason = escapeHtml(truncate(it.failed_reason || "", 240));
+
+      const metaParts = [];
+      if (source) metaParts.push(source);
+      if (institution) metaParts.push(institution);
+      if (updated) metaParts.push(updated);
+      if (it.retry_count) metaParts.push(`재시도 ${it.retry_count}`);
+
+      // 파일명 줄: 왼쪽에 raw filename, 오른쪽에 실패 사유(실패일 때만)
+      const hasFileLine = rawFile || (isFailed && (failedReason || failedStage));
+      const fileLine = hasFileLine ? `
+        <div class="pipeline-sheet__item-fileline">
+          <span class="pipeline-sheet__item-filename" title="${rawFile}">${rawFile ? `📄 ${rawFile}` : ""}</span>
+          ${isFailed && (failedReason || failedStage) ? `
+            <span class="pipeline-sheet__item-failure" title="${failedReason || failedStage}">
+              <span class="pipeline-sheet__failure-label">실패${failedStage ? `·${failedStage}` : ""}</span>
+              ${failedReason ? `<span class="pipeline-sheet__failure-reason">${failedReason}</span>` : ""}
+            </span>
+          ` : ""}
+        </div>
+      ` : "";
+
+      // kordoc 진행 상태 (converting 항목)
+      let kordocHtml = "";
+      if (it.status === "converting" && it.kordoc_progress) {
+        try {
+          const p = JSON.parse(it.kordoc_progress);
+          const klabel = KORDOC_STAGE_LABELS[p.stage] ?? p.stage ?? "";
+          let inner = "";
+          let cls = "";
+          const hasPages = typeof p.current === "number" && typeof p.total === "number";
+          const hasPct = typeof p.percent === "number";
+          if (hasPages || hasPct) {
+            const pct = hasPages ? (p.total > 0 ? Math.round((p.current / p.total) * 100) : 0) : p.percent;
+            const modelHint = (p.stage === "ocr" && p.model) ? ` · ${escapeHtml(p.model)}` : "";
+            const label = hasPages ? `${escapeHtml(klabel)} ${p.current}/${p.total}${modelHint}` : `${escapeHtml(klabel)} ${pct}%${modelHint}`;
+            inner = `<span>${label}</span><div class="kordoc-bar"><div class="kordoc-bar-fill" style="width:${pct}%"></div></div><span class="kordoc-pct">${pct}%</span>`;
+            cls = "is-progress";
+          } else if (klabel) {
+            // 진행 정보 없는 단계 → 로딩 바 (is-start는 바 없어 시각적 피드백 없음)
+            const modelHint = (p.stage === "ocr" && p.model) ? ` · ${escapeHtml(p.model)}` : "";
+            inner = `<span>▶ ${escapeHtml(klabel)}${modelHint}</span><div class="kordoc-bar"><div class="kordoc-bar-fill"></div></div>`;
+            cls = "is-loading";
+          }
+          // inner가 비어 있으면 기본 로딩 바
+          if (!inner) { inner = `<span>▶ 변환 중</span><div class="kordoc-bar"><div class="kordoc-bar-fill"></div></div>`; cls = "is-loading"; }
+          kordocHtml = `<div class="pipeline-sheet__kordoc ${cls}" data-kordoc-footer="${subId}">${inner}</div>`;
+        } catch {}
+      }
+      // kordoc_progress 없음(변환 초기화 중)에도 로딩 바 노출
+      if (!kordocHtml && it.status === "converting") {
+        kordocHtml = `<div class="pipeline-sheet__kordoc is-loading" data-kordoc-footer="${subId}"><span>▶ 변환 준비 중</span><div class="kordoc-bar"><div class="kordoc-bar-fill"></div></div></div>`;
+      }
+
+      const showId = subId && subId !== title ? subId : "";
+      return `
+        <li class="pipeline-sheet__item ${isFailed ? "pipeline-sheet__item--failed" : ""}" data-docid="${subId}">
+          <div class="pipeline-sheet__item-main">
+            <div class="pipeline-sheet__item-title" title="${title}">${title}</div>
+            ${kordocHtml}
+            ${fileLine}
+            <div class="pipeline-sheet__item-meta">
+              ${showId ? `<span class="pipeline-sheet__item-id">${showId}</span>` : ""}
+              ${metaParts.map((p) => `<span>${p}</span>`).join("")}
+            </div>
+          </div>
+          ${isFailed ? `<button type="button" class="pipeline-sheet__retry" data-retry="${subId}" title="재시도">↻</button>` : ""}
+          <span class="pipeline-sheet__item-stage ${isFailed ? "pipeline-sheet__item-stage--failed" : ""}">${stage}</span>
+        </li>
+      `;
+    }).join("");
+
+    // kordocLiveState 적용: SSE로 캐시된 최신 상태가 DB 렌더 결과보다 앞서면 덮어쓰기
+    // 시트를 새로 열었을 때 이미 진행 중이던 kordoc 상태도 즉시 반영됨
+    for (const [docid, live] of state.kordocLiveState) {
+      const newEl = listEl.querySelector(`[data-kordoc-footer="${CSS.escape(docid)}"]`);
+      if (!newEl) continue;
+      if (kordocRank(live.className) >= kordocRank(newEl.className)) {
+        newEl.innerHTML = live.innerHTML; // 모든 케이스에서 escapeHtml된 문자열로 저장됨
+        newEl.className = live.className;
+        if (live.ocrModel) newEl.dataset.ocrModel = live.ocrModel;
+        if (live.renderTotal) newEl.dataset.renderTotal = live.renderTotal;
+      }
+    }
+  }
+
+  if (moreEl) {
+    const hasMore = state.sheetItems.length < state.sheetTotal;
+    moreEl.hidden = !hasMore;
+  }
+}
+
+function formatTs(ms) {
+  if (!ms) return "";
+  const n = Number(ms);
+  if (!Number.isFinite(n) || n <= 0) return "";
+  const d = new Date(n);
+  const pad = (x) => String(x).padStart(2, "0");
+  return `${pad(d.getMonth() + 1)}/${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+async function retryDocid(docid, { force = false } = {}) {
+  try {
+    const r = await fetch(`/api/pending/${encodeURIComponent(docid)}/retry`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ force }),
+    });
+    const body = await r.json().catch(() => ({}));
+    if (r.status === 409 && body?.reason === "blocked_by_cache") {
+      const msg = [
+        `이 항목은 과거 수집에서 차단 학습됐습니다.`,
+        ``,
+        `  상태: ${body.status}`,
+        body.detail ? `  사유: ${body.detail}` : null,
+        ``,
+        `차단 캐시 해제 후 재시도할까요?`,
+      ].filter(Boolean).join("\n");
+      if (window.confirm(msg)) return retryDocid(docid, { force: true });
+      return { ok: false, cancelled: true };
+    }
+    if (!r.ok) throw new Error(body?.error || `HTTP ${r.status}`);
+    return body;
+  } catch (e) {
+    console.error("[pipeline-footer] retry 실패:", e);
+    alert(`재시도 실패: ${e.message}`);
+    return { ok: false, error: e.message };
+  }
+}
+
+function truncate(s, n) {
+  const str = String(s || "");
+  return str.length > n ? str.slice(0, n - 1) + "…" : str;
+}
+
+function escapeHtml(s) {
+  return String(s)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}

package/web/scripts/components/pipeline-strip.js

@@ -0,0 +1,19 @@
+export function renderPipelineBar(container, pipeline = {}, failCount = 0) {
+  if (!container) return;
+  const steps = [
+    ["waiting", "대기"],
+    ["queued", "큐대기"],
+    ["downloading", "다운로드"],
+    ["converting", "MD변환"],
+    ["extracting", "AI추출"],
+    ["graph", "그래프"],
+    ["wiki", "위키"],
+    ["done", "완료"],
+    ["failed", "실패"],
+  ];
+  container.innerHTML = steps.map(([key, label]) => {
+    const value = key === "failed" ? failCount : (pipeline[key] || 0);
+    const active = value > 0 ? " on" : "";
+    return `<div class="step${active}" data-stage="${key}"><div class="n">${label}</div><div class="m">${value}</div></div>`;
+  }).join("");
+}

package/web/scripts/components/stat-cards.js

@@ -0,0 +1,6 @@
+import { formatNumber } from "../format.js";
+
+export function renderStat(id, value) {
+  const el = document.getElementById(id);
+  if (el) el.textContent = formatNumber(value);
+}

package/web/scripts/components/table.js

@@ -0,0 +1,9 @@
+import { escapeHtml } from "../dom.js";
+
+export function renderRows(container, rowsHtml) {
+  if (container) container.innerHTML = rowsHtml || '<div class="empty-state">항목이 없습니다.</div>';
+}
+
+export function textCell(value) {
+  return `<span>${escapeHtml(value)}</span>`;
+}

package/web/scripts/components/toast.js

@@ -0,0 +1,12 @@
+export function pushToast(message, tone = "info") {
+  const root = document.getElementById("toast-root");
+  if (!root) return;
+  const el = document.createElement("div");
+  el.className = "card";
+  el.style.padding = "12px 14px";
+  el.style.minWidth = "240px";
+  el.style.color = tone === "error" ? "var(--danger)" : "var(--label-1)";
+  el.textContent = message;
+  root.appendChild(el);
+  setTimeout(() => el.remove(), 3200);
+}

package/web/scripts/dom.js

@@ -0,0 +1,14 @@
+export const qs = (selector, root = document) => root.querySelector(selector);
+export const qsa = (selector, root = document) => Array.from(root.querySelectorAll(selector));
+
+export function escapeHtml(value) {
+  return String(value ?? "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+export function setHtml(el, html) {
+  if (el) el.innerHTML = html;
+}

package/web/scripts/format.js

@@ -0,0 +1,20 @@
+export function formatNumber(value) {
+  return Number(value || 0).toLocaleString("ko-KR");
+}
+
+export function formatDate(value) {
+  if (!value) return "";
+  return new Date(value).toLocaleDateString("ko-KR");
+}
+
+export function formatDateTime(value) {
+  if (!value) return "";
+  return new Date(value).toLocaleString("ko-KR");
+}
+
+export function formatDuration(ms) {
+  const value = Number(ms || 0);
+  if (value < 1000) return `${value}ms`;
+  if (value < 60000) return `${(value / 1000).toFixed(1)}초`;
+  return `${Math.floor(value / 60000)}분 ${Math.floor((value % 60000) / 1000)}초`;
+}