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

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-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/i18n/en.json

@@ -124,6 +124,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

@@ -124,6 +124,7 @@
         "typeShape": "도형",
         "selectionCount": "{{count}}개 선택",
         "fontLatinOnly": "영문 전용",
+        "fontLatinOnlyUnavailable": "한글이 포함된 글자에는 영문 전용 글꼴을 쓸 수 없어요.",
         "fontLoading": "글꼴 불러오는 중",
         "chooseFont": "글꼴 선택",
         "fontTagFilter": "글꼴 종류",

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.9.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",