@leviosa-ai/detail-page-editor 0.1.0

package/lib/detail-page/korean-dictionary.ts

@@ -0,0 +1,187 @@
+/**
+ * 사전에 없는 한국어 낱말을 **국립국어원 한국어기초사전**에 한 번 물어본다.
+ *
+ * 아이콘 검색의 한국어는 사전 세 겹으로 받는다.
+ *
+ *  1. `ICON_KEYWORDS_KO` — 손으로 고른 상세페이지 말투. 순서까지 사람이 정한다.
+ *  2. `ICON_KEYWORDS_GENERATED` — Wiktionary에서 구운 것. 아이콘 이름에 실제로
+ *     있는 낱말로만 한정된다.
+ *  3. **여기** — 앞의 둘이 다 놓친 말. 국립국어원은 표제어 5만에 영어 대역어를 달고
+ *     있어서, 우리가 미리 예상하지 못한 말도 옮겨 준다.
+ *
+ * 이 층은 **없어도 되게** 만들었다. 키가 없거나, 하루 몫을 다 썼거나, 제공처가 죽으면
+ * 빈 배열을 돌려주고 검색은 앞의 두 사전만으로 계속 간다 — 결과가 조금 성길 뿐
+ * 오류로 끝나지 않는다.
+ *
+ * 키는 서버에만 있다(`NEXT_PUBLIC_` 아님). 이 모듈은 라우트 핸들러에서만 부른다.
+ */
+
+const ENDPOINT = "https://krdict.korean.go.kr/api/search";
+
+/**
+ * 제공처 앞단이 표기 없는 요청을 `<H1>Request Blocked</H1>`로 되돌린다. 키가 맞아도
+ * 400이 오므로 키 문제로 착각하기 쉽다 — 브라우저 표기를 붙여야 통과한다.
+ */
+const USER_AGENT =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 " +
+  "(KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36";
+
+/** 제공처가 10 미만을 거절한다(`Invalid num value`). */
+const NUM = 10;
+
+/**
+ * 한 사람이 하루에 쓸 수 있는 조회 수.
+ *
+ * 제공처 몫은 하루 5만이다. 한 사람이 그것을 다 태우면 나머지 전부가 조용히 나빠지므로
+ * 훨씬 낮은 자리에서 먼저 멈춘다. 캐시가 앞에 있어서 **처음 보는 낱말**만 여기 닿는다 —
+ * 100번이면 사람 하나가 하루에 새로 쳐 볼 만한 한국어를 넉넉히 덮는다.
+ */
+export const DAILY_LOOKUP_LIMIT = 100;
+
+/** 옮긴 말은 오래 들고 있는다 — 사전은 안 변한다. */
+const CACHE_TTL_MS = 12 * 60 * 60_000;
+const CACHE_MAX_ENTRIES = 2_000;
+
+type CacheEntry = { value: string[]; expiry: number };
+const cache = new Map<string, CacheEntry>();
+
+function readCache(word: string): string[] | null {
+  const hit = cache.get(word);
+  if (!hit) return null;
+  if (Date.now() >= hit.expiry) {
+    cache.delete(word);
+    return null;
+  }
+  return hit.value;
+}
+
+function writeCache(word: string, value: string[]): void {
+  if (cache.size >= CACHE_MAX_ENTRIES) {
+    const oldest = cache.keys().next();
+    if (!oldest.done) cache.delete(oldest.value);
+  }
+  cache.set(word, { value, expiry: Date.now() + CACHE_TTL_MS });
+}
+
+/** 하루가 바뀌는 자리. 서버 시각 기준이라 자정 언저리에 한 번 헐거워질 수 있다. */
+export function dayKey(now: Date = new Date()): string {
+  return now.toISOString().slice(0, 10);
+}
+
+const spent = new Map<string, { day: string; count: number }>();
+
+/**
+ * 이 사람 몫에서 한 번 빼낸다. 남아 있으면 `true`.
+ *
+ * 프로세스 메모리라 인스턴스마다 따로 센다 — 정확한 통제가 아니라 **한 사람이 제공처
+ * 몫을 통째로 태우는 것**을 막는 헐거운 울타리다. 그 이상이 필요해지면 여기만 갈아
+ * 끼우면 된다(호출부는 불리언만 본다).
+ */
+export function takeDailyBudget(userId: string, now: Date = new Date()): boolean {
+  const today = dayKey(now);
+  const seen = spent.get(userId);
+  if (!seen || seen.day !== today) {
+    spent.set(userId, { day: today, count: 1 });
+    return true;
+  }
+  if (seen.count >= DAILY_LOOKUP_LIMIT) return false;
+  seen.count += 1;
+  return true;
+}
+
+/** 테스트에서 하루치를 되돌린다. */
+export function resetKoreanDictionaryState(): void {
+  spent.clear();
+  cache.clear();
+}
+
+/**
+ * 응답에서 영어 대역어만 뽑는다.
+ *
+ * 값이 `<![CDATA[...]]>`로 싸여 오고 사이사이 탭·줄바꿈이 잔뜩 낀 XML이라 파서를
+ * 들이지 않고 필요한 태그만 훑는다. 태그 하나가 얕고 이름이 고유해서 그것으로 충분하다.
+ */
+export function parseTransWords(xml: string): string[] {
+  const out: string[] = [];
+  const pattern = /<trans_word>\s*(?:<!\[CDATA\[)?([\s\S]*?)(?:\]\]>)?\s*<\/trans_word>/g;
+  for (const match of xml.matchAll(pattern)) {
+    const word = normalizeTranslation(match[1]);
+    if (word && !out.includes(word)) out.push(word);
+  }
+  return out;
+}
+
+/**
+ * 대역어 한 줄을 견줄 수 있는 낱말로 다듬는다.
+ *
+ * 사전은 `apple`처럼 한 낱말도 주지만 `refrigerator, fridge`처럼 여럿을 한 칸에
+ * 담거나 `delivery (of goods)`처럼 괄호를 달기도 한다. 아이콘 이름과 견주려면
+ * **첫 낱말 덩어리 하나**면 된다.
+ */
+function normalizeTranslation(raw: string): string {
+  const first = raw.split(/[,;/]/)[0] ?? "";
+  return first
+    .replace(/\([^)]*\)/g, " ")
+    .replace(/[^A-Za-z\s-]/g, " ")
+    .trim()
+    .replace(/\s+/g, " ")
+    .toLowerCase();
+}
+
+/** 키가 있는가. 없으면 이 층은 통째로 꺼진다. */
+export function hasKoreanDictionaryKey(): boolean {
+  return Boolean(process.env.KOREAN_DICTIONARY_API_KEY);
+}
+
+export type LookupOptions = {
+  userId: string;
+  signal?: AbortSignal;
+  /** 테스트에서 하루 경계를 고정한다. */
+  now?: Date;
+};
+
+/**
+ * 한국어 낱말 하나를 영어로. 못 옮기면 **빈 배열**이다(던지지 않는다).
+ *
+ * 캐시가 먼저다 — 캐시에 있으면 하루 몫을 쓰지 않는다. 이미 물어봐서 없다는 것을 안
+ * 낱말도 캐시에 남으므로 같은 말을 계속 두드리지 않는다.
+ */
+export async function lookupKorean(
+  word: string,
+  { userId, signal, now }: LookupOptions,
+): Promise<string[]> {
+  const key = process.env.KOREAN_DICTIONARY_API_KEY;
+  if (!key) return [];
+
+  const term = word.trim();
+  if (!term) return [];
+
+  const cached = readCache(term);
+  if (cached) return cached;
+
+  if (!takeDailyBudget(userId, now)) return [];
+
+  const url = new URL(ENDPOINT);
+  url.searchParams.set("key", key);
+  url.searchParams.set("q", term);
+  url.searchParams.set("part", "word");
+  url.searchParams.set("sort", "popular");
+  url.searchParams.set("num", String(NUM));
+  url.searchParams.set("translated", "y");
+  // 1 = 영어.
+  url.searchParams.set("trans_lang", "1");
+
+  try {
+    const response = await fetch(url, {
+      signal,
+      headers: { "User-Agent": USER_AGENT, Accept: "application/xml" },
+    });
+    if (!response.ok) return [];
+    const words = parseTransWords(await response.text());
+    writeCache(term, words);
+    return words;
+  } catch {
+    // 시간 초과·중단·제공처 장애. 이 층 없이 계속 간다.
+    return [];
+  }
+}

package/lib/detail-page/layer-move.ts

@@ -0,0 +1,257 @@
+/**
+ * 레이어 트리에서 요소를 끌어 옮긴다 — 같은 부모 안 순서 바꾸기, 그룹 안으로 넣기,
+ * 그룹 밖으로 빼기 (Figma의 레이어 패널과 같은 조작).
+ *
+ * **왜 이렇게 도는가.** 스톡 편집기에는 요소의 부모를 바꾸는 공개 API가 없다.
+ * ``page.addElement``는 페이지에만 있고, ``setElementZIndex``는 같은 부모 안에서만
+ * 자리를 옮긴다. 부모를 바꾸는 유일한 공개 수단이 ``ungroupElements`` /
+ * ``groupElements`` 다 — 실제로 Canvas 내부도 이 둘에서만 MST ``detach``로 노드를
+ * 다른 부모에 옮겨 붙인다. 그래서 그룹을 **해체했다가 원하는 자식 목록으로 다시
+ * 묶는다**. ``groupElements(ids, attrs)``의 attrs가 기본값을 덮으므로 **그룹 id와
+ * name·custom을 그대로 넘겨** 같은 그룹으로 되살릴 수 있다(문서·계약이 그룹 id를
+ * 참조하므로 id 보존이 핵심이다). 자식 순서는 넘긴 ids 순서 그대로다.
+ *
+ * 해체·재구성한 그룹은 페이지 맨 끝(맨 앞)으로 붙으므로, 원래 있던 칸을 다시 세어
+ * 되돌린다. 삭제·이동으로 인덱스가 밀리니 "원래 내 앞에 있었고 지금도 살아있는 것"의
+ * 개수로 목표 칸을 구한다.
+ *
+ * **한계.** 페이지 직속 그룹만 다룬다. ``ungroupElements``는 자식을 ``e.page`` 로
+ * 올려버려서 중첩 그룹에 쓰면 계층이 납작해지고 엉뚱한 요소가 지워진다. 중첩 그룹이
+ * 얽힌 이동은 ``false``를 돌려주고 아무것도 건드리지 않는다.
+ */
+
+// children은 호출자마다 타입이 다르게 잡혀 있어(Canvas 모델·테스트 픽스처) unknown으로
+// 받고 ``kids()`` 한 곳에서만 배열로 좁힌다.
+export type LayerElement = {
+  id: string;
+  type?: string;
+  children?: unknown;
+  toJSON?: () => Record<string, unknown>;
+};
+
+type ParentLike = {
+  id?: string;
+  children?: unknown;
+  setElementZIndex?: (id: string, index: number) => void;
+};
+
+type StoreLike = {
+  activePage?: ParentLike;
+  selectElements?: (ids: string[]) => void;
+  groupElements?: (ids: string[], attrs?: Record<string, unknown>) => unknown;
+  ungroupElements?: (ids: string[]) => void;
+  history?: { transaction?: (fn: () => void) => unknown };
+};
+
+/** 드롭 지점: 어느 부모의(페이지는 null) 몇 번째 칸인가. index가 클수록 앞. */
+export type DropSpot = { parentId: string | null; index: number };
+
+/** 행에서 끌어놓는 위치. 목록은 앞→뒤 역순이라 before가 "더 앞". */
+export type DropZone = "before" | "after" | "inside";
+
+function kids(node: ParentLike | LayerElement | null | undefined): LayerElement[] {
+  return Array.isArray(node?.children) ? (node?.children as LayerElement[]) : [];
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+/** ``id``의 직접 부모(페이지 직속이면 null)와 그 부모 안 인덱스. 없으면 null. */
+export function locate(
+  page: ParentLike,
+  id: string,
+): { parent: LayerElement | null; index: number } | null {
+  const walk = (
+    list: LayerElement[],
+    parent: LayerElement | null,
+  ): { parent: LayerElement | null; index: number } | null => {
+    for (let i = 0; i < list.length; i += 1) {
+      if (list[i].id === id) return { parent, index: i };
+      const found = walk(kids(list[i]), list[i]);
+      if (found) return found;
+    }
+    return null;
+  };
+  return walk(kids(page), null);
+}
+
+function elementById(page: ParentLike, id: string): LayerElement | null {
+  const walk = (list: LayerElement[]): LayerElement | null => {
+    for (const el of list) {
+      if (el.id === id) return el;
+      const found = walk(kids(el));
+      if (found) return found;
+    }
+    return null;
+  };
+  return walk(kids(page));
+}
+
+function contains(root: LayerElement | null, id: string): boolean {
+  if (!root) return false;
+  return kids(root).some((child) => child.id === id || contains(child, id));
+}
+
+/**
+ * 놓은 행과 위치를 실제 드롭 지점으로 바꾼다.
+ *
+ * 목록은 앞(위)에 그려지는 것이 맨 위로 오도록 뒤집어 그리므로, 화면에서 "행 위"는
+ * 모델에서 그 행보다 **뒤 인덱스**(더 앞)다. 인덱스는 끌고 있는 요소를 뺀 목록 기준
+ * (``setElementZIndex``가 빼고 끼우는 것과 같은 계약)이다.
+ */
+export function dropSpot(
+  page: ParentLike,
+  rowId: string,
+  zone: DropZone,
+  dragId: string,
+): DropSpot | null {
+  if (!rowId || !dragId || rowId === dragId) return null;
+  const row = elementById(page, rowId);
+  if (!row) return null;
+
+  if (zone === "inside") {
+    if (row.type !== "group") return null;
+    // 그룹 안에서는 맨 앞에 얹는다(Figma와 같다).
+    return { parentId: row.id, index: kids(row).length };
+  }
+
+  const at = locate(page, rowId);
+  if (!at) return null;
+  const parent = at.parent;
+  const siblings = kids(parent ?? page)
+    .map((el) => el.id)
+    .filter((id) => id !== dragId);
+  const i = siblings.indexOf(rowId);
+  if (i < 0) return null;
+  return { parentId: parent?.id ?? null, index: zone === "before" ? i + 1 : i };
+}
+
+/** 그룹을 되살릴 때 쓸 속성. children은 빼고(재구성할 목록으로 대체) id는 지킨다. */
+function groupAttrs(group: LayerElement): Record<string, unknown> {
+  const raw =
+    typeof group.toJSON === "function"
+      ? { ...group.toJSON() }
+      : ({ ...group } as Record<string, unknown>);
+  delete raw.children;
+  raw.id = group.id;
+  return raw;
+}
+
+/**
+ * 재구성으로 페이지 끝에 붙은 요소를 원래 칸으로 되돌린다.
+ *
+ * ``beforeIds``는 손대기 전 페이지 직속 id 목록, ``originalIndex``는 그 안에서의 자리.
+ * 그 앞에 있었고 **지금도 남아 있는** 것의 수가 곧 목표 칸이다.
+ */
+function restorePageSlot(
+  page: ParentLike,
+  id: string,
+  beforeIds: string[],
+  originalIndex: number,
+): void {
+  if (!page.setElementZIndex || originalIndex < 0) return;
+  const alive = new Set(kids(page).map((el) => el.id));
+  if (!alive.has(id)) return;
+  let target = 0;
+  for (let i = 0; i < originalIndex; i += 1) {
+    if (alive.has(beforeIds[i])) target += 1;
+  }
+  page.setElementZIndex(id, target);
+}
+
+function runInTransaction(store: StoreLike, fn: () => void): void {
+  const transaction = store.history?.transaction;
+  if (typeof transaction !== "function") {
+    fn();
+    return;
+  }
+  // 해체·재구성이 여러 액션으로 나뉘어도 undo 한 번에 되돌아가게 묶는다.
+  transaction.call(store.history, fn);
+}
+
+/**
+ * ``dragId``를 ``spot``으로 옮긴다. 옮겼으면 true.
+ *
+ * 실패(중첩 그룹, 자기 자손으로 넣기, 필요한 API 없음)하면 아무것도 바꾸지 않고 false.
+ */
+export function moveLayer(store: unknown, dragId: string, spot: DropSpot): boolean {
+  const s = store as StoreLike;
+  const page = s.activePage;
+  if (!page || !dragId) return false;
+
+  const from = locate(page, dragId);
+  if (!from) return false;
+
+  const srcParentId = from.parent?.id ?? null;
+  const dstParentId = spot.parentId ?? null;
+
+  // 자기 자신 또는 자기 자손 안으로는 넣을 수 없다(트리가 끊긴다).
+  if (dstParentId === dragId) return false;
+  if (dstParentId && contains(elementById(page, dragId), dstParentId)) return false;
+
+  if (srcParentId === dstParentId) {
+    const parent = (from.parent ?? page) as ParentLike;
+    if (!parent.setElementZIndex) return false;
+    const count = kids(parent).length;
+    parent.setElementZIndex(dragId, clamp(spot.index, 0, Math.max(0, count - 1)));
+    return true;
+  }
+
+  const srcGroup = from.parent;
+  const dstGroup = dstParentId ? elementById(page, dstParentId) : null;
+  if (dstParentId && (!dstGroup || dstGroup.type !== "group")) return false;
+
+  // 페이지 직속 그룹만 해체·재구성할 수 있다(위 주석의 한계).
+  const pageIds = kids(page).map((el) => el.id);
+  if (srcGroup && !pageIds.includes(srcGroup.id)) return false;
+  if (dstGroup && !pageIds.includes(dstGroup.id)) return false;
+  if (typeof s.ungroupElements !== "function" || typeof s.groupElements !== "function") {
+    return false;
+  }
+
+  const srcIndex = srcGroup ? pageIds.indexOf(srcGroup.id) : -1;
+  const dstIndex = dstGroup ? pageIds.indexOf(dstGroup.id) : -1;
+  const srcAttrs = srcGroup ? groupAttrs(srcGroup) : null;
+  const dstAttrs = dstGroup ? groupAttrs(dstGroup) : null;
+  const srcRemaining = srcGroup
+    ? kids(srcGroup)
+        .map((el) => el.id)
+        .filter((id) => id !== dragId)
+    : [];
+  const dstNext = dstGroup ? kids(dstGroup).map((el) => el.id) : [];
+  if (dstGroup) dstNext.splice(clamp(spot.index, 0, dstNext.length), 0, dragId);
+
+  runInTransaction(s, () => {
+    if (srcGroup) {
+      s.ungroupElements?.([srcGroup.id]);
+      // 자식이 하나도 안 남으면 빈 그룹을 되살리지 않는다(Figma와 같다).
+      if (srcRemaining.length > 0) s.groupElements?.(srcRemaining, srcAttrs ?? {});
+    }
+    if (dstGroup) {
+      s.ungroupElements?.([dstGroup.id]);
+      s.groupElements?.(dstNext, dstAttrs ?? {});
+    }
+
+    // 되살린 그룹들을 원래 칸으로. 원래 인덱스가 작은 것부터 처리해야 자리가 안 밀린다.
+    const restore: Array<{ id: string; index: number }> = [];
+    if (srcGroup && srcRemaining.length > 0) {
+      restore.push({ id: srcGroup.id, index: srcIndex });
+    }
+    if (dstGroup) restore.push({ id: dstGroup.id, index: dstIndex });
+    restore
+      .sort((a, b) => a.index - b.index)
+      .forEach((item) => restorePageSlot(page, item.id, pageIds, item.index));
+
+    // 그룹 밖으로 나온 경우엔 페이지에서의 칸도 정해준다.
+    if (!dstGroup && page.setElementZIndex) {
+      const count = kids(page).length;
+      page.setElementZIndex(dragId, clamp(spot.index, 0, Math.max(0, count - 1)));
+    }
+
+    // group/ungroup이 선택을 바꿔놓으므로 끌던 요소로 되돌린다.
+    s.selectElements?.([dragId]);
+  });
+
+  return true;
+}

package/lib/detail-page/new-product-draft-store.ts

@@ -0,0 +1,105 @@
+/**
+ * 새 상품 초안의 **무거운 몫**을 담아 두는 IndexedDB 한 칸.
+ *
+ * `sessionStorage` 는 보통 5MB 에서 막힌다. 레퍼런스 한 장이 4MB 까지 허용되므로
+ * (`MAX_REFERENCE_UPLOAD_BYTES`) 여섯 장이면 그 한도를 우습게 넘고, 넘기면 쓰기가
+ * **통째로** 실패해서 글자까지 같이 잃는다. IndexedDB 에는 그 한도가 없다.
+ *
+ * 열고 읽고 쓰고 지우는 것만 여기 둔다. 무엇을 담을지는 `new-product-draft` 가
+ * 정한다 — 이 칸은 그냥 통이다. 전부 best-effort 라 실패는 `null` / no-op 으로
+ * 떨어진다. 초안은 편의지 정합성의 근거가 아니다.
+ */
+
+const DB_NAME = "leviosa-detail-page";
+const DB_VERSION = 1;
+const STORE = "new-product-draft";
+/**
+ * 칸은 하나다. 초안은 "지금 만들던 것" 하나뿐이고, 여러 개를 쌓으면 어느 것이 살아
+ * 있는지 화면이 알 수 없다. 새로 저장하면 앞의 것을 덮는다.
+ *
+ * 탭 단위가 아니라 오리진 단위라, 두 탭에서 동시에 만들면 나중 탭이 이 칸을 덮는다.
+ * 그때 앞 탭은 자기 `sessionStorage`(탭 단위) 몫으로 떨어진다 — 글자와 S3 키는 남고
+ * 그림만 잃는 예전 동작이다.
+ */
+const KEY = "current";
+
+function available(): boolean {
+  try {
+    return typeof indexedDB !== "undefined";
+  } catch {
+    // 잠긴 WebView 처럼 접근 자체가 던지는 자리가 있다.
+    return false;
+  }
+}
+
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE)) db.createObjectStore(STORE);
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+    request.onblocked = () => reject(new Error("indexedDB open blocked"));
+  });
+}
+
+/** 담긴 것을 그대로 돌려준다. 없거나 못 읽으면 `null`. */
+export async function readStoredDraft(): Promise<unknown> {
+  if (!available()) return null;
+  try {
+    const db = await openDb();
+    return await new Promise<unknown>((resolve) => {
+      const tx = db.transaction(STORE, "readonly");
+      const request = tx.objectStore(STORE).get(KEY);
+      request.onsuccess = () => resolve(request.result ?? null);
+      request.onerror = () => resolve(null);
+      tx.oncomplete = () => db.close();
+    });
+  } catch {
+    return null;
+  }
+}
+
+/** 통을 덮어쓴다. 한도를 넘겼거나 저장소가 막혔으면 조용히 지나간다. */
+export async function writeStoredDraft(value: unknown): Promise<void> {
+  if (!available()) return;
+  try {
+    const db = await openDb();
+    await new Promise<void>((resolve) => {
+      const tx = db.transaction(STORE, "readwrite");
+      tx.objectStore(STORE).put(value, KEY);
+      const finish = () => {
+        db.close();
+        resolve();
+      };
+      tx.oncomplete = finish;
+      tx.onerror = finish;
+      tx.onabort = finish;
+    });
+  } catch {
+    // best-effort — 메모리 사본으로 계속 간다.
+  }
+}
+
+/** 통을 비운다. */
+export async function deleteStoredDraft(): Promise<void> {
+  if (!available()) return;
+  try {
+    const db = await openDb();
+    await new Promise<void>((resolve) => {
+      const tx = db.transaction(STORE, "readwrite");
+      tx.objectStore(STORE).delete(KEY);
+      const finish = () => {
+        db.close();
+        resolve();
+      };
+      tx.oncomplete = finish;
+      tx.onerror = finish;
+      tx.onabort = finish;
+    });
+  } catch {
+    // 지우지 못해도 다음 저장이 덮는다.
+  }
+}