@leviosa-ai/detail-page-editor 0.1.0

package/lib/cardnews/font-loader.ts

@@ -0,0 +1,306 @@
+/**
+ * Dynamic Google Fonts loader for marketing editors (cardnews / templates).
+ *
+ * Loads font CSS via <link> tag on first call; subsequent calls with the same
+ * families are no-ops.  Returns a promise that resolves when all requested
+ * font faces have finished loading.
+ */
+
+import {
+  FONT_CATALOG,
+  LEVIOSA_KONVA_VERSION,
+  catalogFont,
+  fontLoadSampleForText,
+  resolveFontFamily,
+  type CatalogFont,
+} from "@leviosa-ai/konva";
+
+export type FontOption = CatalogFont;
+
+/**
+ * The picker list. Derived from the konva catalog (fonts/catalog.json), which is the
+ * same file the frozen woff2 bundle is built from — so a font can never appear here
+ * without its bytes existing, and adding one means editing exactly one place.
+ */
+export const ALL_FONT_OPTIONS: FontOption[] = FONT_CATALOG;
+
+const DEFAULT_FONT_WEIGHTS = [100, 200, 300, 400, 500, 600, 700, 800, 900];
+
+export function getSupportedFontWeights(fontFamily?: string | null): number[] {
+  const weights = catalogFont(fontFamily || "Pretendard")?.weights;
+  return weights?.length ? weights : DEFAULT_FONT_WEIGHTS;
+}
+
+export function getClosestSupportedFontWeight(
+  fontFamily: string | undefined | null,
+  fontWeight: unknown,
+): string {
+  const supportedWeights = getSupportedFontWeights(fontFamily);
+  const requestedWeight =
+    fontWeight === "bold" ? 700
+      : fontWeight === "normal" ? 400
+        : Number(fontWeight);
+  const fallbackWeight = supportedWeights.includes(400) ? 400 : supportedWeights[0];
+  if (!Number.isFinite(requestedWeight)) return String(fallbackWeight);
+  const closestWeight = supportedWeights.reduce((closest, weight) => (
+    Math.abs(weight - requestedWeight) < Math.abs(closest - requestedWeight) ? weight : closest
+  ), fallbackWeight);
+  return String(closestWeight);
+}
+
+// ── Loader ───────────────────────────────────────────────────────────────────
+
+const loadedFontFaces = new Set<string>();
+const loadedFamilyWeights = new Set<string>();
+const stylesheetPromises = new Map<string, Promise<void>>();
+const FONT_LOAD_SAMPLE = "가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789";
+/**
+ * 자주 쓰는 한글. 구글의 한글 조각은 빈도순으로 묶여 있어서, 이 정도만 미리 받아두면
+ * 타이핑 중에 "방금 친 글자만 뒤늦게 폰트가 바뀌는" 일이 대부분 사라진다.
+ * 통짜(굵기당 ~750KB)를 받는 대신 조각 몇 개(수십 KB)로 때우는 타협.
+ */
+const COMMON_HANGUL_SAMPLE =
+  "가각간갈감갑값강같개객거건걸검것게겨결경계고곡곤골곱공과관광교구국군굴권귀그근글금급기긴길김까꼭끝" +
+  "나난날남내네녀년노논놀농높다단달담답당대댓더던데도독돈동되된두들등디따때또" +
+  "라락란람래러런럴럼렁레려력련령로록론료루류르른를름리린립" +
+  "마막만많말맛망매머먹면명모목몰못무문물미민밀바박반받발밤밥방배백버번벌범법베변별병보복본볼봄부북분불브비빛" +
+  "사산살삼상새색생서석선설섬성세소속손솔송수숙순술스승시식신실심십싶" +
+  "아악안않알암앞애야약양어억언얼업없에여역연열영예오옥온올와완왕외요용우운울원월위유육으은을음의이인일임입있" +
+  "자작잔잘잠장재저적전절점정제조족존종주준줄중즈지직진질집짓차착찬참창채책처천철첫청체초촌총최추축출춤충취치친칠침" +
+  "카칼커컴케코콘크큰클키타탁탄탈탐태택터턴테토톤통투트특틀티파판팔패퍼편평포표푸품풍프피필" +
+  "하학한할함합항해핵행향허현혈형혜호혹혼홀화확환활황회획효후훈휴흐흑희히힘";
+/**
+ * The font stylesheets are cached at the CDN edge, but their filenames are family
+ * slugs — they do not change when the bundle does. A re-freeze rewrites the woff2
+ * filenames (they are hashes of the source URL), so an edge-cached stylesheet ends up
+ * pointing at slice files that no longer exist: every one 404s and the font fails to
+ * 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.
+ */
+function bundleUrl(path: string): string {
+  return `${path}?v=${LEVIOSA_KONVA_VERSION}`;
+}
+
+const LOCAL_FONT_CSS_URL = bundleUrl("/render-fonts/font-css.css");
+
+export class FontLoadError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "FontLoadError";
+  }
+}
+
+function slugifyFamily(family: string): string {
+  return family
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+const LOCAL_FONT_FAMILY_SLUGS = new Set(
+  ALL_FONT_OPTIONS.map((font) => slugifyFamily(font.family)),
+);
+
+function ensureStylesheet(href: string): Promise<void> {
+  if (typeof document === "undefined") return Promise.resolve();
+
+  const existing = stylesheetPromises.get(href);
+  if (existing) return existing;
+
+  const linkElement = document.createElement("link");
+  linkElement.rel = "stylesheet";
+  linkElement.href = href;
+  const promise = new Promise<void>((resolve, reject) => {
+    linkElement.addEventListener("load", () => resolve(), { once: true });
+    linkElement.addEventListener("error", () => {
+      // 실패한 약속을 캐시에 남기면 이후 호출이 전부 같은 실패를 돌려받는다(재시도 불가).
+      stylesheetPromises.delete(href);
+      reject(new Error(`Font stylesheet failed to load: ${href}`));
+    }, { once: true });
+  });
+  stylesheetPromises.set(href, promise);
+  document.head.appendChild(linkElement);
+  return promise;
+}
+
+/**
+ * Installs the @font-face rules for the faces about to be drawn.
+ *
+ * Asks for the family+weight file rather than the whole family: a Korean family is
+ * ~90 unicode-range slices per weight, so the family file is nine times the CSS for
+ * the one weight a slide actually uses. Falls back family-wide, then bundle-wide.
+ */
+function ensureFontFaceStylesheets(
+  requests: Array<{ family: string; weight: string }>,
+): Promise<void> {
+  const seen = new Set<string>();
+  const hrefs: string[] = [];
+  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);
+      continue;
+    }
+    const key = `${slug}\n${weight}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    hrefs.push(bundleUrl(`/render-fonts/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(LOCAL_FONT_CSS_URL);
+      }),
+    ),
+  ).then(() => {});
+}
+
+export interface FontFaceRequest {
+  family?: string | null;
+  weight?: string | number | null;
+  size?: string | number | null;
+  sample?: string | null;
+}
+
+interface NormalizedFontFaceRequest {
+  family: string;
+  weight: string;
+  size: number;
+  sample: string;
+}
+
+/**
+ * 한 번 실패하면 편집기는 검은 캔버스에 "폰트를 불러오지 못했습니다"만 띄운 채 멈춘다
+ * (새로고침 전까지 복구 없음). 실패는 대개 일시적(같은 시점에 이미지 여러 장을 동시에
+ * 받느라 CSS 요청이 밀리는 등)이라 한 번 더 시도한다.
+ * ponytail: 재시도 1회 고정. 계속 실패하면 진짜 문제라 그대로 에러를 낸다.
+ */
+export function loadFontFaces(requests: FontFaceRequest[]): Promise<void> {
+  return loadFontFacesOnce(requests).catch(() => loadFontFacesOnce(requests));
+}
+
+function loadFontFacesOnce(requests: FontFaceRequest[]): Promise<void> {
+  if (typeof document === "undefined") return Promise.resolve();
+  if (!document.fonts) return Promise.resolve();
+
+  const stylesheetRequests: Array<{ family: string; weight: string }> = [];
+  const pendingRequests: NormalizedFontFaceRequest[] = [];
+  for (const request of requests) {
+    // 블록에 저장된 값은 폰트명이 아니라 계열/형태 딱지("gothic/round")일 수 있다.
+    // 그리는 쪽과 같은 함수로 실제 패밀리를 정해야 "받은 폰트 ≠ 그리는 폰트"가 안 생긴다.
+    const family = resolveFontFamily(request.family);
+    // Snap to a weight the family actually ships, so the family+weight stylesheet
+    // we ask for is one that exists (a 404 would cost a round trip to discover).
+    const weight = getClosestSupportedFontWeight(family, request.weight ?? "400");
+    const size = Number(request.size || 16);
+    stylesheetRequests.push({ family, weight });
+    const rawSample = (request.sample || FONT_LOAD_SAMPLE).trim() || FONT_LOAD_SAMPLE;
+    const sample = fontLoadSampleForText(family, rawSample, FONT_LOAD_SAMPLE);
+    const key = `${family}\n${weight}\n${size}\n${sample}`;
+    if (loadedFontFaces.has(key)) continue;
+    pendingRequests.push({ family, weight, size, sample });
+  }
+
+  if (pendingRequests.length === 0) return document.fonts.ready.then(() => {});
+  return ensureFontFaceStylesheets(stylesheetRequests)
+    .then(() => Promise.all(
+      pendingRequests.map(async (request) => {
+        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}`);
+        }
+        const unloadedFace = faces.find((face) => face.status !== "loaded");
+        if (unloadedFace) {
+          throw new FontLoadError(`Font face failed to load: ${descriptor}`);
+        }
+        if (!document.fonts.check(descriptor, request.sample)) {
+          throw new FontLoadError(`Font face is not ready for rendering: ${descriptor}`);
+        }
+      }),
+    ))
+    .then(() => document.fonts.ready)
+    .then(() => {
+      for (const request of pendingRequests) {
+        loadedFontFaces.add(`${request.family}\n${request.weight}\n${request.size}\n${request.sample}`);
+        loadedFamilyWeights.add(`${request.family}\n${request.weight}`);
+      }
+    });
+}
+
+/**
+ * 이 패밀리+굵기를 이미 한 번이라도 그려본 적이 있는지.
+ * 캔버스가 "지금 이 폰트로 그리면 대체 폰트가 아니라 진짜 폰트가 나온다"를 판단하는 데 쓴다.
+ * 글자 단위 조각까지 보장하지는 않는다 — 그건 COMMON_HANGUL_SAMPLE 예열이 덮는다.
+ */
+export function isFontFamilyWeightLoaded(family: string, weight: string): boolean {
+  return loadedFamilyWeights.has(`${family.trim()}\n${weight}`);
+}
+
+/**
+ * 화면에 적용된 폰트를 다 받은 뒤에 뒤에서 조용히 받아두는 것들.
+ * - 쓰고 있는 패밀리+굵기의 자주 쓰는 한글 (타이핑 중 튐 방지)
+ * - 같은 패밀리의 다른 굵기 (굵게 토글이 즉시 먹히게), 샘플은 지금 화면의 글자
+ * 실패는 무시하고, 보이는 폰트 요청과 대역폭을 다투지 않게 한 건씩 차례로 받는다.
+ */
+export function prefetchFontVariants(requests: FontFaceRequest[]): void {
+  if (typeof document === "undefined" || !document.fonts) return;
+
+  const samplesByFamily = new Map<string, string>();
+  const usedFaces = new Set<string>();
+  for (const request of requests) {
+    const family = resolveFontFamily(request.family);
+    const weight = getClosestSupportedFontWeight(family, request.weight ?? "400");
+    usedFaces.add(`${family}\n${weight}`);
+    const sample = (request.sample || "").trim();
+    if (sample) samplesByFamily.set(family, `${samplesByFamily.get(family) ?? ""}${sample}`);
+  }
+
+  const jobs: FontFaceRequest[] = [];
+  for (const face of usedFaces) {
+    const [family, weight] = face.split("\n");
+    jobs.push({ family, weight, sample: COMMON_HANGUL_SAMPLE });
+    for (const other of getSupportedFontWeights(family)) {
+      if (String(other) === weight) continue;
+      jobs.push({ family, weight: String(other), sample: samplesByFamily.get(family) || FONT_LOAD_SAMPLE });
+    }
+  }
+
+  // ponytail: 순차 1건씩. 병렬로 풀면 다음 슬라이드 폰트 요청을 밀어낸다.
+  void jobs.reduce(
+    (chain, job) => chain.then(() => loadFontFaces([job]).catch(() => {})),
+    Promise.resolve(),
+  );
+}
+
+/**
+ * Keeps the historical API name for editor/font-picker callers.
+ * This now only installs the local font stylesheet; actual canvas rendering
+ * loads the font faces it uses through `loadFontFaces`.
+ */
+export function loadAllGoogleFonts(): Promise<void> {
+  return ensureStylesheet(LOCAL_FONT_CSS_URL).catch(() => {});
+}
+
+export function loadDefaultCardnewsFonts(): Promise<void> {
+  return loadFontFaces([
+    { family: "Pretendard", weight: "100", sample: FONT_LOAD_SAMPLE },
+    { family: "Pretendard", weight: "200", sample: FONT_LOAD_SAMPLE },
+    { family: "Pretendard", weight: "300", sample: FONT_LOAD_SAMPLE },
+    { family: "Pretendard", weight: "400", sample: FONT_LOAD_SAMPLE },
+    { family: "Pretendard", weight: "500", sample: FONT_LOAD_SAMPLE },
+    { family: "Pretendard", weight: "600", sample: FONT_LOAD_SAMPLE },
+    { family: "Pretendard", weight: "700", sample: FONT_LOAD_SAMPLE },
+    { family: "Pretendard", weight: "800", sample: FONT_LOAD_SAMPLE },
+    { family: "Pretendard", weight: "900", sample: FONT_LOAD_SAMPLE },
+    { family: "Noto Sans KR", weight: "400", sample: FONT_LOAD_SAMPLE },
+    { family: "Noto Sans KR", weight: "700", sample: FONT_LOAD_SAMPLE },
+    { family: "Noto Sans KR", weight: "900", sample: FONT_LOAD_SAMPLE },
+  ]);
+}

package/lib/detail-page/animation-sniff.ts

@@ -0,0 +1,101 @@
+/**
+ * Byte-level animation detection. No dependencies — the upload panel needs the
+ * answer without pulling in the heavy decoders.
+ *
+ * Why bytes: a ``.gif`` suffix used to be proof of animation, but the default
+ * output format is animated WebP now and **``.webp`` is shared by still and
+ * animated files**. Stills already use it widely (references, covers), so a
+ * suffix or MIME check would tag half the library as animated. The RIFF
+ * ``ANIM`` chunk is the only real evidence.
+ */
+
+/** Container format from the leading bytes, or null if it is neither. */
+export function sniffAnimationType(buffer: ArrayBuffer): "gif" | "webp" | null {
+  const head = new Uint8Array(buffer, 0, Math.min(12, buffer.byteLength));
+  // "GIF"
+  if (head.length >= 4 && head[0] === 0x47 && head[1] === 0x49 && head[2] === 0x46) {
+    return "gif";
+  }
+  // "RIFF" .... "WEBP"
+  if (
+    head.length >= 12 &&
+    head[0] === 0x52 &&
+    head[1] === 0x49 &&
+    head[2] === 0x46 &&
+    head[3] === 0x46 &&
+    head[8] === 0x57 &&
+    head[9] === 0x45 &&
+    head[10] === 0x42 &&
+    head[11] === 0x50
+  ) {
+    return "webp";
+  }
+  return null;
+}
+
+/**
+ * Whether a RIFF/WEBP buffer carries an ``ANIM`` chunk.
+ *
+ * RIFF is a flat list of ``fourcc(4) + size(4, little endian) + payload``, with
+ * odd payloads padded to even. Animated files put ``ANIM`` right after ``VP8X``,
+ * but we walk rather than assume an order — and always advance at least 8 bytes
+ * so a truncated file cannot spin forever.
+ */
+export function isAnimatedWebp(buffer: ArrayBuffer): boolean {
+  if (buffer.byteLength < 16) return false;
+  if (sniffAnimationType(buffer) !== "webp") return false;
+  const view = new DataView(buffer);
+  let offset = 12;
+  while (offset + 8 <= buffer.byteLength) {
+    const fourcc =
+      String.fromCharCode(view.getUint8(offset)) +
+      String.fromCharCode(view.getUint8(offset + 1)) +
+      String.fromCharCode(view.getUint8(offset + 2)) +
+      String.fromCharCode(view.getUint8(offset + 3));
+    if (fourcc === "ANIM") return true;
+    const size = view.getUint32(offset + 4, true);
+    offset += 8 + size + (size % 2);
+  }
+  return false;
+}
+
+/**
+ * Whether a GIF buffer holds more than one image descriptor (0x2C).
+ *
+ * Extension blocks can contain a 0x2C byte too, so this is an approximation —
+ * but it only has to answer "more than one frame?", and a false positive just
+ * animates a still, which renders as its first frame anyway.
+ */
+export function isAnimatedGif(buffer: ArrayBuffer): boolean {
+  if (sniffAnimationType(buffer) !== "gif") return false;
+  const bytes = new Uint8Array(buffer);
+  let count = 0;
+  for (let i = 0; i < bytes.length; i++) {
+    if (bytes[i] === 0x2c && ++count > 1) return true;
+  }
+  return false;
+}
+
+/** Whether these bytes are an animation we can play on the canvas. */
+export function isAnimatedBuffer(buffer: ArrayBuffer): boolean {
+  return isAnimatedWebp(buffer) || isAnimatedGif(buffer);
+}
+
+/**
+ * Whether an uploaded file is an animation.
+ *
+ * Only the head is read — enough to reach the ``ANIM`` chunk of a WebP without
+ * pulling a large file into memory. GIFs need the whole buffer because the
+ * second image descriptor can sit anywhere.
+ */
+export async function isAnimatedFile(file: File): Promise<boolean> {
+  try {
+    const head = await file.slice(0, 4096).arrayBuffer();
+    const kind = sniffAnimationType(head);
+    if (kind === "webp") return isAnimatedWebp(head);
+    if (kind === "gif") return isAnimatedGif(await file.arrayBuffer());
+    return false;
+  } catch {
+    return false;
+  }
+}

package/lib/detail-page/asset-bytes-url.ts

@@ -0,0 +1,70 @@
+/**
+ * 브랜드 자산을 **바이트로 읽을 때** 쓸 주소로 바꾼다.
+ *
+ * 문서에 박히는 브랜드 자산 주소(``/api/v1/brands/assets/file/{id}?sig=``)는 그 순간의
+ * presigned S3 URL 로 302 리다이렉트한다. 리다이렉트가 **교차 출처**로 나가는 순간
+ * 브라우저는 다음 요청의 Origin 을 ``null`` 로 바꿔 보내고, 버킷의 CORS 는 우리 도메인만
+ * 허용하므로(와일드카드가 아니다) 그 요청은 거부된다.
+ *
+ * 그래서 이 주소는 **CORS 를 켜고 읽는 모든 소비자에게 막혀 있다.** 실제 자산으로 재면
+ * 이렇다:
+ *
+ * | 읽는 방법 | 결과 |
+ * |---|---|
+ * | 302 경로 + ``crossOrigin`` | 막힘 |
+ * | 302 경로, CORS 없이 | 뜬다 |
+ * | ``raw=1`` + ``crossOrigin`` | 뜬다 |
+ *
+ * 처음엔 디코더(``fetch``)만 막힌 줄 알았지만, 캔버스는 내보내기 때문에 이미지를 항상
+ * ``crossOrigin`` 으로 읽는다 — 그래서 편집기 이미지 자체가 안 뜨고 점선 빈 상자로 남는다.
+ * 백엔드의 ``raw=1``(리다이렉트 없이 바이트) 로 돌리면 동일 출처 응답이라 둘 다 풀린다.
+ *
+ * 다른 주소(S3 presigned 직결·data URI·정적 파일)는 손대지 않는다.
+ */
+
+const BRAND_ASSET_FILE_PATH = "/api/v1/brands/assets/file/";
+
+export function assetBytesUrl(src: string): string {
+  const url = String(src ?? "");
+  if (!url) return url;
+  // 절대 주소로 와도 경로만 보면 된다(같은 오리진으로 서빙되므로).
+  const path = url.split("?")[0];
+  if (!path.includes(BRAND_ASSET_FILE_PATH)) return url;
+  if (/[?&]raw=/.test(url)) return url;
+  return `${url}${url.includes("?") ? "&" : "?"}raw=1`;
+}
+
+type ElementLike = {
+  src?: unknown;
+  clipSrc?: unknown;
+  maskSrc?: unknown;
+  children?: unknown;
+};
+
+const SRC_KEYS = ["src", "clipSrc", "maskSrc"] as const;
+
+/**
+ * 이미 저장된 문서 안의 자산 주소를 바이트 경로로 옮긴다(제자리 수정, 멱등).
+ *
+ * 새로 꽂는 것만 고치면 **어제까지 저장해 둔 문서는 계속 빈 상자로 열린다.** 열 때 한 번
+ * 훑는 편이 문서를 일괄 마이그레이션하는 것보다 안전하다 — 되돌릴 것이 없고, 브랜드 자산
+ * 경로가 아닌 주소는 그대로 지나간다.
+ */
+export function normalizeDocumentAssetSrcs<T>(doc: T): T {
+  const walk = (nodes: unknown): void => {
+    if (!Array.isArray(nodes)) return;
+    for (const node of nodes) {
+      if (!node || typeof node !== "object") continue;
+      const el = node as ElementLike;
+      for (const key of SRC_KEYS) {
+        if (typeof el[key] === "string") el[key] = assetBytesUrl(el[key] as string);
+      }
+      walk(el.children);
+    }
+  };
+  const pages = (doc as { pages?: unknown })?.pages;
+  if (Array.isArray(pages)) {
+    for (const page of pages) walk((page as { children?: unknown })?.children);
+  }
+  return doc;
+}