@leviosa-ai/detail-page-editor 0.16.2 → 0.17.0

package/components/detail-page/ai-generate-panel.tsx

@@ -1,7 +1,7 @@
 // Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
 "use client";
 
-import { useCallback, useMemo, useState, type ChangeEvent } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
 import { ImagePlus, Info, Loader2, Pencil, Sparkles, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
@@ -70,6 +70,8 @@ export type GenerateImageInput = {
    * 막혀도 이미지는 만들어졌는데 브랜드 버킷엔 아무것도 안 남았다.
    */
   brandId?: string;
+  /** 사용자가 취소하면 끊긴다. 호스트는 요청에 그대로 넘기면 된다. */
+  signal?: AbortSignal;
 };
 
 export type GenerateImageFn = (input: GenerateImageInput) => Promise<string[]>;
@@ -81,6 +83,8 @@ export type GenerateGifInput = {
   transparent: boolean;
   /** 이미지와 같다. 저장 위치는 start 시점에 확정된다. */
   brandId?: string;
+  /** 사용자가 취소하면 끊긴다. */
+  signal?: AbortSignal;
 };
 
 export type GenerateGifFn = (input: GenerateGifInput) => Promise<string[]>;
@@ -299,7 +303,10 @@ export function AiGeneratePanel({
   onBuyCredits,
 }: AiGeneratePanelProps) {
   const { t } = useTranslation("branding");
-  const { brand } = useDetailPageHost();
+  const { brand, api } = useDetailPageHost();
+  // 진행 중 생성의 취소 손잡이. 패널이 닫혀도 끊는다.
+  const abortRef = useRef<AbortController | null>(null);
+  useEffect(() => () => abortRef.current?.abort(), []);
   const [mode, setMode] = useState<"image" | "gif">(
     // GIF 생성이 배선된 경우에만 gif 초기값을 존중(미배선이면 토글이 없어 갇힘).
     initialMode === "gif" && onGenerateGif ? "gif" : "image",
@@ -357,7 +364,9 @@ export function AiGeneratePanel({
       try {
         setRefUrl(await uploadFile(file));
       } catch (err) {
-        setError(err instanceof Error ? err.message : t("detailPage.aiGenerate.uploadFailed"));
+        // 원문은 콘솔로만. 서버·네트워크 문구를 그대로 띄우면 번역도 안 되고 읽히지도 않는다.
+        console.error("Reference upload failed", err);
+        setError(t("detailPage.aiGenerate.uploadFailed"));
       } finally {
         setRefUploading(false);
       }
@@ -384,6 +393,9 @@ export function AiGeneratePanel({
     setLoading(true);
     setError(null);
     setInsufficient(false);
+    const controller = new AbortController();
+    abortRef.current = controller;
+    const { signal } = controller;
     try {
       const referenceImages = refUrl ? [refUrl] : [];
       const brandId = brand.getStoredActiveBrandId() ?? undefined;
@@ -393,6 +405,7 @@ export function AiGeneratePanel({
             referenceImages,
             transparent,
             brandId,
+            signal,
           })
         : await onGenerate!({
             prompt: finalPrompt,
@@ -401,7 +414,10 @@ export function AiGeneratePanel({
             tier: activeTier,
             brandId,
             annotatedImage,
+            signal,
           });
+      // 취소했으면 늦게 온 결과를 넣지 않는다(호스트가 신호를 무시했어도).
+      if (signal.aborted) return;
       const url = urls[0];
       if (url) {
         // GIF는 항상 페이지에 삽입(우측 이미지 교체 대상 아님) + 애니 태깅.
@@ -415,18 +431,28 @@ export function AiGeneratePanel({
             : t("detailPage.aiGenerate.noImage"),
         );
     } catch (err) {
-      // 생성기가 크레딧 부족을 알리면(422/402 등) 별도로 표기해 CTA를 띄운다.
-      const maybe = err as { insufficientCredits?: boolean };
-      if (maybe && maybe.insufficientCredits) {
+      if (signal.aborted) return; // 사용자가 끊었다 — 오류가 아니다.
+      // 크레딧 부족은 호스트 판별기(402 본문)로 먼저 가리고, 생성기가 직접 붙인
+      // `insufficientCredits` 표시도 계속 받는다(우측 편집 경로가 그렇게 던진다).
+      const marked = (err as { insufficientCredits?: boolean } | null)?.insufficientCredits;
+      if (api.asInsufficientCreditsError(err) || marked) {
         setInsufficient(true);
         setError(t("detailPage.aiGenerate.insufficientCredits"));
       } else {
-        setError(err instanceof Error ? err.message : t("detailPage.aiGenerate.generateFailed"));
+        console.error("AI generation failed", err);
+        setError(t("detailPage.aiGenerate.generateFailed"));
       }
     } finally {
-      setLoading(false);
+      if (abortRef.current === controller) abortRef.current = null;
+      if (!signal.aborted) setLoading(false);
     }
-  }, [prompt, loading, blocked, isGif, gifMissingRef, transparent, onGenerate, onGenerateGif, refUrl, store, onResult, activeTier, t]);
+  }, [prompt, loading, blocked, isGif, gifMissingRef, transparent, onGenerate, onGenerateGif, refUrl, store, onResult, activeTier, t, api, brand]);
+
+  const cancelGenerate = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setLoading(false);
+  }, []);
 
   const handleGenerate = useCallback(() => {
     void runGenerate();
@@ -760,6 +786,15 @@ export function AiGeneratePanel({
           ) : null}
         </span>
       </button>
+      {loading ? (
+        <button
+          type="button"
+          onClick={cancelGenerate}
+          className="h-8 rounded-le-md border border-le-ink-200 text-xs font-le-medium text-le-ink-600 hover:bg-le-ink-50"
+        >
+          {t("detailPage.aiGenerate.cancel")}
+        </button>
+      ) : null}
 
       <AnnotationDialog
         open={annotateOpen}

package/components/detail-page/annotation-canvas.tsx

@@ -19,6 +19,7 @@ import {
   Type,
   Undo2,
 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 /**
  * 그림으로 가리키는 편집 — 이미지·화면 위에 덧그리는 주석 캔버스.
@@ -120,7 +121,7 @@ function loadImage(src: string): Promise<HTMLImageElement> {
     // 동일 출처 프록시를 타는 경우에도 캔버스 오염을 막으려면 명시해야 한다.
     img.crossOrigin = "anonymous";
     img.onload = () => resolve(img);
-    img.onerror = () => reject(new Error("이미지를 불러오지 못했습니다."));
+    img.onerror = () => reject(new Error(`annotation image failed to load: ${src.slice(0, 64)}`));
     img.src = src;
   });
 }
@@ -262,6 +263,10 @@ export const AnnotationCanvas = forwardRef<
   { imageUrl, maxEdge = 2048, onChange, labels },
   ref,
 ) {
+  const { t } = useTranslation("branding");
+  // 라벨을 안 넘겨도 번역된 기본값이 나온다. 넘기면 그것이 이긴다.
+  const label = (key: Tool | "color" | "undo" | "redo" | "note") =>
+    labels?.[key] ?? t(`detailPage.annotate.tools.${key}`);
   const wrapRef = useRef<HTMLDivElement>(null);
   const imgRef = useRef<HTMLImageElement>(null);
   const svgRef = useRef<SVGSVGElement>(null);
@@ -667,12 +672,12 @@ export const AnnotationCanvas = forwardRef<
   const selectedBox = selected ? annotationBox(selected) : null;
 
   const TOOLS: [Tool, string, React.ReactNode][] = [
-    ["pen", labels?.pen ?? "그리기", <Pencil key="p" size={16} />],
-    ["rect", labels?.rect ?? "박스", <Square key="r" size={16} />],
-    ["arrow", labels?.arrow ?? "화살표", <ArrowUpRight key="a" size={16} />],
-    ["text", labels?.text ?? "메모", <Type key="t" size={16} />],
-    ["eraser", labels?.eraser ?? "지우개", <Eraser key="e" size={16} />],
-    ["select", labels?.select ?? "이동", <MousePointer2 key="s" size={16} />],
+    ["pen", label("pen"), <Pencil key="p" size={16} />],
+    ["rect", label("rect"), <Square key="r" size={16} />],
+    ["arrow", label("arrow"), <ArrowUpRight key="a" size={16} />],
+    ["text", label("text"), <Type key="t" size={16} />],
+    ["eraser", label("eraser"), <Eraser key="e" size={16} />],
+    ["select", label("select"), <MousePointer2 key="s" size={16} />],
   ];
 
   return (
@@ -766,7 +771,7 @@ export const AnnotationCanvas = forwardRef<
               <input
                 autoFocus
                 value={textEditor.value}
-                placeholder={labels?.note ?? "메모 입력"}
+                placeholder={label("note")}
                 onChange={(e) =>
                   setTextEditor({ ...textEditor, value: e.target.value })
                 }
@@ -817,7 +822,7 @@ export const AnnotationCanvas = forwardRef<
             <button
               key={c}
               type="button"
-              aria-label={`${labels?.color ?? "색상"} ${c}`}
+              aria-label={`${label("color")} ${c}`}
               aria-pressed={color === c}
               onClick={() => setColor(c)}
               className="flex h-8 w-6 items-center justify-center"
@@ -835,8 +840,8 @@ export const AnnotationCanvas = forwardRef<
           <span className="mx-1 h-5 w-px bg-le-ink-200" />
           <button
             type="button"
-            title={labels?.undo ?? "실행 취소"}
-            aria-label={labels?.undo ?? "실행 취소"}
+            title={label("undo")}
+            aria-label={label("undo")}
             disabled={!history.past.length}
             onClick={undo}
             className="flex h-8 w-8 items-center justify-center rounded-le-lg text-le-ink-500 transition-colors hover:bg-le-ink-100 hover:text-le-ink-900 disabled:cursor-not-allowed disabled:opacity-30"
@@ -845,8 +850,8 @@ export const AnnotationCanvas = forwardRef<
           </button>
           <button
             type="button"
-            title={labels?.redo ?? "다시 실행"}
-            aria-label={labels?.redo ?? "다시 실행"}
+            title={label("redo")}
+            aria-label={label("redo")}
             disabled={!history.future.length}
             onClick={redo}
             className="flex h-8 w-8 items-center justify-center rounded-le-lg text-le-ink-500 transition-colors hover:bg-le-ink-100 hover:text-le-ink-900 disabled:cursor-not-allowed disabled:opacity-30"

package/components/detail-page/chart-inspector.tsx

@@ -11,6 +11,7 @@ import { SpecPromptEditPanel } from "./spec-prompt-edit-panel";
 import type { SpecEditPrompting } from "./table-inspector";
 import {
   NumberField,
+  historyOf,
   Section,
   ToggleButton,
 } from "./inspector-controls";
@@ -336,6 +337,7 @@ export const ChartInspector = observer(function ChartInspector({
               {t("detailPage.chart.decimals")}
             </span>
             <NumberField
+              history={historyOf(store)}
               value={spec.options.decimals}
               min={0}
               max={3}
@@ -389,6 +391,7 @@ export const ChartInspector = observer(function ChartInspector({
               </button>
             ) : (
               <NumberField
+                history={historyOf(store)}
                 value={spec.options.max}
                 min={1}
                 onChange={(max) => setOptions({ max })}
@@ -496,6 +499,7 @@ export const ChartInspector = observer(function ChartInspector({
               {t("detailPage.chart.barSize")}
             </span>
             <NumberField
+              history={historyOf(store)}
               value={spec.style.barSize}
               min={1}
               onChange={(barSize) => setStyle({ barSize })}
@@ -506,6 +510,7 @@ export const ChartInspector = observer(function ChartInspector({
               {t("detailPage.chart.gap")}
             </span>
             <NumberField
+              history={historyOf(store)}
               value={spec.style.gap}
               min={0}
               onChange={(gap) => setStyle({ gap })}

package/components/detail-page/confirm-delete-button.tsx

@@ -0,0 +1,82 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * 지우기 전에 한 번 묻는 버튼.
+ *
+ * 서버 자산·화면처럼 되돌릴 수 없는(또는 되돌리기 번거로운) 것을 한 번 눌러 지우면
+ * 휴지통 아이콘을 스치기만 해도 사라진다. `window.confirm` 은 쓰지 않는다 — 앱 크롬
+ * 밖의 OS 대화상자가 뜨고, 호스트에 확인 대화상자 계약도 없다. 대신 그 자리에서
+ * «삭제? 확인 / 취소» 로 바뀐다.
+ */
+export function ConfirmDeleteButton({
+  label,
+  onConfirm,
+  disabled,
+  className,
+  confirmClassName = "",
+  children,
+}: {
+  /** 휴지통 버튼의 이름(aria-label·title). */
+  label: string;
+  onConfirm: () => void;
+  disabled?: boolean;
+  className?: string;
+  /** 묻는 동안의 자리. 평소 버튼이 호버에만 보이는 자리라면 여기서 늘 보이게 한다. */
+  confirmClassName?: string;
+  children: ReactNode;
+}) {
+  const { t } = useTranslation("branding");
+  const [asking, setAsking] = useState(false);
+
+  if (!asking) {
+    return (
+      <button
+        type="button"
+        aria-label={label}
+        title={label}
+        disabled={disabled}
+        onClick={(event) => {
+          event.stopPropagation();
+          setAsking(true);
+        }}
+        className={className}
+      >
+        {children}
+      </button>
+    );
+  }
+
+  return (
+    <span
+      role="group"
+      aria-label={label}
+      // 줄·카드 자체의 클릭(선택·삽입)으로 새지 않게 막는다.
+      onClick={(event) => event.stopPropagation()}
+      className={`flex items-center gap-1 rounded-le-md border border-le-ink-200 bg-le-surface px-1.5 py-0.5 text-[11px] shadow-sm ${confirmClassName}`}
+    >
+      <span className="text-le-ink-600">{t("detailPage.confirmDelete.ask")}</span>
+      <button
+        type="button"
+        autoFocus
+        onClick={() => {
+          setAsking(false);
+          onConfirm();
+        }}
+        className="font-le-semibold text-le-danger-600 hover:underline"
+      >
+        {t("detailPage.confirmDelete.confirm")}
+      </button>
+      <button
+        type="button"
+        onClick={() => setAsking(false)}
+        className="text-le-ink-500 hover:underline"
+      >
+        {t("detailPage.confirmDelete.cancel")}
+      </button>
+    </span>
+  );
+}

package/components/detail-page/design-reference-picker.tsx

@@ -3,6 +3,7 @@
 
 import { useCallback, useRef, useState } from "react";
 import { ImagePlus, Loader2, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 import {
   DESIGN_REFERENCE_ASPECTS,
@@ -12,7 +13,6 @@ import {
   finalizeReferenceDataUri,
   planReferenceTokens,
   readReferenceFile,
-  referenceOrdinal,
   type DesignReferenceAspect,
 } from "../../lib/detail-page/design-reference";
 import { useDetailPageHost } from "./detail-page-host-context";
@@ -81,7 +81,9 @@ export function DesignReferencePicker({
   }[];
   disabled?: boolean;
 }) {
+  const { t } = useTranslation("branding");
   const { api } = useDetailPageHost();
+  const ordinal = (index: number) => t("detailPage.designReference.ordinal", { n: index + 1 });
   const [items, setItems] = useState<Picked[]>(() =>
     (initialReferences ?? [])
       .slice(0, MAX_DESIGN_REFERENCES)
@@ -120,7 +122,12 @@ export function DesignReferencePicker({
             height: 0,
           });
         } catch (err) {
-          setError(err instanceof Error ? err.message : "참고 사진을 붙이지 못했어요.");
+          // 거절 사유(형식·크기)는 lib 가 사람 말로 적어 던진다 — 그건 그대로 보여 준다.
+          setError(
+            err instanceof Error && err.message
+              ? err.message
+              : t("detailPage.designReference.attachFailed"),
+          );
         }
       }
       if (!added.length) return;
@@ -153,7 +160,7 @@ export function DesignReferencePicker({
         });
       }
     },
-    [items.length],
+    [items.length, t],
   );
 
   const toggleAspect = useCallback((id: string, aspect: DesignReferenceAspect) => {
@@ -207,25 +214,28 @@ export function DesignReferencePicker({
       const shortfall = api.asInsufficientCreditsError(err);
       setError(
         shortfall
-          ? `크레딧이 모자라요. 레퍼런스 ${items.length}장을 읽으려면 ${credits}크레딧이 ` +
-            `필요해요 (남은 크레딧 ${shortfall.remaining}).`
-          : err instanceof Error
+          ? t("detailPage.designReference.insufficient", {
+              count: items.length,
+              credits,
+              remaining: shortfall.remaining,
+            })
+          : err instanceof Error && err.message
             ? err.message
-            : "레퍼런스를 읽지 못했어요.",
+            : t("detailPage.designReference.readFailed"),
       );
     } finally {
       setBusy(false);
     }
-  }, [api, busy, credits, instruction, items, onBriefChange]);
+  }, [api, busy, credits, instruction, items, onBriefChange, t]);
 
   return (
     <div className="space-y-3 rounded-le-lg bg-le-ink-50 p-3">
       <div>
-        <p className="text-xs font-le-medium text-le-ink-700">디자인 레퍼런스</p>
+        <p className="text-xs font-le-medium text-le-ink-700">
+          {t("detailPage.designReference.title")}
+        </p>
         <p className="mt-1 text-[11px] text-le-ink-500">
-          &ldquo;이런 디자인으로&rdquo; 참고할 그림이에요. 상품 사진과 달리 페이지에
-          들어가지 않고, 구조와 색을 고르는 근거로만 써요. 최대{" "}
-          {MAX_DESIGN_REFERENCES}장.
+          {t("detailPage.designReference.description", { max: MAX_DESIGN_REFERENCES })}
         </p>
       </div>
 
@@ -238,15 +248,15 @@ export function DesignReferencePicker({
             <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-le-md bg-le-ink-100">
               {/* 붙인 사진은 data URI라 next/image 로 최적화할 것이 없다. */}
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={item.uri} alt="디자인 레퍼런스" className="h-full w-full object-cover" />
+              <img src={item.uri} alt={t("detailPage.designReference.title")} className="h-full w-full object-cover" />
               <span className="absolute left-0.5 top-0.5 rounded bg-le-ink-900/75 px-1 text-[10px] font-le-semibold leading-4 text-le-on-accent">
-                {referenceOrdinal(index)}
+                {ordinal(index)}
               </span>
               <button
                 type="button"
                 disabled={disabled || busy}
                 onClick={() => remove(item.id)}
-                aria-label={`${referenceOrdinal(index)} 레퍼런스 빼기`}
+                aria-label={t("detailPage.designReference.remove", { ordinal: ordinal(index) })}
                 className="absolute right-0.5 top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-le-ink-900/70 text-le-on-accent disabled:opacity-40"
               >
                 <X size={10} />
@@ -262,7 +272,7 @@ export function DesignReferencePicker({
                     disabled={disabled || busy}
                     aria-pressed={on}
                     // 축 이름만으로는 "내용 구성"이 문구까지인지 알 수 없다.
-                    title={aspect.hint}
+                    title={t(`detailPage.designReference.aspects.${aspect.key}.hint`)}
                     onClick={() => toggleAspect(item.id, aspect.key)}
                     className={`rounded-full border px-2 py-0.5 text-[11px] transition-colors disabled:opacity-40 ${
                       on
@@ -270,7 +280,7 @@ export function DesignReferencePicker({
                         : "border-le-ink-200 text-le-ink-500 hover:border-le-ink-400 hover:text-le-ink-700"
                     }`}
                   >
-                    {aspect.label}
+                    {t(`detailPage.designReference.aspects.${aspect.key}.label`)}
                   </button>
                 );
               })}
@@ -285,7 +295,7 @@ export function DesignReferencePicker({
             className="flex h-[4.75rem] items-center gap-1.5 rounded-le-lg border border-dashed border-le-ink-300 bg-le-surface px-3 text-xs text-le-ink-500 transition-colors hover:border-le-ink-400 hover:text-le-ink-700 disabled:opacity-40"
           >
             <ImagePlus size={14} />
-            레퍼런스 추가
+            {t("detailPage.designReference.add")}
           </button>
         ) : null}
         <input
@@ -305,7 +315,8 @@ export function DesignReferencePicker({
             onChange={(e) => setInstruction(e.target.value)}
             rows={2}
             disabled={disabled || busy}
-            placeholder="1번 이미지의 색감과 폰트, 2번 이미지의 레이아웃을 참고해 주세요"
+            aria-label={t("detailPage.designReference.instruction")}
+            placeholder={t("detailPage.designReference.instructionPlaceholder")}
             className="w-full resize-none rounded-le-lg border border-le-ink-200 bg-le-surface px-3 py-2 text-xs text-le-ink-900 outline-none placeholder:text-le-ink-400 focus:border-le-ink-400 disabled:bg-le-ink-100"
           />
           <button
@@ -315,14 +326,19 @@ export function DesignReferencePicker({
             className="inline-flex items-center gap-1.5 rounded-le-lg border border-le-ink-900 px-3 py-1.5 text-xs font-le-medium text-le-ink-900 transition-colors hover:bg-le-ink-900 hover:text-le-on-accent disabled:opacity-40"
           >
             {busy ? <Loader2 size={13} className="animate-spin" /> : null}
-            {busy ? "읽는 중…" : brief ? "다시 읽기" : "레퍼런스 읽기"}
+            {t(
+              busy
+                ? "detailPage.designReference.reading"
+                : brief
+                  ? "detailPage.designReference.reread"
+                  : "detailPage.designReference.read",
+            )}
           </button>
           {/* 누르기 전에 값을 알려 준다 — 누른 뒤 402 로 알게 되면 이미 축 고르고
               지시까지 다 적은 뒤다. 장수가 아니라 그림 크기에 붙는 값이라, 큰 그림을
               작은 것으로 바꾸면 줄어든다. */}
-          <p className="text-[11px] text-le-ink-500">
-            읽을 때마다 {credits}크레딧이 들어요 (레퍼런스 {items.length}장 · 그림이 크고
-            길수록 올라가요).
+          <p data-credits={credits} className="text-[11px] text-le-ink-500">
+            {t("detailPage.designReference.creditNote", { credits, count: items.length })}
           </p>
         </>
       ) : null}
@@ -333,27 +349,9 @@ export function DesignReferencePicker({
   );
 }
 
-const TONE_LABELS: Record<string, string> = {
-  casual: "캐주얼",
-  minimal: "미니멀",
-  info: "정보형",
-  "ad-like": "광고형",
-  premium: "프리미엄",
-  cute: "귀여운",
-  tech: "테크",
-  natural: "내추럴",
-  editorial: "에디토리얼",
-};
-
-const DENSITY_LABELS: Record<string, string> = {
-  airy: "여백형",
-  editorial: "편집형",
-  compact: "정보 밀집형",
-  cozy: "포근한",
-};
-
 /** 읽은 결과를 그 자리에 적는다 — 톤이 왜 바뀌었는지 보이지 않으면 제안이 아니라 사고다. */
 function BriefSummary({ brief }: { brief: DetailPageDesignBrief }) {
+  const { t } = useTranslation("branding");
   const colors = [brief.bg_color, ...brief.primary_colors].filter(Boolean);
   const nothingRead =
     !brief.tone && !brief.density && !colors.length && !brief.summary && !brief.content;
@@ -361,7 +359,7 @@ function BriefSummary({ brief }: { brief: DetailPageDesignBrief }) {
   if (nothingRead) {
     return (
       <p className="text-[11px] text-le-ink-500">
-        레퍼런스에서 읽어낸 것이 없어요. 판면이 잘 보이는 그림으로 바꿔 보세요.
+        {t("detailPage.designReference.nothingRead")}
       </p>
     );
   }
@@ -371,12 +369,15 @@ function BriefSummary({ brief }: { brief: DetailPageDesignBrief }) {
       <div className="flex flex-wrap items-center gap-1.5">
         {brief.tone ? (
           <span className="rounded-full bg-le-ink-900 px-2 py-0.5 text-[11px] text-le-on-accent">
-            {TONE_LABELS[brief.tone] ?? brief.tone}
+            {/* 모르는 톤은 서버 값 그대로 — 새 톤이 번역보다 먼저 올 수 있다. */}
+            {t(`detailPage.designReference.tone.${brief.tone}`, { defaultValue: brief.tone })}
           </span>
         ) : null}
         {brief.density ? (
           <span className="rounded-full border border-le-ink-300 px-2 py-0.5 text-[11px] text-le-ink-600">
-            {DENSITY_LABELS[brief.density] ?? brief.density}
+            {t(`detailPage.designReference.density.${brief.density}`, {
+              defaultValue: brief.density,
+            })}
           </span>
         ) : null}
         {colors.map((color) => (
@@ -397,7 +398,7 @@ function BriefSummary({ brief }: { brief: DetailPageDesignBrief }) {
         </p>
       ) : null}
       <p className="text-[11px] text-le-ink-400">
-        읽은 결과는 제안이에요. 위 디자인 톤을 직접 바꾸면 그 선택이 우선해요.
+        {t("detailPage.designReference.suggestionNote")}
       </p>
     </div>
   );