@leviosa-ai/detail-page-editor 0.8.0 → 0.10.0

package/components/detail-page/detail-page-editor.tsx

@@ -1,20 +1,12 @@
 "use client";
 
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { EditorHotkeys } from "./editor-hotkeys";
+import { useAutoSave, type SaveReason } from "./use-auto-save";
 import { FindReplacePanel } from "./find-replace-panel";
 
-import {
-  ChevronLeft,
-  Copy,
-  Download,
-  Eye,
-  EyeOff,
-  ListChecks,
-  RefreshCw,
-  Save,
-} from "lucide-react";
+import { ChevronLeft, Save } from "lucide-react";
 
 import {
   applyTextLineFit,
@@ -49,16 +41,28 @@ import type {
   GenerateDataGifFn,
   RemoveBackgroundFn,
 } from "./ai-generate-panel";
-import type {
-  LeviosaCanvasDocument,
-  CanvasSlotBinding,
-} from "../../types/detail-page-canvas";
+import type { LeviosaCanvasDocument } from "../../types/detail-page-canvas";
 
 export type DetailPageEditorProps = {
   initialDocument: LeviosaCanvasDocument;
   saving?: boolean;
   uploadFile?: (file: File) => Promise<string>;
-  onSave: (document: LeviosaCanvasDocument) => Promise<void>;
+  /**
+   * 문서를 저장한다. `reason` 은 왜 지금 저장하는가다 — 앱이 이걸 보고 무거운 뒷일
+   * (상세페이지의 HTML 굽기 같은)을 할지 말지 고른다. 자동저장은 `auto`, 저장 버튼은
+   * `manual`, 탭을 닫거나 편집기를 떠날 때는 `leave` 로 온다.
+   */
+  onSave: (
+    document: LeviosaCanvasDocument,
+    meta: { reason: SaveReason },
+  ) => Promise<void>;
+  /**
+   * 자동저장 간격(ms). 없으면 자동저장을 안 한다.
+   *
+   * 저장이 무거운 화면은 길게 잡는다 — 상세페이지 저장은 서버가 HTML 을 새로 만들어
+   * S3 에 올리고, 캐러셀 저장은 문서 JSON 만 넣는다.
+   */
+  autoSaveDelayMs?: number;
   /** AI 생성 탭의 프롬프트 → 이미지 URL 콜백. 없으면 패널은 안내만 표시. */
   onGenerateImage?: GenerateImageFn;
   /** AI 생성 탭의 프롬프트 → 애니메이션 GIF URL 콜백. 없으면 GIF 모드는 안내만 표시. */
@@ -124,313 +128,12 @@ export type DetailPageEditorProps = {
 
 type CanvasJson = Record<string, unknown>;
 
-type CanvasJsonElement = Record<string, unknown> & {
-  id?: string;
-  type?: string;
-  x?: number;
-  y?: number;
-  width?: number;
-  height?: number;
-  text?: string;
-  src?: string;
-  custom?: Record<string, unknown>;
-  children?: CanvasJsonElement[];
-};
-
-type SlotInspection = {
-  slot: string;
-  binding?: CanvasSlotBinding;
-  element?: CanvasJsonElement;
-  pageId?: string;
-  state: "ok" | "warning" | "error";
-  message: string;
-};
-
-type TemplateLintIssue = {
-  level: "error" | "warning" | "info";
-  title: string;
-  detail: string;
-  slot?: string;
-  elementId?: string;
-};
-
-type TemplateQaSnapshot = {
-  json: CanvasJson;
-  slots: SlotInspection[];
-  lint: TemplateLintIssue[];
-  summary: string;
-  counts: {
-    pages: number;
-    elements: number;
-    slots: number;
-    errors: number;
-    warnings: number;
-  };
-};
-
-const QA_OVERLAY_CUSTOM_KEY = "leviosaQaOverlay";
-const QA_OVERLAY_PREFIX = "leviosa-qa-overlay";
-
-function asRecord(value: unknown): Record<string, unknown> {
-  return value && typeof value === "object" && !Array.isArray(value)
-    ? (value as Record<string, unknown>)
-    : {};
-}
-
-function asArray(value: unknown): unknown[] {
-  return Array.isArray(value) ? value : [];
-}
-
-function finiteNumber(value: unknown): number | null {
-  return typeof value === "number" && Number.isFinite(value) ? value : null;
-}
-
-function isQaOverlayElement(element: CanvasJsonElement): boolean {
-  return element.id?.startsWith(`${QA_OVERLAY_PREFIX}-`) === true ||
-    element.custom?.[QA_OVERLAY_CUSTOM_KEY] === true;
-}
-
-function walkElements(
-  json: CanvasJson,
-  visitor: (element: CanvasJsonElement, page: Record<string, unknown>) => void,
-) {
-  for (const page of asArray(json.pages) as Array<Record<string, unknown>>) {
-    const visit = (element: CanvasJsonElement) => {
-      visitor(element, page);
-      for (const child of asArray(element.children) as CanvasJsonElement[]) {
-        visit(child);
-      }
-    };
-    for (const element of asArray(page.children) as CanvasJsonElement[]) {
-      visit(element);
-    }
-  }
-}
-
-function stripQaOverlayElements(json: CanvasJson): CanvasJson {
-  const clone = JSON.parse(JSON.stringify(json)) as CanvasJson;
-  const strip = (elements: CanvasJsonElement[]): CanvasJsonElement[] =>
-    elements
-      .filter((element) => !isQaOverlayElement(element))
-      .map((element) => ({
-        ...element,
-        children: Array.isArray(element.children)
-          ? strip(element.children)
-          : element.children,
-      }));
-
-  clone.pages = (asArray(clone.pages) as Array<Record<string, unknown>>).map((page) => ({
-    ...page,
-    children: strip(asArray(page.children) as CanvasJsonElement[]),
-  }));
-  return clone;
-}
-
-function getSlotFromElement(element: CanvasJsonElement): string {
-  const custom = asRecord(element.custom);
-  return typeof custom.leviosaSlot === "string" ? custom.leviosaSlot : "";
-}
-
-function getElementKind(element?: CanvasJsonElement): CanvasSlotBinding["kind"] | null {
-  if (!element) return null;
-  if (element.type === "image") return "image";
-  if (element.type === "text") return "text";
-  return null;
-}
-
-function formatRect(element?: CanvasJsonElement): string {
-  if (!element) return "-";
-  const x = finiteNumber(element.x) ?? 0;
-  const y = finiteNumber(element.y) ?? 0;
-  const width = finiteNumber(element.width) ?? 0;
-  const height = finiteNumber(element.height) ?? 0;
-  return `${Math.round(x)}, ${Math.round(y)} / ${Math.round(width)} x ${Math.round(height)}`;
-}
-
-function buildQaSnapshot(
-  document: LeviosaCanvasDocument,
-  json: CanvasJson,
-): TemplateQaSnapshot {
-  const slotBindings = document.slot_bindings ?? {};
-  const cleanJson = stripQaOverlayElements(json);
-  const pages = asArray(cleanJson.pages) as Array<Record<string, unknown>>;
-  const elementById = new Map<string, { element: CanvasJsonElement; pageId?: string }>();
-  const slotByElementId = new Map<string, string[]>();
-  const slotsFromElements = new Map<string, { element: CanvasJsonElement; pageId?: string }>();
-  let elementCount = 0;
-
-  walkElements(cleanJson, (element, page) => {
-    elementCount += 1;
-    if (element.id) {
-      const pageId = typeof page.id === "string" ? page.id : undefined;
-      elementById.set(element.id, { element, pageId });
-      const slot = getSlotFromElement(element);
-      if (slot) slotsFromElements.set(slot, { element, pageId });
-    }
-  });
-
-  for (const [slot, binding] of Object.entries(slotBindings)) {
-    const list = slotByElementId.get(binding.element_id) ?? [];
-    list.push(slot);
-    slotByElementId.set(binding.element_id, list);
-  }
-
-  const lint: TemplateLintIssue[] = [];
-  const slots = Object.entries(slotBindings)
-    .sort(([a], [b]) => a.localeCompare(b))
-    .map(([slot, binding]) => {
-      const target = elementById.get(binding.element_id);
-      const element = target?.element;
-      const inferredKind = getElementKind(element);
-      let state: SlotInspection["state"] = "ok";
-      let message = "연결됨";
-
-      if (!element) {
-        state = "error";
-        message = "바인딩 대상 요소가 없습니다";
-        lint.push({
-          level: "error",
-          title: "Missing binding target",
-          detail: `${binding.element_id} 요소를 찾을 수 없습니다.`,
-          slot,
-          elementId: binding.element_id,
-        });
-      } else if (inferredKind && inferredKind !== binding.kind) {
-        state = "warning";
-        message = `${binding.kind} 슬롯이 ${element.type} 요소에 연결됨`;
-        lint.push({
-          level: "warning",
-          title: "Slot kind mismatch",
-          detail: `${binding.kind} 슬롯이 ${element.type} 요소에 연결되어 있습니다.`,
-          slot,
-          elementId: binding.element_id,
-        });
-      }
-
-      if (element?.type === "text" && !String(element.text ?? "").trim()) {
-        state = state === "error" ? state : "warning";
-        message = "텍스트가 비어 있습니다";
-        lint.push({
-          level: "warning",
-          title: "Empty text slot",
-          detail: "텍스트 요소에 표시할 문구가 없습니다.",
-          slot,
-          elementId: binding.element_id,
-        });
-      }
-
-      if (element?.type === "image" && !String(element.src ?? "").trim()) {
-        state = state === "error" ? state : "warning";
-        message = "이미지 URL이 비어 있습니다";
-        lint.push({
-          level: "warning",
-          title: "Empty image slot",
-          detail: "이미지 요소에 src가 없습니다.",
-          slot,
-          elementId: binding.element_id,
-        });
-      }
-
-      const width = finiteNumber(element?.width);
-      const height = finiteNumber(element?.height);
-      if (element && (width === null || height === null || width <= 0 || height <= 0)) {
-        state = state === "error" ? state : "warning";
-        message = "요소 크기를 확인하세요";
-        lint.push({
-          level: "warning",
-          title: "Invalid element bounds",
-          detail: "요소의 width 또는 height가 0 이하입니다.",
-          slot,
-          elementId: binding.element_id,
-        });
-      }
-
-      return {
-        slot,
-        binding,
-        element,
-        pageId: target?.pageId,
-        state,
-        message,
-      };
-    });
-
-  for (const [elementId, slotNames] of slotByElementId) {
-    if (slotNames.length > 1) {
-      lint.push({
-        level: "warning",
-        title: "Duplicate element binding",
-        detail: `${slotNames.join(", ")} 슬롯이 같은 요소를 공유합니다.`,
-        elementId,
-      });
-    }
-  }
-
-  for (const [slot, target] of slotsFromElements) {
-    if (!slotBindings[slot]) {
-      lint.push({
-        level: "info",
-        title: "Unregistered slot marker",
-        detail: "요소 custom.leviosaSlot은 있지만 slot_bindings에는 없습니다.",
-        slot,
-        elementId: target.element.id,
-      });
-    }
-  }
-
-  const canvasWidth = finiteNumber(document.canvas.width);
-  const jsonWidth = finiteNumber(cleanJson.width);
-  if (canvasWidth && jsonWidth && canvasWidth !== jsonWidth) {
-    lint.push({
-      level: "warning",
-      title: "Canvas width drift",
-      detail: `문서 canvas.width ${canvasWidth}와 문서 JSON width ${jsonWidth}가 다릅니다.`,
-    });
-  }
-
-  const errors = lint.filter((issue) => issue.level === "error").length;
-  const warnings = lint.filter((issue) => issue.level === "warning").length;
-  const summary = [
-    `Template: ${document.template_id ?? "unspecified"} v${document.template_version ?? "-"}`,
-    `Canvas: ${cleanJson.width ?? document.canvas.width} x ${cleanJson.height ?? "-"}`,
-    `Pages: ${pages.length}, Elements: ${elementCount}, Slots: ${slots.length}`,
-    `Lint: ${errors} errors, ${warnings} warnings`,
-    "",
-    "Slots",
-    ...slots.map(
-      (slot) =>
-        `- ${slot.slot}: ${slot.state.toUpperCase()} | ${slot.binding?.kind ?? "-"} | ${slot.binding?.element_id ?? "-"} | ${formatRect(slot.element)} | ${slot.message}`,
-    ),
-    "",
-    "Lint",
-    ...(lint.length
-      ? lint.map(
-          (issue) =>
-            `- ${issue.level.toUpperCase()}: ${issue.title}${issue.slot ? ` (${issue.slot})` : ""} - ${issue.detail}`,
-        )
-      : ["- PASS: template lint found no blocking issues"]),
-  ].join("\n");
-
-  return {
-    json: cleanJson,
-    slots,
-    lint,
-    summary,
-    counts: {
-      pages: pages.length,
-      elements: elementCount,
-      slots: slots.length,
-      errors,
-      warnings,
-    },
-  };
-}
-
 export function DetailPageEditor({
   initialDocument,
   saving = false,
   uploadFile,
   onSave,
+  autoSaveDelayMs,
   onGenerateImage,
   onGenerateGif,
   onGenerateTextGif,
@@ -467,25 +170,23 @@ export function DetailPageEditor({
   const [saveOk, setSaveOk] = useState(false);
   // 편집 한도 소진 시 "편집 크레딧 추가하기" → pricing 모달을 인플레이스로 연다.
   const [pricingOpen, setPricingOpen] = useState(false);
-  const [qaJson, setQaJson] = useState<CanvasJson>(initialDocument.canvas_json);
-  const [overlayEnabled, setOverlayEnabled] = useState(false);
-  const [summaryCopied, setSummaryCopied] = useState(false);
   // 어댑터를 안 거친다. `adaptLeviosaCustomProps`는 SDK가 **못 읽는** 장식을 읽을 수
   // 있는 모양으로 낮춰 주던 일이었고(그림자·그라데이션 → 대표 단색), 우리 렌더러는
   // 그 필드들을 원본 그대로 읽는다. 낮춘 것을 넣으면 오히려 원본보다 못한 그림이 된다.
   // 브랜드 자산 주소는 바이트 경로로 옮겨서 연다 — 302 를 따라가면 CORS 가 깨져서
   // 캔버스가 그림을 못 읽는다(asset-bytes-url 에 실측 표를 적어 뒀다).
-  const store = useMemo(() => {
+  // 문서는 편집기가 열릴 때 **한 번만** 읽는다. 저장이 끝나고 앱이 서버가 돌려준
+  // 문서를 도로 넣어도 캔버스를 다시 만들지 않는다 — 다시 만들면 되돌리기 100단과
+  // 선택이 통째로 날아간다. 저장 버튼 한 번에 ⌘Z 가 죽던 것이 그 증상이었고,
+  // 자동저장이 붙으면 몇 초마다 그렇게 된다.
+  //
+  // 정말로 다른 문서를 여는 것은 부르는 쪽이 `key` 로 다시 마운트한다.
+  const [store] = useState(() => {
     ensureCanvasKey();
     return createCanvasStore(
       normalizeDocumentAssetSrcs(initialDocument.canvas_json) as DocumentJson,
     );
-  }, [initialDocument.canvas_json]);
-
-  const qaSnapshot = useMemo(
-    () => buildQaSnapshot(initialDocument, qaJson),
-    [initialDocument, qaJson],
-  );
+  });
 
   // 글꼴 준비. 문서가 쓰는 얼굴을 전부 받아 놓고, 다 온 뒤에 줄바꿈 손질
   // (`applyTextLineFit`)을 한 번 돌린다 — 폴백 서체로 재면 과대측정해서 손질이
@@ -506,159 +207,30 @@ export function DetailPageEditor({
     };
   }, [store]);
 
-  useEffect(() => {
-    // Initial sync is immediate so the QA panel is populated on mount.
-    setQaJson(stripQaOverlayElements(store.toJSON() as CanvasJson));
-
-    // 스토어는 요소를 끄는 내내 "change"를 계속 쏜다 — 끌기·크기조절·타이핑 모두.
-    // or typed into. Recomputing the QA snapshot on every event deep-clones and
-    // walks the whole document many times per second, which freezes the canvas
-    // layer on large detail-page documents. The QA panel does not need live
-    // updates mid-gesture, so coalesce changes with a trailing debounce: the
-    // snapshot refreshes ~300ms after the user stops interacting.
-    let timer: ReturnType<typeof setTimeout> | null = null;
-    // 바뀐 문서를 이벤트에 실어 받지 않고 **잠잠해진 뒤에** 한 번 읽는다. 글자 한 자마다
-    // 문서 전체를 직렬화해 넘기면 그 비용이 타이핑 지연으로 그대로 보인다.
-    const flush = () => {
-      timer = null;
-      setQaJson(stripQaOverlayElements(store.toJSON() as CanvasJson));
-    };
-    const off = store.on("change", () => {
-      if (timer) clearTimeout(timer);
-      timer = setTimeout(flush, 300);
-    });
-    return () => {
-      if (timer) clearTimeout(timer);
-      off();
-    };
-  }, [store]);
-
-  useEffect(() => {
-    setSummaryCopied(false);
-  }, [qaSnapshot.summary]);
-
-  const removeOverlayElements = () => {
-    const ids: string[] = [];
-    walkElements(store.toJSON() as CanvasJson, (element) => {
-      if (element.id && isQaOverlayElement(element)) ids.push(element.id);
-    });
-    if (ids.length) store.deleteElements(ids);
-  };
-
-  const addOverlayElements = () => {
-    removeOverlayElements();
-    const cleanJson = qaSnapshot.json;
-    const pages = asArray(cleanJson.pages) as Array<Record<string, unknown>>;
-    for (const slot of qaSnapshot.slots) {
-      if (!slot.element || !slot.element.id || !slot.pageId) continue;
-      const pageIndex = pages.findIndex((page) => page.id === slot.pageId);
-      const page = store.pages[pageIndex >= 0 ? pageIndex : 0];
-      if (!page) continue;
-      const x = finiteNumber(slot.element.x) ?? 0;
-      const y = finiteNumber(slot.element.y) ?? 0;
-      const width = Math.max(finiteNumber(slot.element.width) ?? 1, 1);
-      const height = Math.max(finiteNumber(slot.element.height) ?? 1, 1);
-      const color = slot.state === "error" ? "#dc2626" : slot.state === "warning" ? "#d97706" : "#059669";
-      page.addElement(
-        {
-          id: `${QA_OVERLAY_PREFIX}-box-${slot.element.id}`,
-          type: "figure",
-          subType: "rect",
-          x,
-          y,
-          width,
-          height,
-          fill: "rgba(255,255,255,0)",
-          stroke: color,
-          strokeWidth: 3,
-          dash: [10, 6] as never,
-          selectable: false,
-          removable: false,
-          alwaysOnTop: true,
-          showInExport: false,
-          custom: { [QA_OVERLAY_CUSTOM_KEY]: true, slot: slot.slot },
-        },
-        { skipSelect: true },
-      );
-      page.addElement(
-        {
-          id: `${QA_OVERLAY_PREFIX}-label-${slot.element.id}`,
-          type: "text",
-          x,
-          y: Math.max(0, y - 30),
-          width: Math.max(120, Math.min(width, 320)),
-          height: 24,
-          text: slot.slot,
-          fontSize: 14,
-          fontWeight: "700",
-          fill: "#ffffff",
-          backgroundEnabled: true,
-          backgroundColor: color,
-          backgroundOpacity: 0.92,
-          backgroundCornerRadius: 4,
-          backgroundPadding: 6,
-          selectable: false,
-          removable: false,
-          alwaysOnTop: true,
-          showInExport: false,
-          custom: { [QA_OVERLAY_CUSTOM_KEY]: true, slot: slot.slot },
-        },
-        { skipSelect: true },
-      );
-    }
-  };
-
-  useEffect(() => {
-    if (overlayEnabled) addOverlayElements();
-    else removeOverlayElements();
-    return removeOverlayElements;
-    // The overlay is intentionally regenerated from the latest QA snapshot.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [overlayEnabled, qaSnapshot.summary, store]);
-
-  const handleSave = async () => {
-    setSaveError(null);
-    setSaveOk(false);
-    try {
-      // Drop QA overlays and revert gray image placeholders to empty src so the
-      // persisted document never carries the editor-only placeholder.
-      const cleanJson = clearPlaceholderImageSrc(
-        stripQaOverlayElements(store.toJSON() as CanvasJson),
-      );
-      await onSave({
-        ...initialDocument,
-        canvas_json: cleanJson,
-      });
-      setSaveOk(true);
-    } catch (error) {
-      setSaveError(error instanceof Error ? error.message : t("editor.saveError"));
-    }
-  };
-
-  const handleRefreshQa = () => {
-    setQaJson(stripQaOverlayElements(store.toJSON() as CanvasJson));
-  };
-
-  const handleSelectSlot = (slot: SlotInspection) => {
-    if (slot.binding?.element_id) {
-      store.selectElements([slot.binding.element_id]);
-    }
-  };
+  const documentRef = useRef(initialDocument);
+  documentRef.current = initialDocument;
+
+  const runSave = useCallback(
+    async (reason: SaveReason) => {
+      setSaveError(null);
+      setSaveOk(false);
+      try {
+        // 회색 자리표시 이미지는 빈 src 로 되돌려 저장한다 — 편집기에서만 쓰는 그림이다.
+        const cleanJson = clearPlaceholderImageSrc(store.toJSON() as CanvasJson);
+        await onSave({ ...documentRef.current, canvas_json: cleanJson }, { reason });
+        setSaveOk(true);
+      } catch (error) {
+        setSaveError(error instanceof Error ? error.message : t("editor.saveError"));
+        // 자동저장은 조용히 넘어가지만 실패는 알려 줘야 다음에 다시 보낸다.
+        if (reason !== "manual") throw error;
+      }
+    },
+    [onSave, store, t],
+  );
 
-  const handleCopySummary = async () => {
-    await navigator.clipboard.writeText(qaSnapshot.summary);
-    setSummaryCopied(true);
-  };
+  const handleSave = useCallback(() => void runSave("manual"), [runSave]);
 
-  const handleDownloadSummary = () => {
-    const blob = new Blob([qaSnapshot.summary], { type: "text/plain;charset=utf-8" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${initialDocument.template_id ?? "canvas-template"}-qa-summary.txt`;
-    link.click();
-    URL.revokeObjectURL(url);
-  };
+  const unsaved = useAutoSave({ store, delayMs: autoSaveDelayMs, save: runSave });
 
   // The canvas subtree only depends on the stable store and sidebar
   // contract. Memoize it so QA/save/overlay updates never recreate the heavy
@@ -837,174 +409,6 @@ export function DetailPageEditor({
               dataGifCreditCost={dataGifCreditCost}
             />
           </div>
-
-          {/* Template QA / slot inspector / lint — authoring tools, not seller-facing. */}
-          <details className="border-t border-dpe-ink-200">
-            <summary className="cursor-pointer p-4 text-xs font-dpe-semibold uppercase tracking-[0.06em] text-dpe-ink-400 hover:text-dpe-ink-600">
-              개발자 도구 · 템플릿 QA
-            </summary>
-            <div className="flex max-h-[55vh] min-h-0 flex-col overflow-y-auto">
-          <div className="border-b border-dpe-ink-200 p-4">
-            <div className="flex items-center justify-between gap-3">
-              <div>
-                <h2 className="flex items-center gap-2 text-sm font-dpe-semibold text-dpe-ink-950">
-                  <ListChecks aria-hidden="true" size={16} />
-                  {t("editor.qaTitle")}
-                </h2>
-                <p className="mt-1 text-xs text-dpe-ink-500">
-                  {qaSnapshot.counts.pages} pages / {qaSnapshot.counts.elements} elements /{" "}
-                  {qaSnapshot.counts.slots} slots
-                </p>
-              </div>
-              <button
-                type="button"
-                onClick={handleRefreshQa}
-                className="inline-flex h-8 w-8 items-center justify-center rounded-dpe-md border border-dpe-ink-200 text-dpe-ink-600 hover:bg-dpe-ink-50"
-                title={t("editor.refreshQa")}
-              >
-                <RefreshCw aria-hidden="true" size={15} />
-              </button>
-            </div>
-            <div className="mt-4 grid grid-cols-3 gap-2 text-center text-xs">
-              <div className="rounded-dpe-md border border-dpe-ink-200 p-2">
-                <div className="text-base font-dpe-semibold text-dpe-ink-950">{qaSnapshot.counts.slots}</div>
-                <div className="text-dpe-ink-500">slots</div>
-              </div>
-              <div className="rounded-dpe-md border border-dpe-danger-100 bg-dpe-danger-50 p-2">
-                <div className="text-base font-dpe-semibold text-dpe-danger-700">{qaSnapshot.counts.errors}</div>
-                <div className="text-dpe-danger-600">errors</div>
-              </div>
-              <div className="rounded-dpe-md border border-dpe-warn-100 bg-dpe-warn-50 p-2">
-                <div className="text-base font-dpe-semibold text-dpe-warn-700">{qaSnapshot.counts.warnings}</div>
-                <div className="text-dpe-warn-600">warnings</div>
-              </div>
-            </div>
-            <div className="mt-4 flex gap-2">
-              <button
-                type="button"
-                onClick={() => setOverlayEnabled((value) => !value)}
-                className="inline-flex h-9 flex-1 items-center justify-center gap-2 rounded-dpe-md border border-dpe-ink-200 text-xs font-dpe-semibold text-dpe-ink-700 hover:bg-dpe-ink-50"
-              >
-                {overlayEnabled ? <EyeOff aria-hidden="true" size={15} /> : <Eye aria-hidden="true" size={15} />}
-                {overlayEnabled ? t("editor.overlayOff") : t("editor.overlayOn")}
-              </button>
-              <button
-                type="button"
-                onClick={handleCopySummary}
-                className="inline-flex h-9 w-9 items-center justify-center rounded-dpe-md border border-dpe-ink-200 text-dpe-ink-700 hover:bg-dpe-ink-50"
-                title={t("editor.copySummary")}
-              >
-                <Copy aria-hidden="true" size={15} />
-              </button>
-              <button
-                type="button"
-                onClick={handleDownloadSummary}
-                className="inline-flex h-9 w-9 items-center justify-center rounded-dpe-md border border-dpe-ink-200 text-dpe-ink-700 hover:bg-dpe-ink-50"
-                title={t("editor.downloadSummary")}
-              >
-                <Download aria-hidden="true" size={15} />
-              </button>
-            </div>
-            {summaryCopied ? (
-              <p className="mt-2 text-xs font-dpe-medium text-dpe-ok-600">{t("editor.summaryCopied")}</p>
-            ) : null}
-          </div>
-
-          <div className="min-h-0 flex-1 overflow-y-auto p-4">
-            <section>
-              <h3 className="text-xs font-dpe-semibold uppercase tracking-[0.08em] text-dpe-ink-500">
-                {t("editor.slotInspector")}
-              </h3>
-              <div className="mt-3 space-y-2">
-                {qaSnapshot.slots.length ? (
-                  qaSnapshot.slots.map((slot) => (
-                    <button
-                      key={slot.slot}
-                      type="button"
-                      onClick={() => handleSelectSlot(slot)}
-                      className="w-full rounded-dpe-md border border-dpe-ink-200 p-3 text-left hover:border-dpe-ink-300 hover:bg-dpe-ink-50"
-                    >
-                      <div className="flex items-center justify-between gap-2">
-                        <span className="truncate text-sm font-dpe-semibold text-dpe-ink-950">{slot.slot}</span>
-                        <span
-                          className={
-                            slot.state === "error"
-                              ? "text-xs font-dpe-semibold text-dpe-danger-600"
-                              : slot.state === "warning"
-                                ? "text-xs font-dpe-semibold text-dpe-warn-600"
-                                : "text-xs font-dpe-semibold text-dpe-ok-600"
-                          }
-                        >
-                          {slot.state}
-                        </span>
-                      </div>
-                      <p className="mt-1 truncate text-xs text-dpe-ink-500">
-                        {slot.binding?.kind ?? "-"} / {slot.binding?.element_id ?? "-"}
-                      </p>
-                      <p className="mt-1 text-xs text-dpe-ink-600">{formatRect(slot.element)}</p>
-                      <p className="mt-2 text-xs text-dpe-ink-500">{slot.message}</p>
-                    </button>
-                  ))
-                ) : (
-                  <p className="rounded-dpe-md border border-dpe-ink-200 p-3 text-sm text-dpe-ink-500">
-                    {t("editor.noSlots")}
-                  </p>
-                )}
-              </div>
-            </section>
-
-            <section className="mt-6">
-              <h3 className="text-xs font-dpe-semibold uppercase tracking-[0.08em] text-dpe-ink-500">
-                {t("editor.templateLint")}
-              </h3>
-              <div className="mt-3 space-y-2">
-                {qaSnapshot.lint.length ? (
-                  qaSnapshot.lint.map((issue, index) => (
-                    <div
-                      key={`${issue.title}-${issue.slot ?? issue.elementId ?? index}`}
-                      className="rounded-dpe-md border border-dpe-ink-200 p-3"
-                    >
-                      <div className="flex items-center justify-between gap-2">
-                        <p className="text-sm font-dpe-semibold text-dpe-ink-950">{issue.title}</p>
-                        <span
-                          className={
-                            issue.level === "error"
-                              ? "text-xs font-dpe-semibold text-dpe-danger-600"
-                              : issue.level === "warning"
-                                ? "text-xs font-dpe-semibold text-dpe-warn-600"
-                                : "text-xs font-dpe-semibold text-dpe-active-600"
-                          }
-                        >
-                          {issue.level}
-                        </span>
-                      </div>
-                      <p className="mt-1 text-xs leading-5 text-dpe-ink-600">{issue.detail}</p>
-                      {issue.slot || issue.elementId ? (
-                        <p className="mt-2 truncate text-xs text-dpe-ink-400">
-                          {[issue.slot, issue.elementId].filter(Boolean).join(" / ")}
-                        </p>
-                      ) : null}
-                    </div>
-                  ))
-                ) : (
-                  <div className="rounded-dpe-md border border-dpe-ok-100 bg-dpe-ok-50 p-3 text-sm font-dpe-medium text-dpe-ok-700">
-                    {t("editor.lintPassed")}
-                  </div>
-                )}
-              </div>
-            </section>
-
-            <section className="mt-6">
-              <h3 className="text-xs font-dpe-semibold uppercase tracking-[0.08em] text-dpe-ink-500">
-                {t("editor.designerSummary")}
-              </h3>
-              <pre className="mt-3 max-h-72 overflow-auto rounded-dpe-md border border-dpe-ink-200 bg-dpe-ink-50 p-3 text-xs leading-5 text-dpe-ink-700">
-                {qaSnapshot.summary}
-              </pre>
-            </section>
-          </div>
-            </div>
-          </details>
         </aside>
   );
   // 인스펙터는 감싸 쓰는 경우가 더 많다 — 자기 크롬만 두르고 속은 그대로 둔다.
@@ -1018,7 +422,7 @@ export function DetailPageEditor({
     <HeaderSlot
       productName={productName?.trim() || t("editor.untitled")}
       onBack={onBack}
-      save={{ run: handleSave, saving, ok: saveOk, error: saveError }}
+      save={{ run: handleSave, saving, ok: saveOk, error: saveError, unsaved }}
       parts={{
         history: historyPart,
         download: downloadPart,

package/components/detail-page/detail-page-font-picker.tsx

@@ -25,10 +25,12 @@ import { FONT_TAGS, type FontTag } from "../../lib/detail-page-canvas/font-tags"
 
 export function DetailPageFontPicker({
   value,
+  text,
   documentFamilies,
   onSelect,
 }: {
   value: string;
+  text: string;
   documentFamilies: string[];
   onSelect: (family: string) => Promise<void>;
 }) {
@@ -37,6 +39,7 @@ export function DetailPageFontPicker({
   const [loading, setLoading] = useState<string | null>(null);
   const [error, setError] = useState(false);
   const [tags, setTags] = useState<FontTag[]>([]);
+  const hasHangul = /\p{Script=Hangul}/u.test(text);
   /** 404 로 떨어진 미리보기. 한 번 떨어지면 다시 안 부른다. */
   const [previewsMissing, setPreviewsMissing] = useState<ReadonlySet<string>>(
     () => new Set(),
@@ -85,7 +88,7 @@ export function DetailPageFontPicker({
       key={`${font.source}:${font.id}`}
       value={`${font.label} ${font.labelEn} ${font.family}`}
       onSelect={() => void select(font.family)}
-      disabled={loading !== null}
+      disabled={loading !== null || (hasHangul && font.latinOnly)}
       className="group min-h-[56px] gap-2 px-2 py-1"
     >
       <span className="flex h-11 min-w-0 flex-1 items-center overflow-hidden">
@@ -225,6 +228,11 @@ export function DetailPageFontPicker({
               ) : null}
             </CommandList>
           </Command>
+          {hasHangul ? (
+            <p className="border-t border-dpe-ink-100 px-3 py-2 text-xs text-dpe-ink-500">
+              {t("detailPage.properties.fontLatinOnlyUnavailable")}
+            </p>
+          ) : null}
           {error ? (
             <p role="alert" className="border-t border-dpe-danger-100 bg-dpe-danger-50 px-3 py-2 text-xs text-dpe-danger-600">
               {t("detailPage.properties.fontLoadFailed")}

package/components/detail-page/detail-page-host-context.tsx

@@ -482,9 +482,11 @@ export interface EditorHeaderSlotProps {
   save: {
     run: () => void;
     saving: boolean;
-    /** 방금 저장됐다. 잠시 뒤 스스로 꺼진다. */
+    /** 방금 저장됐다. 다음 저장이 시작되면 꺼진다. */
     ok: boolean;
     error: string | null;
+    /** 아직 저장 안 된 변경이 남아 있다. 자동저장을 안 켠 화면에서는 언제나 false. */
+    unsaved: boolean;
   };
   /** 편집기가 만들어 주는 조각들. 자리만 정하면 된다. */
   parts: {

package/components/detail-page/detail-page-pages-panel.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { detailPageEditorProfile } from "../../lib/detail-page/editor-profile";
+
 import { useCallback, useState, useSyncExternalStore } from "react";
 import { observer } from "./canvas-observer";
 import { useTranslation } from "react-i18next";
@@ -252,10 +254,18 @@ export const DetailPagePagesPanel = observer(function DetailPagePagesPanel({
     [s],
   );
 
-  const totalHeight = Math.round(
-    s.pages.reduce((acc, p) => acc + p.computedHeight, 0),
-  );
+  // 판이 고정 크기면(캐러셀) 높이를 «더하지 않는다». 상세페이지는 세로로 이어진 한 장이라
+  // 합계가 곧 문서 높이지만, 캐러셀은 판이 따로따로라 합계가 아무 뜻이 없다 —
+  // 8판짜리가 1080×10800 으로 보였다.
+  const profile = detailPageEditorProfile();
   const width = Math.round(s.pages[0]?.computedWidth ?? 0);
+  const shownHeight = profile.page.fixed
+    ? Math.round(
+        typeof profile.page.height === "number"
+          ? profile.page.height
+          : s.pages[0]?.computedHeight ?? 0,
+      )
+    : Math.round(s.pages.reduce((acc, p) => acc + p.computedHeight, 0));
 
   return (
     <div className="flex h-full flex-col">
@@ -264,7 +274,7 @@ export const DetailPagePagesPanel = observer(function DetailPagePagesPanel({
           {t("detailPage.pages.totalPages", { count: s.pages.length })}
         </p>
         <p className="text-xs text-dpe-ink-400">
-          {width} × {totalHeight} px
+          {width} × {shownHeight} px
         </p>
       </div>
 

package/components/detail-page/detail-page-properties-panel.tsx

@@ -790,6 +790,7 @@ const TextInspector = observer(function TextInspector({
         <div className="grid grid-cols-[1fr_84px] gap-2">
           <DetailPageFontPicker
             value={fontFamily}
+            text={str(ref.text)}
             documentFamilies={fonts}
             onSelect={applyFontFamily}
           />

package/components/detail-page/use-auto-save.ts

@@ -0,0 +1,105 @@
+import { useEffect, useRef, useState } from "react";
+
+export type SaveReason = "auto" | "manual" | "leave";
+
+/** 변경 알림만 받으면 되므로 스토어 전체를 요구하지 않는다. */
+interface ChangeSource {
+  on(event: "change", listener: () => void): () => void;
+}
+
+/**
+ * 문서가 바뀌면 잠잠해진 뒤에 한 번 저장한다.
+ *
+ * 규칙 셋이 전부다.
+ *
+ * 1. **한 번에 하나만 보낸다.** 상세페이지 서버는 저장을 멱등키로 직렬화해서, 겹쳐
+ *    보내면 뒤엣것이 "처리 중"으로 거절당한다. 보내는 동안 또 바뀌었으면 끝난 뒤에
+ *    한 번 더 — 밀린 변경이 몇 번이든 요청은 하나로 접힌다.
+ * 2. **탭을 닫거나 숨기면 기다리지 않는다.** 디바운스를 기다리다 창이 닫히면 그
+ *    구간의 편집이 통째로 사라진다.
+ * 3. **실패는 삼키되 잊지 않는다.** dirty 를 되돌려 두면 다음 변경이나 다음 이탈에
+ *    다시 나간다. 자동저장이 실패했다고 편집을 막을 일은 아니고, 그렇다고 곧바로
+ *    다시 보내지도 않는다 — 서버가 죽어 있는 동안 요청을 쉬지 않고 때리게 된다.
+ *
+ * `delayMs` 가 없으면 아무것도 안 한다 — 자동저장을 아직 안 켠 화면이 그렇다.
+ *
+ * @returns 저장 안 된 변경이 남아 있는지. 헤더가 «변경됨»을 그리는 데 쓴다.
+ */
+export function useAutoSave(options: {
+  store: ChangeSource;
+  delayMs?: number;
+  save: (reason: SaveReason) => Promise<void>;
+}): boolean {
+  const { store, delayMs } = options;
+  // 저장 함수는 매 렌더 새로 온다. 구독을 그때마다 다시 걸면 디바운스가 초기화되므로
+  // 최신 것만 상자에 담아 둔다.
+  const saveRef = useRef(options.save);
+  saveRef.current = options.save;
+
+  const [dirty, setDirty] = useState(false);
+  const dirtyRef = useRef(false);
+  const runningRef = useRef(false);
+
+  useEffect(() => {
+    if (!delayMs) return;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let live = true;
+
+    const mark = (next: boolean) => {
+      dirtyRef.current = next;
+      if (live) setDirty(next);
+    };
+
+    const flush = async (reason: SaveReason): Promise<void> => {
+      if (!dirtyRef.current || runningRef.current) return;
+      mark(false);
+      runningRef.current = true;
+      let sent = false;
+      try {
+        await saveRef.current(reason);
+        sent = true;
+      } catch {
+        mark(true);
+      } finally {
+        runningRef.current = false;
+      }
+      // 성공했을 때만 이어서 보낸다. 실패한 것을 곧바로 다시 보내면 서버가 죽어 있는
+      // 동안 요청을 쉬지 않고 때린다 — 다음 변경이나 다음 이탈까지 기다린다.
+      if (sent && dirtyRef.current) await flush(reason);
+    };
+
+    const off = store.on("change", () => {
+      mark(true);
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        timer = null;
+        void flush("auto");
+      }, delayMs);
+    });
+
+    const leave = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      void flush("leave");
+    };
+    const onHidden = () => {
+      if (document.visibilityState === "hidden") leave();
+    };
+
+    window.addEventListener("pagehide", leave);
+    document.addEventListener("visibilitychange", onHidden);
+
+    return () => {
+      live = false;
+      off();
+      window.removeEventListener("pagehide", leave);
+      document.removeEventListener("visibilitychange", onHidden);
+      // 편집기를 떠나는 것도 이탈이다 — 다른 화면으로 넘어가는 길이 여기뿐이다.
+      leave();
+    };
+  }, [store, delayMs]);
+
+  return dirty;
+}

package/i18n/en.json

@@ -7,18 +7,6 @@
       "saved": "Saved",
       "saving": "Saving",
       "save": "Save",
-      "qaTitle": "Template QA",
-      "refreshQa": "Refresh QA",
-      "overlayOff": "Overlay off",
-      "overlayOn": "Overlay on",
-      "copySummary": "Copy summary",
-      "downloadSummary": "Download summary",
-      "summaryCopied": "Summary copied",
-      "slotInspector": "Slot Inspector",
-      "noSlots": "No slot_bindings found.",
-      "templateLint": "Template Lint",
-      "lintPassed": "Template lint passed.",
-      "designerSummary": "Designer Summary",
       "undo": "Undo",
       "redo": "Redo",
       "fontEmbeddingFailed": "Could not embed {{font}} in the file. Please try again.",
@@ -124,6 +112,7 @@
         "typeShape": "Shape",
         "selectionCount": "{{count}} selected",
         "fontLatinOnly": "Latin only",
+        "fontLatinOnlyUnavailable": "Latin-only fonts cannot be used for text containing Korean.",
         "fontLoading": "Loading font",
         "chooseFont": "Choose font",
         "fontTagFilter": "Font style",

package/i18n/ko.json

@@ -7,18 +7,6 @@
       "saved": "저장됨",
       "saving": "저장 중",
       "save": "저장",
-      "qaTitle": "템플릿 QA",
-      "refreshQa": "QA 새로고침",
-      "overlayOff": "오버레이 끄기",
-      "overlayOn": "오버레이 켜기",
-      "copySummary": "요약 복사",
-      "downloadSummary": "요약 다운로드",
-      "summaryCopied": "요약을 복사했습니다",
-      "slotInspector": "슬롯 검사",
-      "noSlots": "slot_bindings가 없습니다.",
-      "templateLint": "템플릿 린트",
-      "lintPassed": "템플릿 린트를 통과했습니다.",
-      "designerSummary": "디자이너 요약",
       "undo": "실행 취소",
       "redo": "다시 실행",
       "fontEmbeddingFailed": "{{font}} 폰트를 파일에 포함하지 못했습니다. 잠시 후 다시 시도해 주세요.",
@@ -124,6 +112,7 @@
         "typeShape": "도형",
         "selectionCount": "{{count}}개 선택",
         "fontLatinOnly": "영문 전용",
+        "fontLatinOnlyUnavailable": "한글이 포함된 글자에는 영문 전용 글꼴을 쓸 수 없어요.",
         "fontLoading": "글꼴 불러오는 중",
         "chooseFont": "글꼴 선택",
         "fontTagFilter": "글꼴 종류",

package/index.ts

@@ -22,6 +22,7 @@ export type * from "./types/detail-page-api";
 export type * from "./types/commerce";
 
 export { DetailPageEditor } from "./components/detail-page/detail-page-editor";
+export type { SaveReason } from "./components/detail-page/use-auto-save";
 
 /**
  * 편집기가 부르는 주소(라우트 · 정적 자산)를 앱에 맞춘다.

package/lib/cardnews/font-loader.ts

@@ -54,6 +54,7 @@ export function getClosestSupportedFontWeight(
 
 const loadedFontFaces = new Set<string>();
 const loadedFamilyWeights = new Set<string>();
+const warnedFallbackFaces = new Set<string>();
 const stylesheetPromises = new Map<string, Promise<void>>();
 const FONT_LOAD_SAMPLE = "가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789";
 /**
@@ -220,7 +221,12 @@ function loadFontFacesOnce(requests: FontFaceRequest[]): Promise<void> {
         const descriptor = `${request.weight} ${request.size}px "${request.family}"`;
         const faces = await document.fonts.load(descriptor, request.sample);
         if (faces.length === 0) {
-          throw new FontLoadError(`No bundled font face matched: ${descriptor}`);
+          if (!warnedFallbackFaces.has(descriptor)) {
+            warnedFallbackFaces.add(descriptor);
+            // eslint-disable-next-line no-console
+            console.warn(`[leviosa-canvas] ${descriptor}: bundled font did not match; using browser fallback`);
+          }
+          return;
         }
         const unloadedFace = faces.find((face) => face.status !== "loaded");
         if (unloadedFace) {

package/lib/detail-page-canvas/editor-fonts.ts

@@ -65,7 +65,6 @@ function fromCatalog(font: (typeof DETAIL_PAGE_FONTS)[number]): EditorFont {
     previewSrc: `${editorAssetBase("detailFontPreviews")}/${font.id}.webp`,
     tags: toFontTags(font.tags),
     weights: getDetailPageFontWeights(font),
-    latinOnly: font.latinOnly,
     licenseName: font.licenseName,
     licenseUrl: font.licenseUrl,
     licenseNoteKey: font.licenseNoteKey,
@@ -82,6 +81,7 @@ function fromBundle(font: (typeof ALL_FONT_OPTIONS)[number]): EditorFont {
     previewSrc: `${editorAssetBase("cardnewsFontPreviews")}/${font.id}.webp`,
     tags: bundleFontTags(font.id),
     weights: [...font.weights].sort((a, b) => a - b),
+    latinOnly: (font as { latinOnly?: boolean }).latinOnly,
     licenseName: font.license.name,
     licenseUrl: font.license.url,
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Leviosa detail-page editor shell. Source-only: consumers compile it through Next transpilePackages. Every app coupling (sourcing server, brand store, cache keys, toast) arrives through the DetailPageHost interface, and every URL it fetches comes from configureDetailPageEditor.",
   "type": "module",
   "license": "UNLICENSED",
@@ -66,7 +66,7 @@
     "woff2-encoder": "2.0.0"
   },
   "peerDependencies": {
-    "@leviosa-ai/canvas": "0.3.0",
+    "@leviosa-ai/canvas": "0.4.0",
     "@tanstack/react-query": "^5.100.3",
     "konva": "^10.0.0",
     "lucide-react": "^0.563.0 || ^1.0.0",