@leviosa-ai/detail-page-editor 0.6.3 → 0.7.0

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

@@ -9,6 +9,7 @@ import {
   REFERENCE_ACCEPT_ATTR,
   estimateBriefCredits,
   finalizeReferenceDataUri,
+  planReferenceTokens,
   readReferenceFile,
   referenceOrdinal,
   type DesignReferenceAspect,
@@ -46,6 +47,9 @@ type Picked = {
   aspects: DesignReferenceAspect[];
   /** 이 장의 비전 입력 토큰. 0 은 "아직 못 쟀다" — 값은 비싼 쪽으로 잡힌다. */
   inputTokens: number;
+  /** 이 장의 가로세로. 0 이면 아직 못 쟀다 — 세로로 긴 캡쳐의 값은 이 크기로 정해진다. */
+  width: number;
+  height: number;
 };
 
 export function DesignReferencePicker({
@@ -70,6 +74,9 @@ export function DesignReferencePicker({
     aspects: DesignReferenceAspect[];
     /** 앞 화면에서 이미 잰 크기. 0 이면 여기서도 비싼 쪽으로 잡는다. */
     inputTokens: number;
+    /** 앞 화면에서 잰 가로세로. 옛 임시저장에는 없어서 선택이다. */
+    width?: number;
+    height?: number;
   }[];
   disabled?: boolean;
 }) {
@@ -82,6 +89,8 @@ export function DesignReferencePicker({
         uri: entry.uri,
         aspects: [...entry.aspects],
         inputTokens: entry.inputTokens,
+        width: entry.width ?? 0,
+        height: entry.height ?? 0,
       })),
   );
   const [instruction, setInstruction] = useState("");
@@ -106,6 +115,8 @@ export function DesignReferencePicker({
             uri: await readReferenceFile(file),
             aspects: [],
             inputTokens: 0,
+            width: 0,
+            height: 0,
           });
         } catch (err) {
           setError(err instanceof Error ? err.message : "참고 사진을 붙이지 못했어요.");
@@ -128,7 +139,13 @@ export function DesignReferencePicker({
           setItems((prev) =>
             prev.map((entry) =>
               entry.id === item.id
-                ? { ...entry, uri: result.uri, inputTokens: result.inputTokens }
+                ? {
+                    ...entry,
+                    uri: result.uri,
+                    inputTokens: result.inputTokens,
+                    width: result.width,
+                    height: result.height,
+                  }
                 : entry,
             ),
           );
@@ -168,7 +185,10 @@ export function DesignReferencePicker({
 
   // 값은 장수가 아니라 **붙인 그림의 크기**로 정해진다. 서버와 같은 공식이라 여기 뜬 수가
   // 곧 청구될 수다(선차감이라 미리 맞아야 한다).
-  const credits = estimateBriefCredits(items.map((item) => item.inputTokens));
+  //
+  // 크기를 그대로 넘기는 이유는 세로로 긴 캡쳐 때문이다 — 서버가 조각내 싣고, 조각 수는
+  // **몇 장을 붙였는지**에 따라 달라진다. 장마다 미리 굳혀 둔 토큰 수로는 못 센다.
+  const credits = estimateBriefCredits(planReferenceTokens(items));
 
   const analyze = useCallback(async () => {
     if (!items.length || busy) return;

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

@@ -20,6 +20,7 @@ import {
   applyTextLineFit,
   clearPlaceholderImageSrc,
 } from "../../lib/detail-page-canvas/custom-props-adapter";
+import { TooltipProvider } from "../ui/tooltip";
 import { CanvasStoreContext } from "./canvas-observer";
 import { LeviosaCanvasWorkspace } from "./leviosa-canvas-workspace";
 import { DetailPagePagesTimeline } from "./detail-page-pages-timeline";
@@ -1018,6 +1019,13 @@ export function DetailPageEditor({
     <CanvasStoreContext.Provider value={store}>
     {/* 캔버스 위 띠가 쓰는 값들. props로 내리면 작업 영역이 통째로 다시 만들어진다. */}
     <EditorAiProvider value={aiValue}>
+    {/* 편집기가 자기 툴팁 프로바이더를 깐다.
+        예전에는 안 깔았다 — 첫 소비자(leviosa-frontend)가 앱 레이아웃에 전역으로 하나
+        갖고 있어서 우연히 서 있었을 뿐이다. 그것이 없는 소비자에서는 AI 생성 패널이
+        열리는 순간 `Tooltip must be used within TooltipProvider` 로 화면이 통째로
+        죽었다. Radix 의 프로바이더는 중첩이 안전하므로(안쪽이 이긴다), 이미 깔아 둔
+        앱에도 해가 없다. */}
+    <TooltipProvider>
     <div
       data-dpe-root=""
       className="flex h-screen min-h-[640px] flex-col bg-dpe-ink-100"
@@ -1046,6 +1054,7 @@ export function DetailPageEditor({
         <slots.PricingModal open={pricingOpen} onOpenChange={setPricingOpen} />
       ) : null}
     </div>
+    </TooltipProvider>
     </EditorAiProvider>
     </CanvasStoreContext.Provider>
   );

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

@@ -37,6 +37,10 @@ export function DetailPageFontPicker({
   const [loading, setLoading] = useState<string | null>(null);
   const [error, setError] = useState(false);
   const [tags, setTags] = useState<FontTag[]>([]);
+  /** 404 로 떨어진 미리보기. 한 번 떨어지면 다시 안 부른다. */
+  const [previewsMissing, setPreviewsMissing] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
   const selected = getEditorFont(value);
   const catalogFonts = filterFontsByTags(EDITOR_CATALOG_FONTS, tags);
   const bundleFonts = filterFontsByTags(EDITOR_BUNDLE_FONTS, tags);
@@ -68,6 +72,14 @@ export function DetailPageFontPicker({
     }
   };
 
+  /**
+   * 미리보기 WebP 는 소비자 앱의 정적 자산이다(`assets.detailFontPreviews`).
+   *
+   * 그걸 굽는 스크립트를 아직 안 돌린 소비자에서는 이 그림이 통째로 404 다. 예전에는
+   * 그 자리에 깨진 이미지 아이콘과 alt 글자만 남아, 목록이 폰트 이름표만 늘어선 줄이
+   * 됐다 — 무엇을 고르는지 볼 수가 없다. 떨어지면 **이름을 그 폰트로** 그린다.
+   * 완전한 미리보기는 아니지만(가변 자소 몇 자뿐), 고를 수는 있다.
+   */
   const renderFont = (font: EditorFont) => (
     <CommandItem
       key={`${font.source}:${font.id}`}
@@ -77,14 +89,26 @@ export function DetailPageFontPicker({
       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">
-        <Image
-          src={font.previewSrc}
-          alt={font.label}
-          width={560}
-          height={88}
-          className="h-auto w-full object-contain object-left"
-          unoptimized
-        />
+        {previewsMissing.has(font.previewSrc) ? (
+          <span
+            className="truncate text-lg leading-none"
+            style={{ fontFamily: `"${font.family}", sans-serif` }}
+          >
+            {font.label}
+          </span>
+        ) : (
+          <Image
+            src={font.previewSrc}
+            alt={font.label}
+            width={560}
+            height={88}
+            className="h-auto w-full object-contain object-left"
+            unoptimized
+            onError={() =>
+              setPreviewsMissing((seen) => new Set(seen).add(font.previewSrc))
+            }
+          />
+        )}
       </span>
       {font.latinOnly ? (
         <span className="shrink-0 rounded border border-dpe-ink-200 px-1 py-0.5 text-[10px] leading-none text-dpe-ink-500">

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

@@ -91,6 +91,7 @@ import {
   type RemoveBackgroundFn,
 } from "./ai-generate-panel";
 import { toHexColor } from "../../lib/detail-page/css-color";
+import { editorAssetBase } from "../../lib/detail-page/runtime-config";
 import { setZ as setElementZ, zOrderOf } from "../../lib/detail-page/z-order";
 import {
   canDistribute,
@@ -959,7 +960,7 @@ function textGifEffects(t: Translate): GifEffectOption[] {
     id,
     label: t(`detailPage.gifEffects.text.${id}.label`),
     hint: t(`detailPage.gifEffects.text.${id}.hint`),
-    previewSrc: `/gif-effect-previews/text-${id}.gif`,
+    previewSrc: `${editorAssetBase("gifEffectPreviews")}/text-${id}.gif`,
   }));
 }
 
@@ -1033,7 +1034,7 @@ function imageGifEffects(t: Translate, shape: boolean): GifEffectOption[] {
     label: t(`detailPage.gifEffects.image.${effect.id}.label`),
     hint: t(`detailPage.gifEffects.image.${effect.id}.hint`),
     group: shape ? undefined : t(IMAGE_GIF_GROUP_KEY[effect.group]),
-    previewSrc: `/gif-effect-previews/image-${effect.id}.gif`,
+    previewSrc: `${editorAssetBase("gifEffectPreviews")}/image-${effect.id}.gif`,
   }));
 }
 

package/i18n/en.json

@@ -143,7 +143,29 @@
         "weight600": "Semi bold",
         "weight700": "Bold",
         "weight800": "Extra bold",
-        "weight900": "Black"
+        "weight900": "Black",
+        "alignInGroup": "Align within group",
+        "alignInSection": "Align within section",
+        "cellGridCols": "Columns",
+        "cellGridGif": "Cell fill GIF",
+        "cellGridGifHint": "Filled cells light up in order, hold 2s, then repeat. Add axis and value labels on the canvas.",
+        "cellGridGifMake": "Make chart GIF",
+        "cellGridInvalid": "Each row needs at least one cell and cannot exceed the column count.",
+        "cellGridRows": "Filled cells per row",
+        "cellGridShape": "Shape",
+        "countUpGif": "Number to count-up",
+        "countUpGifHint": "Counts up from 0 to {{target}}, holds 2s, then repeats. It lands right here.",
+        "countUpGifMake": "Make count-up GIF",
+        "gifShapeUnreadable": "Could not read the shape.",
+        "gifStageDetecting": "Finding the subject…",
+        "gifStageEncoding": "Encoding the GIF…",
+        "gifStagePreparing": "Preparing…",
+        "gifStageRendering": "Rendering",
+        "gifStageUploading": "Saving…",
+        "imageGif": "Image to GIF",
+        "imageGifCancel": "Cancel (the GIF in progress is saved to My images)",
+        "imageGifMake": "Make GIF",
+        "imageGifMaskFallback": "Couldn't isolate the object, so the effect covers the whole image."
       },
       "gifEffects": {
         "text": {
@@ -229,6 +251,10 @@
             "label": "Holographic foil (gold)",
             "hint": "Sweeps a warm gold sheen over it, like gold leaf."
           }
+        },
+        "group": {
+          "object": "Subject in the image",
+          "whole": "Whole image"
         }
       },
       "chart": {
@@ -284,7 +310,25 @@
         "detachHint": "Breaks it into plain shapes and text. After that, values and bars no longer stay in sync.",
         "panelTitle": "Charts",
         "insertHint": "Click to add to the canvas",
-        "panelHint": "Drop one in, then edit the values on the right — the bars follow. You can paste a table from Excel."
+        "panelHint": "Drop one in, then edit the values on the right — the bars follow. You can paste a table from Excel.",
+        "presets": {
+          "barHCompare": "Horizontal · Compare",
+          "barHMinimal": "Minimal bars",
+          "barHPercent": "Horizontal · Percent",
+          "barHRank": "Horizontal · Ranking",
+          "barVAxis": "Bar with axis",
+          "barVCompare": "Vertical · Compare",
+          "barVPlain": "Vertical · Plain",
+          "barVRank": "Ranked columns",
+          "donutShare": "Donut · Share",
+          "donutSingle": "Single-ratio donut",
+          "gaugeRate": "Gauge · Rate",
+          "gaugeScore": "Score gauge",
+          "lineCompare": "Comparison line",
+          "lineTrend": "Line · Trend",
+          "stackMix": "Stacked · Mix",
+          "stackShare": "Composition stack"
+        }
       },
       "table": {
         "typeTable": "Table",
@@ -347,6 +391,19 @@
           "moveColumn": "Drag to reorder column",
           "removeColumn": "Delete column {{column}}",
           "insertColumn": "Insert column at position {{at}}"
+        },
+        "preset": {
+          "gridCheck": "Checkmark comparison",
+          "gridCompare": "Comparison table",
+          "gridHeader": "Header table",
+          "gridPrice": "Price table",
+          "gridZebra": "Zebra comparison",
+          "specAiry": "Airy spec table",
+          "specBoxed": "Boxed spec table",
+          "specCelled": "Celled spec table",
+          "specHairline": "Hairline spec table",
+          "specRight": "Right-aligned values",
+          "typeCentered": "By type"
         }
       },
       "brandAssets": {
@@ -381,7 +438,11 @@
         "notAGif": "Only GIF files can be uploaded.",
         "upload": "Upload GIF",
         "empty": "No GIFs yet. Turn a text, image, or shape into one.",
-        "sectionOther": "Other"
+        "sectionOther": "Other",
+        "sectionImageEffect": "Image GIFs (effect)",
+        "sectionImagePrompt": "Image GIFs (prompt)",
+        "sectionShape": "Shape GIFs",
+        "sectionText": "Text GIFs"
       },
       "text": {
         "heading": "Heading",
@@ -573,7 +634,9 @@
         "next": "Next",
         "replace": "Replace",
         "replaceAll": "Replace all",
-        "chartHint": "Text inside charts is redrawn from the data, so it is skipped."
+        "chartHint": "Text inside charts is redrawn from the data, so it is skipped.",
+        "idle": "Searches the whole document",
+        "none": "No matches"
       },
       "pageToolbar": {
         "aiGenerate": "AI generate",
@@ -744,7 +807,15 @@
         "previewAlt": "Code preview",
         "previewEmpty": "Enter content to see a preview here.",
         "insert": "Add to canvas",
-        "hint": "Codes are generated right in your browser. No credits are used."
+        "hint": "Codes are generated right in your browser. No credits are used.",
+        "eanInvalid": "Enter 12 digits and we'll add the check digit. With 13 digits, the check digit must match.",
+        "eanLabel": "Product barcode number",
+        "eanPlaceholder": "12 or 13 digits",
+        "kindEan": "Barcode",
+        "kindQr": "QR code",
+        "qrInvalid": "The content is too long to encode as a QR code.",
+        "valueLabel": "Link or text",
+        "valuePlaceholder": "https://…"
       },
       "bubbleTail": {
         "handle": "Drag the tail tip to move it (drag inside the body to remove the tail)"
@@ -775,10 +846,18 @@
         "brandShapes": "Brand shapes",
         "brandReferences": "My references",
         "layers": "Layers",
-        "structure": "Structure"
+        "structure": "Structure",
+        "charts": "Charts",
+        "decorations": "Decor",
+        "icons": "Icons",
+        "qr": "QR",
+        "shapes": "Shapes",
+        "tables": "Tables"
       },
       "recents": {
-        "title": "Favorites & recent"
+        "title": "Favorites & recent",
+        "pin": "Add to favorites",
+        "unpin": "Remove from favorites"
       },
       "crop": {
         "title": "Crop",

package/i18n/index.ts

@@ -11,6 +11,16 @@ import en from "./en.json";
  * **번역기(i18next 인스턴스)는 소비자 것이다.** 패키지가 자기 인스턴스를 만들면
  * 언어 전환·네임스페이스 로딩이 두 벌로 갈라지므로, 여기서는 등록만 한다.
  */
+/** 언어 → 네임스페이스 → 중첩 문구. 부분만 주면 준 자리만 바뀐다. */
+export type DetailPageEditorTranslationOverrides = Record<
+  string,
+  Record<string, unknown>
+>;
+
+export type RegisterTranslationsOptions = {
+  overrides?: DetailPageEditorTranslationOverrides;
+};
+
 export type I18nLike = {
   addResourceBundle: (
     lng: string,
@@ -30,8 +40,27 @@ export type I18nLike = {
  *
  * 렌더보다 **먼저** 부르면 된다. 늦게 불러도 i18next 가 다시 그리지만, 그 사이 한 번은
  * 키가 보인다.
+ *
+ * ## 문구를 갈아 끼우고 싶을 때
+ *
+ * 소비자가 이미 자기 로케일 파일에 같은 키를 갖고 있으면 위의 `overwrite=false` 덕에
+ * 저절로 이긴다. 하지만 i18n 라이브러리를 안 쓰는 앱은 그럴 자리가 없다 — 편집기 하나
+ * 때문에 로케일 파일 체계를 새로 세우게 된다. 그래서 여기서 직접 받는다.
+ *
+ * ```ts
+ * registerDetailPageEditorTranslations(i18n, {
+ *   overrides: {
+ *     ko: { branding: { detailPage: { sidebar: { photos: "이미지" } } } },
+ *   },
+ * });
+ * ```
+ *
+ * 부분만 준다. 준 자리만 바뀌고 나머지는 우리 번들 그대로다.
  */
-export function registerDetailPageEditorTranslations(i18n: I18nLike): void {
+export function registerDetailPageEditorTranslations(
+  i18n: I18nLike,
+  options: RegisterTranslationsOptions = {},
+): void {
   for (const [lng, bundle] of [
     ["ko", ko],
     ["en", en],
@@ -40,6 +69,14 @@ export function registerDetailPageEditorTranslations(i18n: I18nLike): void {
       i18n.addResourceBundle(lng, ns, resources, true, false);
     }
   }
+
+  // 덮어쓸 것을 **나중에** 얹는다. 위와 달리 `overwrite=true` 다 — 소비자가 일부러
+  // 준 문구가 우리 기본값에 지면 준 의미가 없다.
+  for (const [lng, bundle] of Object.entries(options.overrides ?? {})) {
+    for (const [ns, resources] of Object.entries(bundle ?? {})) {
+      i18n.addResourceBundle(lng, ns, resources, true, true);
+    }
+  }
 }
 
 export { ko as detailPageEditorKo, en as detailPageEditorEn };

package/i18n/ko.json

@@ -143,7 +143,29 @@
         "weight600": "약간 굵게",
         "weight700": "굵게",
         "weight800": "아주 굵게",
-        "weight900": "가장 굵게"
+        "weight900": "가장 굵게",
+        "alignInGroup": "그룹 내 정렬",
+        "alignInSection": "섹션 정렬",
+        "cellGridCols": "열 수",
+        "cellGridGif": "셀 차오름 GIF",
+        "cellGridGifHint": "채운 칸이 순서대로 켜진 뒤 2초 멈췄다 반복해요. 축·수치 글자는 캔버스에서 위에 얹으세요.",
+        "cellGridGifMake": "차트 GIF 만들기",
+        "cellGridInvalid": "행별 칸 수는 1개 이상이고 열 수를 넘을 수 없어요.",
+        "cellGridRows": "행별 채울 칸",
+        "cellGridShape": "모양",
+        "countUpGif": "숫자를 카운트업으로",
+        "countUpGifHint": "0에서 {{target}}까지 오른 뒤 2초 멈췄다 반복해요. 이 자리에 그대로 들어갑니다.",
+        "countUpGifMake": "카운트업 GIF 만들기",
+        "gifShapeUnreadable": "도형을 읽지 못했어요.",
+        "gifStageDetecting": "물체를 찾는 중…",
+        "gifStageEncoding": "GIF로 굽는 중…",
+        "gifStagePreparing": "준비 중…",
+        "gifStageRendering": "그리는 중",
+        "gifStageUploading": "저장 중…",
+        "imageGif": "이미지를 GIF로",
+        "imageGifCancel": "취소 (만들던 GIF는 '내 이미지'에 저장돼요)",
+        "imageGifMake": "GIF 만들기",
+        "imageGifMaskFallback": "물체를 특정하지 못해 이미지 전체에 적용했어요."
       },
       "gifEffects": {
         "text": {
@@ -229,6 +251,10 @@
             "label": "홀로그램 포일 (골드)",
             "hint": "금박 포일처럼 따뜻한 금색 광택이 훑고 지나갑니다."
           }
+        },
+        "group": {
+          "object": "이미지 속 물체",
+          "whole": "이미지 전체"
         }
       },
       "chart": {
@@ -284,7 +310,25 @@
         "detachHint": "도형과 글자로 풀어 자유롭게 편집합니다. 푼 뒤에는 값과 막대가 따로 놉니다.",
         "panelTitle": "차트",
         "insertHint": "클릭하여 캔버스에 삽입",
-        "panelHint": "놓은 뒤 오른쪽에서 값을 고치면 막대 길이가 따라갑니다. 엑셀에서 복사해 붙여넣을 수도 있어요."
+        "panelHint": "놓은 뒤 오른쪽에서 값을 고치면 막대 길이가 따라갑니다. 엑셀에서 복사해 붙여넣을 수도 있어요.",
+        "presets": {
+          "barHCompare": "가로 막대 · 비교",
+          "barHMinimal": "간결 가로 막대",
+          "barHPercent": "가로 막대 · 퍼센트",
+          "barHRank": "가로 막대 · 순위",
+          "barVAxis": "축 있는 막대",
+          "barVCompare": "세로 막대 · 비교",
+          "barVPlain": "세로 막대 · 기본",
+          "barVRank": "순위 세로 막대",
+          "donutShare": "도넛 · 구성비",
+          "donutSingle": "단일 비율 도넛",
+          "gaugeRate": "게이지 · 달성률",
+          "gaugeScore": "점수 게이지",
+          "lineCompare": "비교 꺾은선",
+          "lineTrend": "꺾은선 · 추이",
+          "stackMix": "누적 · 구성",
+          "stackShare": "구성비 누적"
+        }
       },
       "table": {
         "typeTable": "표",
@@ -347,6 +391,19 @@
           "moveColumn": "끌어서 열 순서 바꾸기",
           "removeColumn": "{{column}}열 삭제",
           "insertColumn": "{{at}}번째 자리에 열 추가"
+        },
+        "preset": {
+          "gridCheck": "체크 비교표",
+          "gridCompare": "비교표",
+          "gridHeader": "머리글 표",
+          "gridPrice": "가격표",
+          "gridZebra": "줄무늬 비교표",
+          "specAiry": "여백형 스펙표",
+          "specBoxed": "상자형 스펙표",
+          "specCelled": "칸 구분 스펙표",
+          "specHairline": "헤어라인 스펙표",
+          "specRight": "값 우측정렬",
+          "typeCentered": "타입별 안내"
         }
       },
       "brandAssets": {
@@ -381,7 +438,11 @@
         "notAGif": "GIF 파일만 올릴 수 있어요.",
         "upload": "GIF 올리기",
         "empty": "아직 GIF가 없어요. 텍스트·이미지·도형을 골라 GIF로 만들어 보세요.",
-        "sectionOther": "기타"
+        "sectionOther": "기타",
+        "sectionImageEffect": "이미지 GIF (이펙트)",
+        "sectionImagePrompt": "이미지 GIF (프롬프트)",
+        "sectionShape": "도형 GIF",
+        "sectionText": "텍스트 GIF"
       },
       "text": {
         "heading": "제목",
@@ -573,7 +634,9 @@
         "next": "다음",
         "replace": "바꾸기",
         "replaceAll": "모두 바꾸기",
-        "chartHint": "차트 안 글자는 값에서 다시 그려지므로 빠집니다."
+        "chartHint": "차트 안 글자는 값에서 다시 그려지므로 빠집니다.",
+        "idle": "문서 전체에서 찾습니다",
+        "none": "없습니다"
       },
       "pageToolbar": {
         "aiGenerate": "AI 생성",
@@ -744,7 +807,15 @@
         "previewAlt": "코드 미리보기",
         "previewEmpty": "내용을 넣으면 여기에 미리보기가 나와요.",
         "insert": "캔버스에 넣기",
-        "hint": "코드는 브라우저에서 바로 만들어져요. 크레딧이 들지 않아요."
+        "hint": "코드는 브라우저에서 바로 만들어져요. 크레딧이 들지 않아요.",
+        "eanInvalid": "12자리를 넣으면 검증번호를 채워 드려요. 13자리면 검증번호가 맞아야 해요.",
+        "eanLabel": "상품 바코드 번호",
+        "eanPlaceholder": "숫자 12자리 또는 13자리",
+        "kindEan": "바코드",
+        "kindQr": "QR 코드",
+        "qrInvalid": "내용이 너무 길어 QR로 만들 수 없어요.",
+        "valueLabel": "링크 또는 텍스트",
+        "valuePlaceholder": "https://…"
       },
       "bubbleTail": {
         "handle": "꼬리 끝을 끌어 위치를 바꿉니다 (몸통 안으로 끌면 꼬리가 사라집니다)"
@@ -775,10 +846,18 @@
         "brandShapes": "브랜드 도형",
         "brandReferences": "내 레퍼런스",
         "layers": "레이어",
-        "structure": "구조"
+        "structure": "구조",
+        "charts": "차트",
+        "decorations": "장식",
+        "icons": "아이콘",
+        "qr": "QR",
+        "shapes": "도형",
+        "tables": "표"
       },
       "recents": {
-        "title": "즐겨찾기 · 최근"
+        "title": "즐겨찾기 · 최근",
+        "pin": "즐겨찾기에 추가",
+        "unpin": "즐겨찾기에서 빼기"
       },
       "crop": {
         "title": "자르기",

package/index.ts

@@ -22,3 +22,19 @@ export type * from "./types/detail-page-api";
 export type * from "./types/commerce";
 
 export { DetailPageEditor } from "./components/detail-page/detail-page-editor";
+
+/**
+ * 편집기가 부르는 주소(라우트 · 정적 자산)를 앱에 맞춘다.
+ *
+ * `basePath` 를 쓰는 앱은 **반드시** 불러야 한다 — 루트 절대경로 `fetch` 는 Next 의
+ * basePath 를 안 타므로, 안 부르면 아이콘·사진·폰트가 앱 바깥을 두드린다.
+ */
+export {
+  configureDetailPageEditor,
+  detailPageEditorConfig,
+} from "./lib/detail-page/runtime-config";
+export type {
+  DetailPageEditorAssets,
+  DetailPageEditorConfig,
+  DetailPageEditorEndpoints,
+} from "./lib/detail-page/runtime-config";

package/lib/cardnews/font-loader.ts

@@ -15,6 +15,8 @@ import {
   type CatalogFont,
 } from "@leviosa-ai/konva";
 
+import { editorAssetBase } from "../detail-page/runtime-config";
+
 export type FontOption = CatalogFont;
 
 /**
@@ -77,11 +79,15 @@ const COMMON_HANGUL_SAMPLE =
  * load. Stamping the bundle version into the URL makes each bundle its own cache key,
  * so a deploy can never be shadowed by the previous bundle's stylesheet.
  */
+/**
+ * 번들의 뿌리는 설정에서 온다(`configureDetailPageEditor`). 기본값은 예전과 같은
+ * `/render-fonts` 라, 아무것도 안 부른 소비자에게는 주소가 그대로다.
+ */
 function bundleUrl(path: string): string {
-  return `${path}?v=${LEVIOSA_KONVA_VERSION}`;
+  return `${editorAssetBase("fontBundle")}${path}?v=${LEVIOSA_KONVA_VERSION}`;
 }
 
-const LOCAL_FONT_CSS_URL = bundleUrl("/render-fonts/font-css.css");
+const localFontCssUrl = () => bundleUrl("/font-css.css");
 
 export class FontLoadError extends Error {
   constructor(message: string) {
@@ -139,23 +145,23 @@ function ensureFontFaceStylesheets(
   for (const { family, weight } of requests) {
     const slug = slugifyFamily(family.trim());
     if (!slug || !LOCAL_FONT_FAMILY_SLUGS.has(slug)) {
-      hrefs.push(LOCAL_FONT_CSS_URL);
+      hrefs.push(localFontCssUrl());
       continue;
     }
     const key = `${slug}\n${weight}`;
     if (seen.has(key)) continue;
     seen.add(key);
-    hrefs.push(bundleUrl(`/render-fonts/family-css/${slug}-${weight}.css`));
+    hrefs.push(bundleUrl(`/family-css/${slug}-${weight}.css`));
   }
   return Promise.all(
     hrefs.map((href) =>
       ensureStylesheet(href).catch(() => {
         const slug = href.match(/family-css\/(.+)-\d+\.css\?/)?.[1];
         return slug
-          ? ensureStylesheet(bundleUrl(`/render-fonts/family-css/${slug}.css`)).catch(() =>
-              ensureStylesheet(LOCAL_FONT_CSS_URL),
+          ? ensureStylesheet(bundleUrl(`/family-css/${slug}.css`)).catch(() =>
+              ensureStylesheet(localFontCssUrl()),
             )
-          : ensureStylesheet(LOCAL_FONT_CSS_URL);
+          : ensureStylesheet(localFontCssUrl());
       }),
     ),
   ).then(() => {});
@@ -285,7 +291,7 @@ export function prefetchFontVariants(requests: FontFaceRequest[]): void {
  * loads the font faces it uses through `loadFontFaces`.
  */
 export function loadAllGoogleFonts(): Promise<void> {
-  return ensureStylesheet(LOCAL_FONT_CSS_URL).catch(() => {});
+  return ensureStylesheet(localFontCssUrl()).catch(() => {});
 }
 
 export function loadDefaultCardnewsFonts(): Promise<void> {