@leviosa-ai/detail-page-editor 0.1.0

package/components/detail-page/detail-page-my-images-panel.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { useRef, useState, type ChangeEvent } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ExternalLink, ImageOff, Loader2, Trash2, Upload } from "lucide-react";
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+
+import { BrandPanelHeader } from "./detail-page-brand-panel-header";
+import { useDetailPageHost } from "./detail-page-host-context";
+import type {
+  BrandAsset,
+  BrandAssetKind,
+} from "./detail-page-host-context";
+import { insertPersonalImage } from "../../lib/detail-page/insert-image";
+
+const UPLOAD_ACCEPT = "image/png,image/jpeg,image/webp,image/svg+xml";
+const MAX_UPLOAD_BYTES = 20 * 1024 * 1024;
+
+function isImageAsset(asset: BrandAsset): boolean {
+  return ["logo", "product_image", "model_image", "image", "svg"].includes(
+    asset.asset_type,
+  );
+}
+
+function uploadKind(file: File): BrandAssetKind {
+  if (file.type === "image/svg+xml") return "svg";
+  return "image";
+}
+
+export function DetailPageMyImagesPanel({ store }: { store: unknown }) {
+  const { brand, queryKeys, toast } = useDetailPageHost();
+  const { t } = useTranslation("branding");
+  const queryClient = useQueryClient();
+  const {
+    activeBrand,
+    activeBrandId,
+    isLoading: brandsLoading,
+  } = brand.useBrandWorkspace();
+  const [error, setError] = useState<string | null>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
+  // GIF는 '브랜드 GIF' 패널이 맡는다 — 사진과 한 그리드에 섞이면 고르기 어렵다.
+  const assetsQuery = useQuery({
+    queryKey: queryKeys.branding.brandAssets(activeBrandId, "image"),
+    queryFn: ({ signal }) => brand.listBrandAssets(activeBrandId!, signal, "image"),
+    enabled: Boolean(activeBrandId),
+    staleTime: 4 * 60_000,
+  });
+  const items = (assetsQuery.data ?? []).filter(isImageAsset);
+
+  const uploadMutation = useMutation({
+    mutationFn: async (file: File) => {
+      if (!activeBrandId) throw new Error("brand-not-selected");
+      return brand.uploadBrandAsset(activeBrandId, file, uploadKind(file), {
+        metadata: { source: "canvas_upload" },
+      });
+    },
+    onSuccess: async () => {
+      setError(null);
+      await queryClient.invalidateQueries({
+        queryKey: queryKeys.branding.brandAssets(activeBrandId),
+      });
+    },
+    onError: () => setError(t("detailPage.brandAssets.uploadFailed")),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (asset: BrandAsset) => brand.deleteBrandAsset(asset),
+    onSuccess: async () => {
+      setError(null);
+      await queryClient.invalidateQueries({
+        queryKey: queryKeys.branding.brandAssets(activeBrandId),
+      });
+    },
+    onError: () => toast.error(t("detailPage.brandAssets.deleteFailed")),
+  });
+
+  const handleUpload = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (file.size > MAX_UPLOAD_BYTES) {
+      setError(t("detailPage.brandAssets.uploadTooLarge"));
+      return;
+    }
+    uploadMutation.mutate(file);
+  };
+
+  return (
+    <div className="flex h-full flex-col p-4">
+      <BrandPanelHeader onRefresh={() => void assetsQuery.refetch()} />
+
+      <label className="mb-3 flex h-16 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-dashed border-neutral-300 text-neutral-400 hover:border-neutral-400 hover:text-neutral-600">
+        {uploadMutation.isPending ? (
+          <Loader2 aria-hidden="true" className="animate-spin" size={18} />
+        ) : (
+          <Upload aria-hidden="true" size={18} />
+        )}
+        <span className="text-[11px]">
+          {t("detailPage.brandAssets.uploadImage")}
+        </span>
+        <input
+          ref={fileRef}
+          type="file"
+          accept={UPLOAD_ACCEPT}
+          className="hidden"
+          onChange={handleUpload}
+        />
+      </label>
+
+      {brandsLoading || assetsQuery.isLoading ? (
+        <div className="flex flex-1 items-center justify-center text-neutral-400">
+          <Loader2 aria-hidden="true" className="animate-spin" size={22} />
+        </div>
+      ) : error || assetsQuery.error ? (
+        <p className="text-xs font-medium text-red-600">
+          {error ?? t("detailPage.brandAssets.loadFailed")}
+        </p>
+      ) : !activeBrand ? (
+        <p className="text-xs text-neutral-400">
+          {t("detailPage.brandAssets.noBrand")}
+        </p>
+      ) : items.length === 0 ? (
+        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-neutral-400">
+          <ImageOff aria-hidden="true" size={22} />
+          <p className="text-xs">{t("detailPage.brandAssets.imagesEmpty")}</p>
+          <Link
+            href="/branding/moodboard"
+            className="inline-flex items-center gap-1 text-[11px] font-medium text-neutral-600 underline underline-offset-2"
+          >
+            {t("detailPage.brandAssets.openMoodboard")}
+            <ExternalLink size={11} />
+          </Link>
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 gap-2 overflow-y-auto">
+          {items.map((asset) => (
+            <div
+              key={asset.id}
+              className="group relative overflow-hidden rounded-md border border-neutral-200 hover:border-neutral-500"
+            >
+              <button
+                type="button"
+                disabled={!asset.download_url}
+                onClick={() =>
+                  // presigned URL(download_url)은 15분이면 죽는다. 문서에 남는 주소는
+                  // 만료 없는 경로여야 다시 열 때 403이 안 난다.
+                  asset.download_url &&
+                  insertPersonalImage(store, brand.brandAssetDocumentSrc(asset))
+                }
+                className="block w-full disabled:opacity-50"
+                title={t("detailPage.brandAssets.insertHint")}
+              >
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={asset.download_url ?? ""}
+                  crossOrigin="anonymous"
+                  alt={asset.display_name ?? asset.filename}
+                  className="h-24 w-full object-cover transition group-hover:opacity-90"
+                />
+              </button>
+              <span className="pointer-events-none absolute bottom-1.5 left-1.5 max-w-[calc(100%-12px)] truncate rounded-sm bg-black/70 px-1.5 py-0.5 text-[10px] text-white">
+                {asset.display_name ?? asset.filename}
+              </span>
+              <button
+                type="button"
+                onClick={() => deleteMutation.mutate(asset)}
+                className="absolute right-1 top-1 hidden h-6 w-6 items-center justify-center rounded-md bg-white/95 text-neutral-400 shadow-sm hover:text-red-600 group-hover:flex"
+                aria-label={t("detailPage.brandAssets.delete")}
+              >
+                <Trash2 aria-hidden="true" size={13} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/detail-page/detail-page-my-shapes-panel.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Loader2, Shapes, Trash2, Upload } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { BrandPanelHeader } from "./detail-page-brand-panel-header";
+import { useDetailPageHost } from "./detail-page-host-context";
+import type { BrandAsset } from "./detail-page-host-context";
+import { insertShape } from "../../lib/detail-page/insert-shape";
+
+const MAX_UPLOAD_BYTES = 500_000;
+
+function isShape(asset: BrandAsset): boolean {
+  return asset.asset_type === "shape" || asset.asset_type === "svg";
+}
+
+export function DetailPageMyShapesPanel({ store }: { store: unknown }) {
+  const { brand, queryKeys, toast } = useDetailPageHost();
+  const { t } = useTranslation("branding");
+  const queryClient = useQueryClient();
+  const {
+    activeBrand,
+    activeBrandId,
+    isLoading: brandsLoading,
+  } = brand.useBrandWorkspace();
+  const [insertingId, setInsertingId] = useState<string | null>(null);
+  const assetsQuery = useQuery({
+    queryKey: queryKeys.branding.brandAssets(activeBrandId),
+    queryFn: ({ signal }) => brand.listBrandAssets(activeBrandId!, signal),
+    enabled: Boolean(activeBrandId),
+    staleTime: 4 * 60_000,
+  });
+  const items = (assetsQuery.data ?? []).filter(isShape);
+
+  const invalidate = () =>
+    queryClient.invalidateQueries({
+      queryKey: queryKeys.branding.brandAssets(activeBrandId),
+    });
+
+  const uploadMutation = useMutation({
+    mutationFn: async (file: File) => {
+      if (!activeBrandId) throw new Error("brand-not-selected");
+      return brand.uploadBrandAsset(activeBrandId, file, "shape", {
+        metadata: { source: "canvas_upload" },
+      });
+    },
+    onSuccess: async () => {
+      await invalidate();
+      toast.success(t("detailPage.brandAssets.shapeUploaded"));
+    },
+    onError: () => toast.error(t("detailPage.brandAssets.uploadFailed")),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (asset: BrandAsset) => brand.deleteBrandAsset(asset),
+    onSuccess: invalidate,
+    onError: () => toast.error(t("detailPage.brandAssets.deleteFailed")),
+  });
+
+  const insert = async (asset: BrandAsset) => {
+    if (!asset.download_url) return;
+    setInsertingId(asset.id);
+    try {
+      const response = await fetch(asset.download_url);
+      if (!response.ok) throw new Error("download failed");
+      const svg = await response.text();
+      insertShape(
+        store,
+        svg,
+        typeof asset.metadata.view_box === "string"
+          ? asset.metadata.view_box
+          : undefined,
+      );
+    } catch {
+      toast.error(t("detailPage.brandAssets.shapeLoadFailed"));
+    } finally {
+      setInsertingId(null);
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col p-4">
+      <BrandPanelHeader onRefresh={() => void assetsQuery.refetch()} />
+
+      <label className="mb-3 flex h-16 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-dashed border-neutral-300 text-neutral-400 hover:border-neutral-400 hover:text-neutral-600">
+        {uploadMutation.isPending ? (
+          <Loader2 aria-hidden="true" className="animate-spin" size={18} />
+        ) : (
+          <Upload aria-hidden="true" size={18} />
+        )}
+        <span className="text-[11px]">
+          {t("detailPage.brandAssets.uploadShape")}
+        </span>
+        <input
+          type="file"
+          accept=".svg,image/svg+xml"
+          className="hidden"
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            event.target.value = "";
+            if (!file) return;
+            if (
+              file.size > MAX_UPLOAD_BYTES ||
+              (!file.name.toLowerCase().endsWith(".svg") &&
+                file.type !== "image/svg+xml")
+            ) {
+              toast.error(t("detailPage.brandAssets.invalidShape"));
+              return;
+            }
+            uploadMutation.mutate(file);
+          }}
+        />
+      </label>
+
+      {brandsLoading || assetsQuery.isLoading ? (
+        <div className="flex flex-1 items-center justify-center text-neutral-400">
+          <Loader2 aria-hidden="true" className="animate-spin" size={22} />
+        </div>
+      ) : assetsQuery.error ? (
+        <p className="text-xs font-medium text-red-600">
+          {t("detailPage.brandAssets.loadFailed")}
+        </p>
+      ) : !activeBrand ? (
+        <p className="text-xs text-neutral-400">
+          {t("detailPage.brandAssets.noBrand")}
+        </p>
+      ) : items.length === 0 ? (
+        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-neutral-400">
+          <Shapes aria-hidden="true" size={22} />
+          <p className="text-xs">{t("detailPage.brandAssets.shapesEmpty")}</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-3 gap-2 overflow-y-auto">
+          {items.map((asset) => (
+            <div
+              key={asset.id}
+              className="group relative aspect-square rounded-md border border-neutral-200 hover:border-neutral-500"
+            >
+              <button
+                type="button"
+                onClick={() => void insert(asset)}
+                disabled={!asset.download_url || insertingId === asset.id}
+                className="flex h-full w-full items-center justify-center p-2 disabled:opacity-50"
+                title={t("detailPage.brandAssets.insertHint")}
+              >
+                {insertingId === asset.id ? (
+                  <Loader2 className="animate-spin text-neutral-400" size={18} />
+                ) : (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={asset.download_url ?? ""}
+                    crossOrigin="anonymous"
+                    alt={asset.display_name ?? asset.filename}
+                    className="max-h-full max-w-full object-contain"
+                  />
+                )}
+              </button>
+              <button
+                type="button"
+                onClick={() => deleteMutation.mutate(asset)}
+                className="absolute right-1 top-1 hidden h-6 w-6 items-center justify-center rounded-md bg-white/95 text-neutral-400 shadow-sm hover:text-red-600 group-hover:flex"
+                aria-label={t("detailPage.brandAssets.delete")}
+              >
+                <Trash2 aria-hidden="true" size={13} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,171 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { observer } from "./canvas-observer";
+import { useTranslation } from "react-i18next";
+import {
+  Sparkles,
+  ChevronUp,
+  ChevronDown,
+  Copy,
+  Plus,
+  Trash2,
+  Wand2,
+} from "lucide-react";
+
+import {
+  isSectionReauthorWired,
+  requestSectionReauthor,
+  subscribeSectionReauthorAvailability,
+} from "../../lib/detail-page/section-reauthor-bus";
+
+/**
+ * hookable-style per-section (per-page) floating quick toolbar.
+ *
+ * Renders a vertical pill next to the active page with: AI, move up, move down,
+ * duplicate, add, delete. The actions mirror the stock editor's stock ``<PageControls>``
+ * (`page.setZIndex` / `page.clone` / `store.addPage` / `store.deletePages`) so
+ * behaviour matches the SDK exactly — we just restyle it as a vertical rail and
+ * disable the stock controls in the workspace.
+ */
+
+type PageLike = {
+  id: string;
+  bleed?: number;
+  width?: number | string;
+  height?: number | string;
+  setZIndex: (index: number) => void;
+  clone: () => void;
+};
+type StoreLike = {
+  pages: PageLike[];
+  activePage?: { id: string; bleed?: number; width?: number | string; height?: number | string };
+  addPage: (props: Record<string, unknown>) => PageLike;
+  deletePages: (ids: string[]) => void;
+  openSidePanel?: (name: string) => void;
+};
+
+function IconButton({
+  label,
+  onClick,
+  disabled,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      disabled={disabled}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      className={[
+        "flex h-8 w-8 items-center justify-center rounded-lg transition-colors",
+        disabled
+          ? "cursor-not-allowed text-neutral-300"
+          : "text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900",
+      ].join(" ")}
+    >
+      {children}
+    </button>
+  );
+}
+
+export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
+  store,
+  page,
+}: {
+  store: unknown;
+  page: unknown;
+}) {
+  const { t } = useTranslation("branding");
+  // 툴바가 편집기보다 먼저 그려질 수 있어 구독으로 읽는다(한 번 읽으면 계속 숨는다).
+  const reauthorWired = useSyncExternalStore(
+    subscribeSectionReauthorAvailability,
+    isSectionReauthorWired,
+    () => false,
+  );
+  const s = store as StoreLike;
+  const p = page as PageLike;
+  const index = s.pages.findIndex((pg) => pg.id === p.id);
+  const isFirst = index <= 0;
+  const isLast = index === s.pages.length - 1;
+  const canDelete = s.pages.length > 1;
+
+  const addAfter = () => {
+    const ref = s.activePage ?? s.pages[index];
+    const next = s.addPage({
+      bleed: ref?.bleed ?? 0,
+      width: ref?.width ?? "auto",
+      height: ref?.height ?? "auto",
+    });
+    next.setZIndex(index + 1);
+  };
+
+  return (
+    <div className="flex flex-col items-center gap-0.5 rounded-2xl border border-neutral-200 bg-white/95 px-1 py-1.5 shadow-md backdrop-blur-sm">
+      <button
+        type="button"
+        title={t("detailPage.pageToolbar.aiGenerate")}
+        aria-label={t("detailPage.pageToolbar.aiGenerate")}
+        onClick={(e) => {
+          e.stopPropagation();
+          s.openSidePanel?.("ai-generate");
+        }}
+        className="flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-neutral-100"
+      >
+        <Sparkles size={17} className="text-fuchsia-500" />
+      </button>
+
+      {/* 이 화면만 마크업째 다시 만든다 — 슬롯 카피 편집과 달리 칸 수·표 같은 구조가
+          바뀔 수 있다. 요청만 띄우고 실제 일(모달·API·페이지 교체)은 편집기가 한다. */}
+      {reauthorWired ? (
+        <button
+          type="button"
+          title={t("detailPage.pageToolbar.reauthor", {
+            defaultValue: "이 화면 다시 만들기",
+          })}
+          aria-label={t("detailPage.pageToolbar.reauthor", {
+            defaultValue: "이 화면 다시 만들기",
+          })}
+          onClick={(e) => {
+            e.stopPropagation();
+            requestSectionReauthor(p.id);
+          }}
+          className="flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-neutral-100"
+        >
+          <Wand2 size={16} className="text-violet-500" />
+        </button>
+      ) : null}
+
+      <hr className="my-0.5 w-5 border-neutral-200" />
+
+      <IconButton label={t("detailPage.pageToolbar.moveUp")} onClick={() => p.setZIndex(index - 1)} disabled={isFirst}>
+        <ChevronUp size={17} />
+      </IconButton>
+      <IconButton label={t("detailPage.pageToolbar.moveDown")} onClick={() => p.setZIndex(index + 1)} disabled={isLast}>
+        <ChevronDown size={17} />
+      </IconButton>
+      <IconButton label={t("detailPage.pageToolbar.duplicate")} onClick={() => p.clone()}>
+        <Copy size={16} />
+      </IconButton>
+      <IconButton label={t("detailPage.pageToolbar.addBelow")} onClick={addAfter}>
+        <Plus size={17} />
+      </IconButton>
+
+      <hr className="my-0.5 w-5 border-neutral-200" />
+
+      <IconButton label={t("detailPage.pageToolbar.delete")} onClick={() => s.deletePages([p.id])} disabled={!canDelete}>
+        <Trash2 size={16} />
+      </IconButton>
+    </div>
+  );
+});
+DetailPagePageToolbar.displayName = "DetailPagePageToolbar";