@leviosa-ai/detail-page-editor 0.1.0

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

@@ -0,0 +1,117 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BarChart3, QrCode, Shapes, Smile, Sparkles, Table, type LucideIcon } from "lucide-react";
+
+import { DetailPageShapesPanel } from "./detail-page-shapes-panel";
+import { DetailPageDecorationsPanel } from "./detail-page-decorations-panel";
+import { DetailPageChartsPanel } from "./detail-page-charts-panel";
+import { DetailPageTablesPanel } from "./detail-page-tables-panel";
+import { DetailPageIconsPanel } from "./detail-page-icons-panel";
+import { DetailPageQrPanel } from "./detail-page-qr-panel";
+import { ElementRecentsStrip } from "./element-recents-strip";
+
+/**
+ * "요소" 패널 — 도형·아이콘·QR·장식·차트·표를 한 탭 안에 접어 넣고, 위쪽 그룹 바에서 가른다.
+ *
+ * 레일이 14탭까지 늘어나 포화였다. 넣을 것이 아이콘·프레임까지 더 붙으면 레일 자체가
+ * 스크롤되어 "어디에 뭐가 있는지"가 무너진다. 그래서 **삽입 대상이 같은 성격인 것**
+ * (클릭 한 번으로 캔버스에 놓이는 벡터/데이터 요소)을 한 서랍으로 모은다. 사진·텍스트는
+ * 성격이 달라 그대로 둔다 — 사진은 검색·업로드가 붙고 텍스트는 스타일 프리셋이다.
+ *
+ * 맨 위의 "즐겨찾기 · 최근" 스트립은 그룹과 무관하게 항상 같은 자리에 있다 — 상세페이지는
+ * 같은 배지·아이콘을 20섹션 내내 반복해서 넣으므로 **검색의 절반은 다시 안 찾는 것**이다.
+ * 탭이 아니라 스트립인 이유는 레일 상한(12)이다.
+ */
+
+export type ElementsGroupId =
+  | "shapes"
+  | "icons"
+  | "qr"
+  | "decorations"
+  | "charts"
+  | "tables";
+
+/**
+ * 그룹 바는 3열 두 줄이다. 순서가 곧 자리라서 **도형 바로 아래 칸이 장식**이 된다 —
+ * 둘은 같은 열에 세로로 붙어 있어야 "도형에서 갈라져 나온 것"으로 읽힌다.
+ */
+const GROUPS: ReadonlyArray<{
+  id: ElementsGroupId;
+  labelKey: string;
+  Icon: LucideIcon;
+}> = [
+  { id: "shapes", labelKey: "detailPage.sidebar.shapes", Icon: Shapes },
+  { id: "icons", labelKey: "detailPage.sidebar.icons", Icon: Smile },
+  { id: "qr", labelKey: "detailPage.sidebar.qr", Icon: QrCode },
+  { id: "decorations", labelKey: "detailPage.sidebar.decorations", Icon: Sparkles },
+  { id: "charts", labelKey: "detailPage.sidebar.charts", Icon: BarChart3 },
+  { id: "tables", labelKey: "detailPage.sidebar.tables", Icon: Table },
+];
+
+/**
+ * 마지막으로 본 그룹. 모듈 전역인 이유는 껍데기가 **열린 패널 하나만 렌더**하기
+ * 때문이다 — 다른 탭에 갔다 오면 이 컴포넌트는 언마운트됐다가 새로 뜬다. 탭이 셋으로
+ * 갈려 있을 때는 레일이 이 기억을 대신했으니, 접은 뒤에도 그 감각은 남겨 둔다.
+ * 세션 안에서만 살면 충분해서 저장소까지 가지 않는다.
+ */
+let lastGroup: ElementsGroupId = "shapes";
+
+export function DetailPageElementsPanel({
+  store,
+  defaultGroup,
+}: {
+  store: unknown;
+  /** 처음 열 그룹. 안 주면 이 세션에서 마지막으로 봤던 그룹으로 돌아간다. */
+  defaultGroup?: ElementsGroupId;
+}) {
+  const { t } = useTranslation("branding");
+  const [group, setGroup] = useState<ElementsGroupId>(defaultGroup ?? lastGroup);
+
+  const select = useCallback((next: ElementsGroupId) => {
+    lastGroup = next;
+    setGroup(next);
+  }, []);
+
+  return (
+    <div className="flex h-full flex-col">
+      <ElementRecentsStrip store={store} />
+      <div
+        role="tablist"
+        aria-label={t("detailPage.sidebar.elements")}
+        className="grid shrink-0 grid-cols-3 gap-0.5 border-b border-neutral-200 p-2"
+      >
+        {GROUPS.map(({ id, labelKey, Icon }) => {
+          const active = id === group;
+          return (
+            <button
+              key={id}
+              type="button"
+              role="tab"
+              aria-selected={active}
+              onClick={() => select(id)}
+              className={`flex flex-col items-center justify-center gap-0.5 rounded-md px-1 py-1.5 text-[11px] font-medium transition-colors ${
+                active
+                  ? "bg-blue-50 text-blue-700"
+                  : "text-neutral-500 hover:bg-neutral-100"
+              }`}
+            >
+              <Icon aria-hidden="true" size={14} />
+              {t(labelKey)}
+            </button>
+          );
+        })}
+      </div>
+      {/* 그룹 패널은 저마다 h-full 스크롤러라 남은 높이를 통째로 넘긴다. */}
+      <div className="min-h-0 flex-1">
+        {group === "shapes" ? <DetailPageShapesPanel store={store} /> : null}
+        {group === "icons" ? <DetailPageIconsPanel store={store} /> : null}
+        {group === "qr" ? <DetailPageQrPanel store={store} /> : null}
+        {group === "decorations" ? <DetailPageDecorationsPanel store={store} /> : null}
+        {group === "charts" ? <DetailPageChartsPanel store={store} /> : null}
+        {group === "tables" ? <DetailPageTablesPanel store={store} /> : null}
+      </div>
+    </div>
+  );
+}

package/components/detail-page/detail-page-font-picker.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { Check, ChevronDown, LoaderCircle } from "lucide-react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { useTranslation } from "react-i18next";
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../ui/command";
+import {
+  EDITOR_BUNDLE_FONTS,
+  EDITOR_CATALOG_FONTS,
+  filterFontsByTags,
+  getEditorFont,
+  type EditorFont,
+} from "../../lib/detail-page-canvas/editor-fonts";
+import { FONT_TAGS, type FontTag } from "../../lib/detail-page-canvas/font-tags";
+
+export function DetailPageFontPicker({
+  value,
+  documentFamilies,
+  onSelect,
+}: {
+  value: string;
+  documentFamilies: string[];
+  onSelect: (family: string) => Promise<void>;
+}) {
+  const { t } = useTranslation("branding");
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState<string | null>(null);
+  const [error, setError] = useState(false);
+  const [tags, setTags] = useState<FontTag[]>([]);
+  const selected = getEditorFont(value);
+  const catalogFonts = filterFontsByTags(EDITOR_CATALOG_FONTS, tags);
+  const bundleFonts = filterFontsByTags(EDITOR_BUNDLE_FONTS, tags);
+  // Document fonts carry no tags, so any active chip is a statement that they are
+  // not what the user is looking for.
+  const legacyFamilies = tags.length
+    ? []
+    : documentFamilies.filter((family) => !getEditorFont(family));
+
+  const toggleTag = (tag: FontTag) => {
+    setTags((current) =>
+      current.includes(tag)
+        ? current.filter((candidate) => candidate !== tag)
+        : [...current, tag],
+    );
+  };
+
+  const select = async (family: string) => {
+    setLoading(family);
+    setError(false);
+    try {
+      await onSelect(family);
+      setOpen(false);
+    } catch (fontError) {
+      console.error(`Failed to load detail-page font "${family}"`, fontError);
+      setError(true);
+    } finally {
+      setLoading(null);
+    }
+  };
+
+  const renderFont = (font: EditorFont) => (
+    <CommandItem
+      key={`${font.source}:${font.id}`}
+      value={`${font.label} ${font.labelEn} ${font.family}`}
+      onSelect={() => void select(font.family)}
+      disabled={loading !== null}
+      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">
+        <Image
+          src={font.previewSrc}
+          alt={font.label}
+          width={560}
+          height={88}
+          className="h-auto w-full object-contain object-left"
+          unoptimized
+        />
+      </span>
+      {font.latinOnly ? (
+        <span className="shrink-0 rounded border border-neutral-200 px-1 py-0.5 text-[10px] leading-none text-neutral-500">
+          {t("detailPage.properties.fontLatinOnly")}
+        </span>
+      ) : null}
+      {loading === font.family ? (
+        <LoaderCircle
+          aria-label={t("detailPage.properties.fontLoading")}
+          className="shrink-0 animate-spin text-neutral-500"
+          size={15}
+        />
+      ) : value === font.family ? (
+        <Check aria-hidden="true" className="shrink-0" size={15} />
+      ) : null}
+    </CommandItem>
+  );
+
+  return (
+    <PopoverPrimitive.Root
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) setError(false);
+      }}
+    >
+      <PopoverPrimitive.Trigger asChild>
+        <button
+          type="button"
+          aria-label={t("detailPage.properties.chooseFont")}
+          aria-expanded={open}
+          className="flex min-w-0 items-center justify-between gap-2 rounded-md border border-neutral-200 bg-white px-2 py-1.5 text-left text-sm text-neutral-900 outline-none hover:bg-neutral-50 focus:border-neutral-400"
+        >
+          <span className="min-w-0 truncate">{selected?.label ?? value}</span>
+          <ChevronDown aria-hidden="true" className="shrink-0 text-neutral-400" size={14} />
+        </button>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          side="left"
+          align="start"
+          sideOffset={8}
+          collisionPadding={12}
+          className="z-[120] w-[340px] overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-[0_10px_32px_rgba(0,0,0,0.14)]"
+        >
+          <div
+            role="group"
+            aria-label={t("detailPage.properties.fontTagFilter")}
+            className="flex flex-wrap gap-1 border-b border-neutral-100 px-2 py-2"
+          >
+            <button
+              type="button"
+              aria-pressed={tags.length === 0}
+              onClick={() => setTags([])}
+              className={`rounded-full border px-2 py-0.5 text-[11px] leading-4 transition-colors ${
+                tags.length === 0
+                  ? "border-neutral-900 bg-neutral-900 text-white"
+                  : "border-neutral-200 text-neutral-600 hover:bg-neutral-50"
+              }`}
+            >
+              {t("detailPage.properties.fontTagAll")}
+            </button>
+            {FONT_TAGS.map((tag) => (
+              <button
+                key={tag}
+                type="button"
+                aria-pressed={tags.includes(tag)}
+                onClick={() => toggleTag(tag)}
+                className={`rounded-full border px-2 py-0.5 text-[11px] leading-4 transition-colors ${
+                  tags.includes(tag)
+                    ? "border-neutral-900 bg-neutral-900 text-white"
+                    : "border-neutral-200 text-neutral-600 hover:bg-neutral-50"
+                }`}
+              >
+                {t(`detailPage.fontTags.${tag}`)}
+              </button>
+            ))}
+          </div>
+          <Command>
+            <CommandInput
+              autoFocus
+              placeholder={t("detailPage.properties.fontSearch")}
+              aria-label={t("detailPage.properties.fontSearch")}
+            />
+            <CommandList className="max-h-[420px]">
+              <CommandEmpty>
+                {t("detailPage.properties.fontEmpty")}
+              </CommandEmpty>
+              {catalogFonts.length ? (
+                <CommandGroup heading={t("detailPage.properties.fontCatalog")}>
+                  {catalogFonts.map(renderFont)}
+                </CommandGroup>
+              ) : null}
+              {bundleFonts.length ? (
+                <CommandGroup heading={t("detailPage.properties.fontBundle")}>
+                  {bundleFonts.map(renderFont)}
+                </CommandGroup>
+              ) : null}
+              {legacyFamilies.length ? (
+                <CommandGroup heading={t("detailPage.properties.documentFonts")}>
+                  {legacyFamilies.map((family) => (
+                    <CommandItem
+                      key={family}
+                      value={family}
+                      onSelect={() => void select(family)}
+                      disabled={loading !== null}
+                      className="gap-2 px-3 py-2.5"
+                    >
+                      <span className="min-w-0 flex-1 truncate">{family}</span>
+                      {value === family ? <Check aria-hidden="true" size={15} /> : null}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ) : null}
+            </CommandList>
+          </Command>
+          {error ? (
+            <p role="alert" className="border-t border-red-100 bg-red-50 px-3 py-2 text-xs text-red-600">
+              {t("detailPage.properties.fontLoadFailed")}
+            </p>
+          ) : null}
+          {selected ? (
+            <div className="border-t border-neutral-100 px-3 py-2 text-[11px] leading-4 text-neutral-500">
+              <a
+                href={selected.licenseUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="font-medium text-neutral-700 underline decoration-neutral-300 underline-offset-2"
+              >
+                {t("detailPage.properties.fontLicense")}: {selected.licenseName}
+              </a>
+              {selected.licenseNoteKey ? (
+                <span className="ml-1">
+                  · {t(`detailPage.fontLicenseNotes.${selected.licenseNoteKey}`)}
+                </span>
+              ) : null}
+            </div>
+          ) : null}
+          <PopoverPrimitive.Arrow className="fill-white" />
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}

package/components/detail-page/detail-page-history-buttons.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { observer } from "./canvas-observer";
+import { useTranslation } from "react-i18next";
+import { Redo2, Undo2 } from "lucide-react";
+
+import {
+  safeRedo,
+  safeUndo,
+  type HistoryStore,
+} from "./editor-history";
+
+/**
+ * 되돌리기 / 다시 실행 버튼. Canvas store의 관측 가능한 ``history.canUndo`` /
+ * ``history.canRedo``를 읽어 비활성 상태를 반응형으로 갱신하고, 클릭 시
+ * 되돌리기/다시 실행을 실행한다. 실제 호출은 ``safeUndo`` / ``safeRedo``를 거치는데,
+ * 선택이 살아 있는 채로 undo하면 스톡 편집기가 MST assertion으로 죽기 때문이다
+ * (editor-history.ts 참고). 단축키(⌘/Ctrl+Z 등)는 ``EditorHotkeys``가 처리한다.
+ */
+
+type HistoryStoreLike = {
+  history: {
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+  };
+};
+
+function HistoryButton({
+  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={onClick}
+      className={[
+        "flex h-9 w-9 items-center justify-center rounded-md transition-colors",
+        disabled
+          ? "cursor-not-allowed text-neutral-300"
+          : "text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900",
+      ].join(" ")}
+    >
+      {children}
+    </button>
+  );
+}
+
+export const DetailPageHistoryButtons = observer(function DetailPageHistoryButtons({
+  store,
+}: {
+  store: unknown;
+}) {
+  const { t } = useTranslation("branding");
+  const { history } = store as HistoryStoreLike;
+  const s = store as HistoryStore;
+  return (
+    <div className="flex items-center">
+      <HistoryButton
+        label={t("editor.undo")}
+        onClick={() => safeUndo(s)}
+        disabled={!history.canUndo}
+      >
+        <Undo2 size={17} />
+      </HistoryButton>
+      <HistoryButton
+        label={t("editor.redo")}
+        onClick={() => safeRedo(s)}
+        disabled={!history.canRedo}
+      >
+        <Redo2 size={17} />
+      </HistoryButton>
+    </div>
+  );
+});
+DetailPageHistoryButtons.displayName = "DetailPageHistoryButtons";