@leviosa-ai/detail-page-editor 0.1.0

package/components/detail-page/panel-search-input.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Search } from "lucide-react";
+
+/**
+ * 좌측 패널의 검색창. 사진·아이콘·도형이 같은 것을 쓴다.
+ *
+ * 따로 빼 둔 이유가 둘이다.
+ *
+ *  1. **돋보기 자리.** 아이콘을 `absolute`로 얹으려면 기준 상자가 **입력칸과 정확히
+ *     같아야** 한다. 바깥의 여백 있는 상자를 기준으로 삼으면 그 여백만큼 어긋나
+ *     돋보기가 테두리에 걸린다(실제로 그렇게 보였다).
+ *  2. **`appearance-none`.** 사파리는 `input[type=search]`를 OS 검색칸으로 그려서
+ *     우리가 준 모서리·높이·안여백을 무시하고 알약 모양으로 만든다. 이걸 꺼야 세
+ *     패널이 같은 모양이 된다.
+ *
+ * `type="search"`를 유지하는 것은 esc로 지우기·입력 도구 힌트 때문이다.
+ */
+export function PanelSearchInput({
+  value,
+  onChange,
+  placeholder,
+  label,
+  className = "",
+}: {
+  value: string;
+  onChange: (next: string) => void;
+  placeholder: string;
+  label: string;
+  className?: string;
+}) {
+  return (
+    <div className={`relative ${className}`}>
+      <Search
+        aria-hidden="true"
+        size={14}
+        className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-400"
+      />
+      <input
+        type="search"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        aria-label={label}
+        className="w-full appearance-none rounded-lg border border-neutral-200 py-2 pl-8 pr-2.5 text-sm leading-5 placeholder:text-neutral-400 focus:border-neutral-400 focus:outline-none [&::-webkit-search-cancel-button]:appearance-none"
+      />
+    </div>
+  );
+}

package/components/detail-page/prompt-edit-panel.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+// "프롬프트로 편집" — 선택한 텍스트 슬롯의 카피를 자연어 요청으로 다시 쓴다. 소싱 서버의
+// v2 카피 엔진(/{generatedId}/copy/prompt-edit)에 현재 문구 + 지시를 한 번 POST 하고,
+// 돌아온 텍스트를 곧바로 해당 Canvas 요소에 적용한다(상품 문맥·존댓말·컴플라이언스 유지).
+
+import { useCallback, useState } from "react";
+import { ArrowUp, Loader2, Sparkles } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useDetailPageHost } from "./detail-page-host-context";
+import { EditQuotaBlock, EditUsageBadge } from "./edit-quota-ui";
+import { GenerationProgressLine } from "./generation-progress-fill";
+import {
+  useFakeProgress,
+  GENERATION_ESTIMATE_MS,
+} from "../../lib/detail-page/use-fake-progress";
+
+interface PromptEditPanelProps {
+  /** 생성 인스턴스 ID. 없으면(픽스처 모드) 이 패널은 렌더되지 않는다. */
+  generatedId: string;
+  /** 요소의 custom.leviosaSlot. */
+  slotRole: string;
+  /** 편집기에 지금 표시된 문구(로컬 편집 반영본). */
+  currentText: string;
+  /** custom.leviosaSlotKind (headline_highlight / line_split 등). */
+  renderKind?: string;
+  /** 슬롯 최대 글자 수(있으면 전달). */
+  maxLength?: number;
+  /** 수정된 텍스트를 요소에 반영하는 콜백 (el.set({ text })). */
+  onApplied: (text: string) => void;
+  /** 이 인스턴스의 텍스트 편집 사용 횟수/한도(부모가 관리). */
+  editsUsed?: number;
+  editLimit?: number;
+  /** scratch 등 한도 면제면 카운터/차단을 숨긴다. */
+  unlimited?: boolean;
+  /** 편집 성공/차단 후 사용량 갱신을 부모에 알린다. */
+  onUsage?: (used: number, limit: number) => void;
+  /** 한도 소진 시 "편집 크레딧 추가하기" 목적지(레비오사 결제면). */
+  onBuyMore?: () => void;
+}
+
+export function PromptEditPanel({
+  generatedId,
+  slotRole,
+  currentText,
+  renderKind,
+  maxLength,
+  onApplied,
+  editsUsed = 0,
+  editLimit = 0,
+  unlimited = false,
+  onUsage,
+  onBuyMore,
+}: PromptEditPanelProps) {
+  const { t } = useTranslation("branding");
+  const { api, toast } = useDetailPageHost();
+  const [input, setInput] = useState("");
+  const [busy, setBusy] = useState(false);
+  const progress = useFakeProgress(busy, GENERATION_ESTIMATE_MS.text);
+
+  const blocked = !unlimited && editLimit > 0 && editsUsed >= editLimit;
+
+  const send = useCallback(async () => {
+    const instruction = input.trim();
+    if (!instruction || busy || blocked) return;
+    setBusy(true);
+    try {
+      const result = await api.promptEditDetailPageCopy(generatedId, {
+        slot_role: slotRole,
+        current_text: currentText,
+        instruction,
+        max_length: maxLength,
+        render_kind: renderKind,
+      });
+      if (typeof result.edits_used === "number" && typeof result.edit_limit === "number") {
+        onUsage?.(result.edits_used, result.edit_limit);
+      }
+      const text = (result.text ?? "").trim();
+      if (!text || text === currentText.trim()) {
+        toast.info(t("detailPage.promptEdit.noChange"));
+      } else {
+        onApplied(text);
+        toast.success(t("detailPage.promptEdit.textSuccess"));
+        setInput("");
+      }
+    } catch (err) {
+      const quota = api.asEditQuotaError(err);
+      if (quota) {
+        onUsage?.(quota.limit, quota.limit);
+        toast.error(t("detailPage.promptEdit.quotaExhausted"));
+      } else {
+        toast.error(err instanceof Error ? err.message : t("detailPage.promptEdit.requestFailed"));
+      }
+    } finally {
+      setBusy(false);
+    }
+  }, [api, toast, input, busy, blocked, generatedId, slotRole, currentText, maxLength, renderKind, onApplied, onUsage, t]);
+
+  return (
+    <div className="relative flex flex-col overflow-hidden rounded-xl border border-border bg-card">
+      <div className="flex items-center gap-1.5 border-b border-border px-3 py-2">
+        <Sparkles size={13} className="text-primary" />
+        <span className="text-xs font-medium text-foreground">{t("detailPage.promptEdit.header")}</span>
+        {unlimited || editLimit > 0 ? (
+          <EditUsageBadge used={editsUsed} limit={editLimit} unlimited={unlimited} />
+        ) : null}
+      </div>
+      {blocked ? (
+        <EditQuotaBlock kind="text" onBuyMore={onBuyMore} />
+      ) : (
+        <div className="flex items-end gap-1.5 px-2 py-2">
+          <textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+                e.preventDefault();
+                send();
+              }
+            }}
+            rows={2}
+            placeholder={
+              busy ? t("detailPage.promptEdit.editing") : t("detailPage.promptEdit.textPlaceholder")
+            }
+            disabled={busy}
+            className="max-h-32 flex-1 resize-none bg-transparent px-2 py-1.5 text-[13px] leading-5 text-foreground outline-none placeholder:text-muted-foreground/70 disabled:opacity-60"
+          />
+          <button
+            type="button"
+            onClick={send}
+            disabled={busy || !input.trim()}
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary text-primary-foreground disabled:opacity-40"
+            aria-label={t("detailPage.promptEdit.send")}
+          >
+            {busy ? (
+              <Loader2 size={15} className="animate-spin" />
+            ) : (
+              <ArrowUp size={15} />
+            )}
+          </button>
+        </div>
+      )}
+      {busy ? <GenerationProgressLine progress={progress} /> : null}
+    </div>
+  );
+}

package/components/detail-page/section-height-handle.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+/**
+ * 이 장의 아래 끝을 잡아 끌어 높이를 바꾸는 손잡이 — 두 엔진 공용.
+ *
+ * 상세페이지 한 장은 세로로 이어 붙는 띠라서 길이 자체가 편집 대상이다. 우측 패널의
+ * 숫자·'내용에 맞추기'는 두 엔진이 이미 같은 함수를 쓰지만(`section-height.ts`),
+ * 손잡이는 **붙일 자리**가 엔진마다 달랐다:
+ *
+ *  - Canvas 워크스페이스는 장마다 슬롯 `<div>`를 직접 만든다 → 그 안에 넣으면 끝.
+ *  - 우리 엔진은 `CanvasView` 하나가 장 전부를 그린다 → 넣을 자리가 없다. 그래서
+ *    캔버스 쪽은 다른 오버레이들과 같은 방식으로(`[data-lc-page]`의 상자를 재서)
+ *    활성 장 위에 자리를 잡아 준다.
+ *
+ * 손잡이 자체는 한 벌이다. 두 벌로 두면 한쪽만 고쳐진다.
+ */
+
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type RefObject,
+} from "react";
+import { useTranslation } from "react-i18next";
+
+import { observer } from "./canvas-observer";
+import {
+  applySectionHeight,
+  type SectionHeightPage,
+} from "../../lib/detail-page/section-height";
+
+export type HeightPageLike = SectionHeightPage & { id: string };
+
+type HistoryLike = {
+  startTransaction?: () => void;
+  endTransaction?: () => void;
+};
+
+/**
+ * 손잡이 하나. **자리를 잡아 주는 건 부모다** — `position: relative` 인 조상 아래
+ * 놓이면 그 상자의 아래 끝에 붙는다.
+ *
+ * 끄는 동안은 히스토리 트랜잭션으로 묶는다. 안 묶으면 마우스를 한 번 끄는 사이 수십 개의
+ * 되돌리기 단계가 쌓여 ⌘Z 를 스무 번 눌러야 원래 높이로 돌아간다.
+ */
+export const SectionHeightHandle = observer(function SectionHeightHandle({
+  page,
+  scale,
+  history,
+}: {
+  page: HeightPageLike;
+  /** 지금 배율. 화면 px 이동을 페이지 px 로 옮기는 데 쓴다. */
+  scale: number;
+  history?: HistoryLike;
+}) {
+  const { t } = useTranslation("branding");
+  const drag = useRef<{ pointerId: number; y: number; base: number } | null>(null);
+  const [dragging, setDragging] = useState(false);
+  const height = Math.round(Number(page.computedHeight) || 0);
+
+  const begin = (e: ReactPointerEvent<HTMLDivElement>) => {
+    if (e.button !== 0) return;
+    // Konva 가 이 누름을 보면 캔버스 빈 곳 클릭으로 읽어 선택을 풀어 버린다.
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    history?.startTransaction?.();
+    drag.current = { pointerId: e.pointerId, y: e.clientY, base: height };
+    setDragging(true);
+  };
+
+  const move = (e: ReactPointerEvent<HTMLDivElement>) => {
+    const d = drag.current;
+    if (!d || e.pointerId !== d.pointerId) return;
+    e.preventDefault();
+    // 화면 px → 페이지 px. 축소해서 보고 있으면 1px 을 끌어도 페이지는 더 많이 움직인다.
+    const dy = (e.clientY - d.y) / Math.max(scale || 1, 0.01);
+    applySectionHeight(page, d.base + dy);
+  };
+
+  const end = (e: ReactPointerEvent<HTMLDivElement>) => {
+    const d = drag.current;
+    if (!d || e.pointerId !== d.pointerId) return;
+    drag.current = null;
+    setDragging(false);
+    history?.endTransaction?.();
+  };
+
+  return (
+    <div
+      data-dp-section-height-handle=""
+      role="separator"
+      aria-orientation="horizontal"
+      aria-label={t("detailPage.properties.pageHeight")}
+      onPointerDown={begin}
+      onPointerMove={move}
+      onPointerUp={end}
+      onPointerCancel={end}
+      style={{
+        position: "absolute",
+        left: "50%",
+        bottom: -7,
+        transform: "translateX(-50%)",
+        width: 64,
+        height: 14,
+        zIndex: 20,
+        cursor: "ns-resize",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        touchAction: "none",
+        // 캔버스 쪽에서는 이 손잡이를 이벤트가 안 통하는 상자 안에 넣는다.
+        pointerEvents: "auto",
+      }}
+    >
+      <div
+        style={{
+          width: dragging ? 64 : 44,
+          height: 5,
+          borderRadius: 999,
+          background: dragging ? "rgb(139, 92, 246)" : "rgba(23,23,23,0.28)",
+          transition: "width 120ms ease, background 120ms ease",
+        }}
+      />
+      {dragging ? (
+        <span
+          style={{
+            position: "absolute",
+            top: 16,
+            padding: "2px 7px",
+            borderRadius: 6,
+            background: "rgb(23,23,23)",
+            color: "#fff",
+            fontSize: 11,
+            fontVariantNumeric: "tabular-nums",
+            whiteSpace: "nowrap",
+            pointerEvents: "none",
+          }}
+        >
+          {height}px
+        </span>
+      ) : null}
+    </div>
+  );
+});
+SectionHeightHandle.displayName = "SectionHeightHandle";
+
+type CanvasStoreLike = {
+  scale?: number;
+  activePage?: HeightPageLike;
+  history?: HistoryLike;
+};
+
+type Box = { left: number; top: number; width: number; height: number };
+
+function sameBox(a: Box | null, b: Box | null): boolean {
+  if (!a || !b) return a === b;
+  return (
+    a.left === b.left &&
+    a.top === b.top &&
+    a.width === b.width &&
+    a.height === b.height
+  );
+}
+
+/**
+ * 우리 엔진 위에서 손잡이의 자리를 잡아 준다.
+ *
+ * 엔진이 그린 장의 상자(`[data-lc-page]`)를 재서 그 위에 이벤트가 안 통하는 껍데기를
+ * 겹치고, 손잡이만 그 안에서 받는다. 엔진 패키지 안에 편집기 전용 부품을 넣지 않기
+ * 위한 자리다 — 다른 오버레이들(말풍선 꼬리·hover)도 같은 방식이다.
+ *
+ * 끄는 동안 상자가 한 프레임 늦게 따라와도 값은 안 틀어진다. 끌기 계산이 상자 자리가
+ * 아니라 처음 눌렀을 때의 높이와 포인터 이동량만 쓰기 때문이다.
+ */
+export const CanvasSectionHeightHandle = observer(
+  function CanvasSectionHeightHandle({
+    store,
+    containerRef,
+    scrollRef,
+  }: {
+    store: unknown;
+    containerRef: RefObject<HTMLDivElement | null>;
+    scrollRef: RefObject<HTMLDivElement | null>;
+  }) {
+    const s = store as CanvasStoreLike;
+    const page = s.activePage;
+    const pageId = page?.id ?? "";
+    const scale = Number(s.scale) || 1;
+    const height = Math.round(Number(page?.computedHeight) || 0);
+    const [box, setBox] = useState<Box | null>(null);
+    const frame = useRef<number | null>(null);
+
+    const measure = () => {
+      const host = containerRef.current;
+      const node = pageId
+        ? host?.querySelector<HTMLElement>(`[data-lc-page="${CSS.escape(pageId)}"]`)
+        : null;
+      const next: Box | null =
+        host && node
+          ? (() => {
+              const r = node.getBoundingClientRect();
+              const h = host.getBoundingClientRect();
+              return {
+                left: r.left - h.left,
+                top: r.top - h.top,
+                width: r.width,
+                height: r.height,
+              };
+            })()
+          : null;
+      // 같은 값이면 그대로 둔다 — 끄는 동안 매 프레임 새 객체를 넣으면 공짜 리렌더가 쌓인다.
+      setBox((prev) => (sameBox(prev, next) ? prev : next));
+    };
+
+    // 높이·배율이 바뀌면 장의 상자도 바뀐다 — 끄는 동안 손잡이가 아래 끝을 따라가야 한다.
+    //
+    // **두 번 잰다.** 처음 붙을 때는 그 자리에서 재도 소용이 없다 — 자식의 레이아웃
+    // 이펙트가 부모의 ref 보다 먼저 돌아서 `containerRef.current` 가 아직 비어 있다
+    // (다른 오버레이들이 프레임을 기다리는 이유가 이것이다). 반대로 높이가 바뀌는
+    // 동안은 ref 가 이미 있으므로 그 자리에서 재야 손잡이가 한 박자 늦지 않는다.
+    useLayoutEffect(() => {
+      measure();
+      const raf = requestAnimationFrame(measure);
+      return () => cancelAnimationFrame(raf);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pageId, height, scale]);
+
+    useEffect(() => {
+      if (!pageId) return;
+      const scroller = scrollRef.current;
+      const onMove = () => {
+        if (frame.current !== null) return;
+        frame.current = requestAnimationFrame(() => {
+          frame.current = null;
+          measure();
+        });
+      };
+      scroller?.addEventListener("scroll", onMove, { passive: true });
+      window.addEventListener("resize", onMove);
+      return () => {
+        scroller?.removeEventListener("scroll", onMove);
+        window.removeEventListener("resize", onMove);
+        if (frame.current !== null) cancelAnimationFrame(frame.current);
+        frame.current = null;
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pageId, scrollRef]);
+
+    if (!page || !box) return null;
+
+    return (
+      <div
+        data-dp-section-height-frame=""
+        style={{
+          position: "absolute",
+          left: box.left,
+          top: box.top,
+          width: box.width,
+          height: box.height,
+          pointerEvents: "none",
+          zIndex: 21,
+        }}
+      >
+        <SectionHeightHandle
+          page={page}
+          scale={scale}
+          history={s.history}
+        />
+      </div>
+    );
+  },
+);
+CanvasSectionHeightHandle.displayName = "CanvasSectionHeightHandle";

package/components/detail-page/section-reauthor-controller.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { AnnotationDialog } from "./annotation-dialog";
+import {
+  MAX_DESIGN_REFERENCES,
+  type DesignReference,
+} from "../../lib/detail-page/design-reference";
+import {
+  replaceCanvasPage,
+  type CanvasDocument,
+} from "../../lib/detail-page/replace-page";
+import { onSectionReauthorRequested } from "../../lib/detail-page/section-reauthor-bus";
+import { useDetailPageHost } from "./detail-page-host-context";
+
+/**
+ * 화면 재저작 배선 — 페이지 툴바의 요청을 받아 모달을 띄우고, 결과 페이지를 문서에
+ * 갈아 끼운다.
+ *
+ * 편집기 본체에서 분리한 이유는 두 가지다. 첫째, 이 흐름은 store 와 generatedId 만
+ * 있으면 완결된다. 둘째, 워크스페이스가 memo 로 잡혀 있어 콜백을 아래로 내리면
+ * 캔버스가 통째로 다시 그려진다.
+ *
+ * 밑그림은 ``store.toDataURL({pageId})`` 로 뜬다 — 편집기가 지금 보여 주는 그대로다.
+ * 유저는 자기가 보는 화면 위에 표시하지, 서버가 렌더한 다른 그림 위에 표시하지 않는다.
+ */
+
+type StoreLike = {
+  toDataURL: (opts: {
+    pageId?: string;
+    pixelRatio?: number;
+    mimeType?: string;
+  }) => Promise<string>;
+  toJSON: () => Record<string, unknown>;
+  loadJSON: (json: unknown) => void;
+  pages?: Array<{ id: string; computedHeight?: number }>;
+};
+
+/**
+ * 지금 이 화면이 편집기에서 몇 px 인지. 서버는 이 값을 모델에게 "지금 높이"로 알려 준다.
+ *
+ * 저장본에서 읽지 않고 살아 있는 스토어에서 읽는 이유: 높이는 손잡이·우측 패널로 바뀌고
+ * 그 값은 저장을 누르기 전까지 서버에 없다. 저장본을 기준으로 삼으면 방금 잡아 놓은 높이를
+ * 재저작이 되돌린다.
+ */
+export function livePageHeight(store: unknown, pageId: string): number | undefined {
+  const page = (store as StoreLike).pages?.find((p) => p.id === pageId);
+  const height = Math.round(Number(page?.computedHeight ?? 0));
+  return Number.isFinite(height) && height > 0 ? height : undefined;
+}
+
+export function SectionReauthorController({
+  store,
+  generatedId,
+  templateId,
+}: {
+  store: unknown;
+  /** 없으면 배선하지 않는다 — 툴바 버튼도 뜨지 않는다. */
+  generatedId?: string;
+  /**
+   * 지금 열려 있는 문서의 템플릿 id.
+   *
+   * dev-canvas 는 픽스처를 **브라우저에서만** 띄운다 — 서버의 scratch 인스턴스에는
+   * 템플릿도 HTML 도 없어서, 알려 주지 않으면 시연 하니스에서는 이 기능을 눌러 볼 수
+   * 없다. 실제 인스턴스에서는 서버가 자기 템플릿을 쓰므로 무시된다.
+   */
+  templateId?: string;
+}) {
+  const { t } = useTranslation("branding");
+  const { api } = useDetailPageHost();
+  const [pageId, setPageId] = useState<string | null>(null);
+  const [baseImage, setBaseImage] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!generatedId) return;
+    return onSectionReauthorRequested((requestedPageId) => {
+      setError(null);
+      setNotice(null);
+      setPageId(requestedPageId);
+      setBaseImage(null);
+      // 렌더는 비동기다(Canvas 가 대상 페이지를 잠깐 강제 마운트한다). 실패해도 모달은
+      // 열어 둔다 — 밑그림 없이도 글로만 지시할 수 있어야 한다.
+      void (store as StoreLike)
+        .toDataURL({ pageId: requestedPageId, pixelRatio: 1 })
+        .then(setBaseImage)
+        .catch(() => setBaseImage(null));
+    });
+  }, [store, generatedId]);
+
+  const close = useCallback(() => {
+    if (busy) return;
+    setPageId(null);
+    setBaseImage(null);
+    setError(null);
+  }, [busy]);
+
+  const submit = useCallback(
+    async ({
+      instruction,
+      annotatedImage,
+      references,
+    }: {
+      instruction: string;
+      annotatedImage: string | null;
+      references: DesignReference[];
+    }) => {
+      if (!generatedId || !pageId) return;
+      setBusy(true);
+      setError(null);
+      try {
+        const result = await api.reauthorDetailPageSection(generatedId, {
+          label: pageId,
+          instruction,
+          annotated_image: annotatedImage ?? undefined,
+          // 축을 고른 장은 객체로 간다 — 서버가 그 장의 딱지에 축을 적어야 "1번 이미지의
+          // 색감"이라는 지시가 어느 장을 가리키는지 모델이 안다.
+          reference_images: references.length ? references : undefined,
+          current_height: livePageHeight(store, pageId),
+          template_id: templateId,
+        });
+        const document = (store as StoreLike).toJSON() as CanvasDocument;
+        const next = replaceCanvasPage(document, result.page);
+        if (next === document) {
+          setError(
+            t("detailPage.reauthor.pageMissing", {
+              defaultValue: "고친 화면을 문서에서 찾지 못했어요.",
+            }),
+          );
+          return;
+        }
+        // 첫 로드와 **같은 길**로 넣는다 — 어댑터를 안 거친다. 그 어댑터는 SDK가 못 읽는
+        // 장식을 대표 단색으로 낮추던 것이라, 원본을 그대로 읽는 우리 렌더러에 넣으면
+        // 그 화면만 밋밋해진다.
+        (store as StoreLike).loadJSON(next);
+        setPageId(null);
+        setBaseImage(null);
+        if (!result.lint_ok) {
+          // 규약 위반이 남아도 결과는 적용한다. 조용히 되돌리면 유저는 "아무 일도 안
+          // 일어났다"만 보고, 그건 크레딧만 쓴 상태와 구별되지 않는다.
+          setNotice(
+            t("detailPage.reauthor.lintWarning", {
+              defaultValue:
+                "화면을 바꿨지만 규약 검사에 걸린 항목이 있어요. 눈으로 한 번 확인해 주세요.",
+            }),
+          );
+        }
+      } catch (err) {
+        setError(
+          err instanceof Error
+            ? err.message
+            : t("detailPage.reauthor.failed", {
+                defaultValue: "화면을 다시 만들지 못했어요.",
+              }),
+        );
+      } finally {
+        setBusy(false);
+      }
+    },
+    [api, generatedId, pageId, store, t, templateId],
+  );
+
+  if (!generatedId) return null;
+
+  return (
+    <>
+      <AnnotationDialog
+        open={Boolean(pageId)}
+        // 렌더 전이면 흰 밑그림으로 연다 — 글로만 지시하는 길을 막지 않는다.
+        imageUrl={baseImage ?? BLANK_BASE}
+        title={t("detailPage.reauthor.title", {
+          defaultValue: "이 화면 다시 만들기",
+        })}
+        description={t("detailPage.reauthor.description", {
+          defaultValue:
+            "고칠 자리를 표시하고 어떻게 바꿀지 적어주세요. 칸 수·표 같은 구조는 물론 " +
+            '화면 길이도 바뀔 수 있어요("더 시원하게", "너무 길어요").',
+        })}
+        submitLabel={t("detailPage.reauthor.submit", {
+          defaultValue: "다시 만들기",
+        })}
+        maxReferences={MAX_DESIGN_REFERENCES}
+        busy={busy}
+        error={error}
+        onSubmit={submit}
+        onClose={close}
+      />
+      {notice ? (
+        <div className="fixed bottom-4 left-1/2 z-[110] -translate-x-1/2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2 text-xs text-amber-800 shadow-lg">
+          <span>{notice}</span>
+          <button
+            type="button"
+            onClick={() => setNotice(null)}
+            className="ml-3 font-semibold underline"
+          >
+            {t("detailPage.annotate.close", { defaultValue: "닫기" })}
+          </button>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+/** 1×1 흰 픽셀. 밑그림 렌더가 실패해도 캔버스가 열리도록 하는 최소 배경. */
+const BLANK_BASE =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==";