@leviosa-ai/detail-page-editor 0.1.0

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

@@ -0,0 +1,299 @@
+"use client";
+
+import { useCallback, useState, useSyncExternalStore } from "react";
+import { observer } from "./canvas-observer";
+import { useTranslation } from "react-i18next";
+import { GripVertical } from "lucide-react";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type Modifier,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+import { detailPageThumbnailBus } from "./detail-page-thumbnail-bus";
+import { FillControl } from "./fill-control";
+
+/**
+ * Custom Canvas side-panel "페이지" section (hookable-style page list).
+ *
+ * Two reasons it is custom, not stock:
+ *  1. The stock ``PagesPanel`` writes ``store.toDataURL({pageId})`` straight into
+ *     an <img src>, but this Canvas build's ``toDataURL`` is **async**, so the
+ *     stock panel shows ``src="[object Promise]"`` (blank). We await + cache it
+ *     via the workspace and read from the bus here.
+ *  2. We want hookable's horizontal rows: drag handle + thumbnail + 역할/제목,
+ *     drag-to-reorder, and click-to-scroll (the workspace scrolls to the page
+ *     when it becomes active — see StackedCanvasWorkspace).
+ *
+ * Reordering uses ``@dnd-kit`` (same as the cardnews thumbnail strip), NOT native
+ * HTML5 ``draggable``. Native DnD gives the OS "file drag" ghost + green "+"
+ * cursor and drags freely in 2D. dnd-kit keeps the drag pointer-based, locked to
+ * the vertical axis, and animates the other rows aside to show the drop target.
+ */
+
+type TextChild = { type?: string; text?: string; fontSize?: number };
+type PageLike = {
+  id: string;
+  name?: string;
+  computedWidth: number;
+  computedHeight: number;
+  children?: TextChild[];
+  /** 단색 hex 또는 `linear-gradient(...)` 문자열. `FillControl`이 둘 다 만든다. */
+  background?: string;
+  set?: (props: Record<string, unknown>) => void;
+};
+type StoreLike = {
+  pages: PageLike[];
+  activePage?: PageLike;
+  selectPage: (id: string) => void;
+  setPageZIndex: (id: string, index: number) => void;
+};
+
+type TFn = (key: string, opts?: Record<string, unknown>) => string;
+
+// Decomposer page roles → localized section labels (fallback: raw name).
+function pageLabel(
+  page: PageLike,
+  index: number,
+  t: TFn,
+): { role: string; title: string } {
+  const role = page.name
+    ? t(`detailPage.pages.roles.${page.name}`, { defaultValue: page.name })
+    : t("detailPage.pages.pageN", { number: index + 1 });
+  let title = "";
+  let maxFs = -1;
+  for (const child of page.children ?? []) {
+    if (child.type !== "text") continue;
+    const text = (child.text ?? "").trim();
+    if (!text) continue;
+    const fs = child.fontSize ?? 0;
+    if (fs > maxFs) {
+      maxFs = fs;
+      title = text;
+    }
+  }
+  title = title.replace(/\s+/g, " ").slice(0, 22);
+  return { role, title };
+}
+
+// Lock the dragged row to the vertical axis (no @dnd-kit/modifiers pkg installed).
+const restrictToVerticalAxis: Modifier = ({ transform }) => ({
+  ...transform,
+  x: 0,
+});
+
+// ── Sortable row ────────────────────────────────────────────────────────────────
+
+const PageRow = observer(function PageRow({
+  store,
+  page,
+  index,
+  thumb,
+}: {
+  store: StoreLike;
+  page: PageLike;
+  index: number;
+  thumb: string | undefined;
+}) {
+  const { t } = useTranslation("branding");
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: page.id });
+
+  const active = store.activePage?.id === page.id;
+  const ratio = page.computedHeight / Math.max(1, page.computedWidth);
+  const { role, title } = pageLabel(page, index, t);
+  const [editingBackground, setEditingBackground] = useState(false);
+  const background = page.background || "#ffffff";
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    // Lift the dragged row above its siblings while they animate aside.
+    zIndex: isDragging ? 20 : undefined,
+    position: isDragging ? "relative" : undefined,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      onClick={() => {
+        if (!isDragging) store.selectPage(page.id);
+      }}
+      className={[
+        "select-none rounded-xl border bg-white p-2 transition-shadow",
+        isDragging
+          ? "border-neutral-800 shadow-lg"
+          : active
+            ? "cursor-pointer border-neutral-800 shadow-sm"
+            : "cursor-pointer border-neutral-200 hover:border-neutral-300",
+      ].join(" ")}
+    >
+      <div className="flex items-center gap-2">
+      <span
+        {...listeners}
+        aria-label={t("detailPage.pages.reorderHandle")}
+        className={[
+          "shrink-0 touch-none rounded text-neutral-300 hover:text-neutral-500",
+          isDragging ? "cursor-grabbing" : "cursor-grab",
+        ].join(" ")}
+      >
+        <GripVertical aria-hidden="true" size={16} />
+      </span>
+      <div
+        className="relative shrink-0 overflow-hidden rounded-md border border-neutral-100 bg-neutral-50"
+        style={{ width: 64, height: Math.min(80, Math.max(40, 64 * ratio)) }}
+      >
+        {thumb ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={thumb}
+            alt={title || t("detailPage.pages.pageN", { number: index + 1 })}
+            draggable={false}
+            className="h-full w-full object-cover object-top"
+          />
+        ) : null}
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm">
+          <span className="text-neutral-400">{role}</span>
+          {title ? (
+            <>
+              <span className="mx-1 text-neutral-300">|</span>
+              <span className="font-bold text-neutral-900">{title}</span>
+            </>
+          ) : null}
+        </p>
+      </div>
+      {/*
+        페이지 배경. 우측 인스펙터에도 같은 컨트롤이 있지만 **아무것도 선택 안 됐을 때만**
+        뜬다 — 20섹션짜리 문서를 만지는 동안 선택이 비는 순간이 거의 없어서 사실상 안 보였다.
+        쓰기는 우측과 똑같이 `page.set({background})`이라 상태가 갈라지지 않는다.
+      */}
+      <button
+        type="button"
+        onClick={(event) => {
+          event.stopPropagation();
+          setEditingBackground((open) => !open);
+        }}
+        aria-label={t("detailPage.pages.background")}
+        aria-expanded={editingBackground}
+        title={t("detailPage.pages.background")}
+        className="h-6 w-6 shrink-0 rounded-md border border-neutral-200 hover:border-neutral-400"
+        style={{ background }}
+      />
+      </div>
+      {editingBackground ? (
+        <div
+          className="mt-2 border-t border-neutral-100 pt-2"
+          onClick={(event) => event.stopPropagation()}
+        >
+          <FillControl
+            value={background}
+            onChange={(next) => page.set?.({ background: next })}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+});
+PageRow.displayName = "PageRow";
+
+// ── Panel ─────────────────────────────────────────────────────────────────────
+
+export const DetailPagePagesPanel = observer(function DetailPagePagesPanel({
+  store,
+}: {
+  store: unknown;
+}) {
+  const { t } = useTranslation("branding");
+  const s = store as StoreLike;
+
+  // Thumbnails are produced by the workspace (correct Konva instance) and shared
+  // through the bus; re-render whenever a new one lands.
+  useSyncExternalStore(
+    detailPageThumbnailBus.subscribe,
+    detailPageThumbnailBus.getVersion,
+    detailPageThumbnailBus.getVersion,
+  );
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      // A small threshold so a plain click still selects (no drag starts).
+      activationConstraint: { distance: 4 },
+    }),
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const toIndex = s.pages.findIndex((p) => p.id === over.id);
+      if (toIndex === -1) return;
+      s.setPageZIndex(active.id as string, toIndex);
+    },
+    [s],
+  );
+
+  const totalHeight = Math.round(
+    s.pages.reduce((acc, p) => acc + p.computedHeight, 0),
+  );
+  const width = Math.round(s.pages[0]?.computedWidth ?? 0);
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-baseline justify-between px-4 py-3">
+        <p className="text-base font-bold text-neutral-900">
+          {t("detailPage.pages.totalPages", { count: s.pages.length })}
+        </p>
+        <p className="text-xs text-neutral-400">
+          {width} × {totalHeight} px
+        </p>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-4">
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          modifiers={[restrictToVerticalAxis]}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext
+            items={s.pages.map((p) => p.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className="space-y-2">
+              {s.pages.map((page, index) => (
+                <PageRow
+                  key={page.id}
+                  store={s}
+                  page={page}
+                  index={index}
+                  thumb={detailPageThumbnailBus.get(page.id)}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
+      </div>
+    </div>
+  );
+});
+DetailPagePagesPanel.displayName = "DetailPagePagesPanel";

package/components/detail-page/detail-page-pages-timeline.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+/**
+ * 작업 영역 아래 붙는 화면 띠 (G7-b).
+ *
+ * 스톡 ``PagesTimeline``의 자리다. 20~30 화면짜리 문서에서 "지금 몇 번째를 보고
+ * 있는가"와 "저기로 건너뛰기"만 하면 되므로, 이 띠는 그 둘만 한다.
+ *
+ * 썸네일을 **여기서 굽지 않는다.** 굽는 일은 화면 밖 페이지를 잠깐 띄우는 일이라
+ * 30장이면 편집기가 눈에 띄게 멈춘다. 이미 구워져 있으면(페이지 패널을 한 번 열면
+ * 그때 굽는다) 그 그림을 쓰고, 없으면 번호 칩으로 둔다.
+ */
+
+import { useSyncExternalStore } from "react";
+
+import { detailPageThumbnailBus } from "./detail-page-thumbnail-bus";
+import { observer } from "./canvas-observer";
+
+type PageLike = { id: string; name?: unknown };
+type StoreLike = {
+  pages: PageLike[];
+  activePage?: { id: string } | null;
+  selectPage: (id: string) => void;
+};
+
+export const DetailPagePagesTimeline = observer(function DetailPagePagesTimeline({
+  store,
+}: {
+  store: unknown;
+}) {
+  const s = store as StoreLike;
+  useSyncExternalStore(
+    detailPageThumbnailBus.subscribe,
+    detailPageThumbnailBus.getVersion,
+    () => 0,
+  );
+  const activeId = s.activePage?.id;
+
+  if (s.pages.length < 2) return null;
+
+  return (
+    <div
+      data-dp-pages-timeline=""
+      className="pointer-events-auto absolute inset-x-0 bottom-0 z-20 flex items-center gap-1.5 overflow-x-auto border-t border-neutral-200 bg-white/95 px-3 py-1.5 backdrop-blur-sm"
+    >
+      {s.pages.map((page, index) => {
+        const active = page.id === activeId;
+        const thumb = detailPageThumbnailBus.get(page.id);
+        return (
+          <button
+            key={page.id}
+            type="button"
+            onClick={() => s.selectPage(page.id)}
+            aria-current={active ? "true" : undefined}
+            title={typeof page.name === "string" ? page.name : `${index + 1}`}
+            className={[
+              "flex h-10 w-8 shrink-0 items-center justify-center overflow-hidden rounded border text-[11px] font-semibold transition-colors",
+              active
+                ? "border-neutral-900 bg-neutral-900 text-white"
+                : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-400",
+            ].join(" ")}
+          >
+            {thumb ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={thumb}
+                alt={`${index + 1}`}
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              index + 1
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+});
+DetailPagePagesTimeline.displayName = "DetailPagePagesTimeline";

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

@@ -0,0 +1,257 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { ImageOff, Loader2, Upload } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { PanelSearchInput } from "./panel-search-input";
+import { isAnimatedFile } from "../../lib/detail-page/animation-sniff";
+import { insertPersonalImage } from "../../lib/detail-page/insert-image";
+import { useDetailPageHost } from "./detail-page-host-context";
+import {
+  mirrorStockPhoto,
+  searchStockPhotos,
+  type StockPhoto,
+} from "../../lib/detail-page/stock-photos";
+
+/**
+ * "사진" 패널 — 올리기 + 무료 스톡 사진 검색(Pexels).
+ *
+ * 고른 사진은 우리 S3로 옮겨 담은 뒤 얹는다(`mirrorStockPhoto`). 남의 주소를 문서에
+ * 박으면 저장된 상세페이지가 그 서버 수명에 묶인다.
+ *
+ * 하단의 "Pexels 제공" 링크와 사진별 작가 표기는 장식이 아니라 **제공처가 요구하는
+ * 출처 표기**다 — 지우면 이용 조건을 어긴다.
+ */
+
+const PER_PAGE = 24;
+const DEBOUNCE_MS = 400;
+
+export function DetailPagePhotosPanel({
+  store,
+  uploadFile,
+}: {
+  store: unknown;
+  /** 파일 → 접근 가능한 URL. 편집기가 자기 업로더를 그대로 넘긴다. */
+  uploadFile?: (file: File) => Promise<string>;
+}) {
+  const { t } = useTranslation("branding");
+  const { queryKeys } = useDetailPageHost();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // 이번 편집 동안 올린 것들. 새로고침하면 사라진다 — 오래 두는 자리는 "브랜드 이미지"다.
+  const [recent, setRecent] = useState<string[]>([]);
+  const [query, setQuery] = useState("");
+  const [debounced, setDebounced] = useState("");
+  /** 지금 옮겨 담는 중인 사진. 타일 하나에만 스피너를 씌운다. */
+  const [inserting, setInserting] = useState<string | null>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(query.trim()), DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  const stock = useInfiniteQuery({
+    queryKey: queryKeys.branding.detailPageStockPhotos(debounced),
+    queryFn: ({ pageParam, signal }) =>
+      searchStockPhotos({
+        query: debounced,
+        page: pageParam,
+        perPage: PER_PAGE,
+        signal,
+      }),
+    initialPageParam: 1,
+    getNextPageParam: (last, all) => (last.hasMore ? all.length + 1 : undefined),
+    staleTime: 10 * 60_000,
+    retry: false,
+  });
+
+  const pages = stock.data?.pages ?? [];
+  const photos = pages.flatMap((page) => page.photos);
+  const configured = pages[0]?.configured ?? true;
+
+  const take = useCallback(
+    async (files: FileList | null) => {
+      if (!files?.length || !uploadFile) return;
+      setBusy(true);
+      setError(null);
+      try {
+        for (const file of Array.from(files)) {
+          const url = await uploadFile(file);
+          setRecent((prev) => [url, ...prev]);
+          // 확장자·MIME 으로는 가를 수 없다 — 움직이는 WebP 와 정지 WebP 가 둘 다
+          // image/webp 라서, 바이트를 봐야 애니메이션 태그가 정확히 붙는다.
+          insertPersonalImage(store, url, { isGif: await isAnimatedFile(file) });
+        }
+      } catch {
+        setError(t("detailPage.photos.uploadFailed"));
+      } finally {
+        setBusy(false);
+      }
+    },
+    [store, t, uploadFile],
+  );
+
+  const insertStock = useCallback(
+    async (photo: StockPhoto) => {
+      setInserting(photo.id);
+      setError(null);
+      try {
+        const src = await mirrorStockPhoto(photo, uploadFile);
+        insertPersonalImage(store, src);
+      } catch {
+        setError(t("detailPage.photos.stockInsertFailed"));
+      } finally {
+        setInserting(null);
+      }
+    },
+    [store, t, uploadFile],
+  );
+
+  return (
+    <div className="flex h-full flex-col gap-3 overflow-y-auto p-3">
+      <button
+        type="button"
+        disabled={!uploadFile || busy}
+        onClick={() => inputRef.current?.click()}
+        className="flex items-center justify-center gap-2 rounded-lg border border-dashed border-neutral-300 px-3 py-4 text-sm font-medium text-neutral-600 hover:border-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {busy ? (
+          <Loader2 aria-hidden="true" className="animate-spin" size={16} />
+        ) : (
+          <Upload aria-hidden="true" size={16} />
+        )}
+        {t("detailPage.photos.upload")}
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        multiple
+        hidden
+        onChange={(event) => {
+          void take(event.target.files);
+          event.target.value = "";
+        }}
+      />
+
+      {error ? <p className="text-xs text-red-600">{error}</p> : null}
+
+      {recent.length ? (
+        <div className="grid grid-cols-3 gap-2">
+          {recent.map((url) => (
+            <button
+              key={url}
+              type="button"
+              onClick={() => insertPersonalImage(store, url)}
+              className="aspect-square overflow-hidden rounded-lg border border-neutral-200 hover:border-neutral-400"
+              title={t("detailPage.shapes.insertHint")}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={url} alt="" className="h-full w-full object-cover" />
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      <PanelSearchInput
+        value={query}
+        onChange={setQuery}
+        placeholder={t("detailPage.photos.searchPlaceholder")}
+        label={t("detailPage.photos.searchLabel")}
+      />
+
+      {!configured ? (
+        <p className="px-1 text-xs leading-relaxed text-neutral-500">
+          {t("detailPage.photos.stockUnavailable")}
+        </p>
+      ) : stock.isLoading ? (
+        <div className="flex justify-center py-6 text-neutral-400">
+          <Loader2 aria-hidden="true" className="animate-spin" size={20} />
+        </div>
+      ) : stock.error ? (
+        <p className="text-xs text-red-600">
+          {t("detailPage.photos.stockFailed")}
+        </p>
+      ) : photos.length === 0 ? (
+        <div className="flex flex-col items-center gap-2 py-6 text-center text-neutral-400">
+          <ImageOff aria-hidden="true" size={20} />
+          <p className="text-xs">{t("detailPage.photos.stockEmpty")}</p>
+        </div>
+      ) : (
+        <>
+          <div className="grid grid-cols-2 gap-2">
+            {photos.map((photo) => (
+              <div
+                key={photo.id}
+                className="group relative overflow-hidden rounded-lg border border-neutral-200 hover:border-neutral-400"
+              >
+                <button
+                  type="button"
+                  disabled={inserting !== null}
+                  onClick={() => void insertStock(photo)}
+                  className="block w-full disabled:cursor-wait"
+                  title={t("detailPage.photos.stockInsertHint")}
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={photo.thumb}
+                    alt={photo.alt}
+                    loading="lazy"
+                    className="h-24 w-full object-cover transition group-hover:opacity-90"
+                  />
+                  {inserting === photo.id ? (
+                    <span className="absolute inset-0 flex items-center justify-center bg-white/70">
+                      <Loader2
+                        aria-hidden="true"
+                        className="animate-spin text-neutral-500"
+                        size={18}
+                      />
+                    </span>
+                  ) : null}
+                </button>
+                {/* 작가 표기 — 제공처 이용 조건이 요구한다. */}
+                <a
+                  href={photo.pageUrl}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  className="absolute bottom-0 left-0 right-0 hidden truncate bg-black/60 px-1.5 py-1 text-[10px] text-white group-hover:block hover:underline"
+                >
+                  {photo.photographer}
+                </a>
+              </div>
+            ))}
+          </div>
+
+          {stock.hasNextPage ? (
+            <button
+              type="button"
+              disabled={stock.isFetchingNextPage}
+              onClick={() => void stock.fetchNextPage()}
+              className="mx-auto flex items-center gap-1.5 rounded-md border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-600 hover:border-neutral-400 disabled:opacity-50"
+            >
+              {stock.isFetchingNextPage ? (
+                <Loader2 aria-hidden="true" className="animate-spin" size={12} />
+              ) : null}
+              {t("detailPage.photos.stockMore")}
+            </button>
+          ) : null}
+        </>
+      )}
+
+      <p className="mt-auto px-1 pt-1 text-xs leading-relaxed text-neutral-500">
+        {t("detailPage.photos.hint")}{" "}
+        <a
+          href="https://www.pexels.com"
+          target="_blank"
+          rel="noreferrer noopener"
+          className="underline underline-offset-2"
+        >
+          {t("detailPage.photos.stockCredit")}
+        </a>
+      </p>
+    </div>
+  );
+}