@leviosa-ai/detail-page-editor 0.1.0

package/components/detail-page/detail-page-brand-gifs-panel.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+// 브랜드 GIF 패널 — 브랜드 이미지에서 GIF만 떼어내 만든 경로별로 나눠 보여준다.
+//
+// 사진과 GIF가 한 그리드에 섞여 있으면 고르기 어렵다(썸네일만으로는 구분도 안 된다).
+// 목록은 서버가 ``media=gif``로 걸러 주고, 각 항목의 구획(``gif_kind``)도 서버가
+// 붙여 준다 — 결과 GIF 바이트만 봐서는 텍스트에서 구웠는지 도형에서 구웠는지 알 수
+// 없기 때문에, 만든 시점의 태그가 유일한 근거다.
+//
+// 분류가 없는 GIF(유저가 직접 올린 것 등)는 '기타'로 모은다. 4구획 중 하나로
+// 억지로 밀어 넣으면 없는 사실을 만드는 셈이고, 빼 버리면 올린 GIF가 사라진다.
+
+import { useRef, useState, type ChangeEvent } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Film, Loader2, 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,
+  BrandAssetGifKind,
+} from "./detail-page-host-context";
+import { insertPersonalImage } from "../../lib/detail-page/insert-image";
+
+const MAX_UPLOAD_BYTES = 20 * 1024 * 1024;
+
+/** 구획 순서 = 화면 순서. 텍스트 → 이미지(이펙트/프롬프트) → 도형. */
+const SECTIONS: Array<{
+  kind: BrandAssetGifKind;
+  labelKey: string;
+  fallback: string;
+}> = [
+  {
+    kind: "text",
+    labelKey: "detailPage.brandGifs.sectionText",
+    fallback: "텍스트 GIF",
+  },
+  {
+    kind: "image_effect",
+    labelKey: "detailPage.brandGifs.sectionImageEffect",
+    fallback: "이미지 GIF (이펙트)",
+  },
+  {
+    kind: "image_prompt",
+    labelKey: "detailPage.brandGifs.sectionImagePrompt",
+    fallback: "이미지 GIF (프롬프트)",
+  },
+  {
+    kind: "shape",
+    labelKey: "detailPage.brandGifs.sectionShape",
+    fallback: "도형 GIF",
+  },
+];
+
+/**
+ * GIF들을 화면 구획으로 나눈다. 분류가 없는 것은 마지막 '기타' 묶음으로 간다.
+ *
+ * 반환은 **비어 있지 않은 구획만** — 빈 제목만 네 줄 떠 있으면 패널이 고장 난 것처럼
+ * 보인다.
+ */
+export function groupBrandGifs(assets: BrandAsset[]): Array<{
+  kind: BrandAssetGifKind | "other";
+  items: BrandAsset[];
+}> {
+  const buckets = new Map<BrandAssetGifKind | "other", BrandAsset[]>();
+  for (const asset of assets) {
+    const key = asset.gif_kind ?? "other";
+    const bucket = buckets.get(key);
+    if (bucket) bucket.push(asset);
+    else buckets.set(key, [asset]);
+  }
+  const ordered: Array<BrandAssetGifKind | "other"> = [
+    ...SECTIONS.map((section) => section.kind),
+    "other",
+  ];
+  return ordered
+    .map((kind) => ({ kind, items: buckets.get(kind) ?? [] }))
+    .filter((section) => section.items.length > 0);
+}
+
+export function DetailPageBrandGifsPanel({ store }: { store: unknown }) {
+  const { brand, queryKeys, toast } = useDetailPageHost();
+  const { t } = useTranslation("branding");
+  const queryClient = useQueryClient();
+  const {
+    activeBrand,
+    activeBrandId,
+    isLoading: brandsLoading,
+  } = brand.useBrandWorkspace();
+  const fileRef = useRef<HTMLInputElement>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const gifsQuery = useQuery({
+    queryKey: queryKeys.branding.brandAssets(activeBrandId, "gif"),
+    queryFn: ({ signal }) => brand.listBrandAssets(activeBrandId!, signal, "gif"),
+    enabled: Boolean(activeBrandId),
+    staleTime: 4 * 60_000,
+  });
+  const sections = groupBrandGifs(gifsQuery.data ?? []);
+
+  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, "gif", {
+        metadata: { source: "canvas_upload" },
+      });
+    },
+    onSuccess: async () => {
+      setError(null);
+      await invalidate();
+    },
+    onError: () => setError(t("detailPage.brandAssets.uploadFailed")),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (asset: BrandAsset) => brand.deleteBrandAsset(asset),
+    onSuccess: invalidate,
+    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.type !== "image/gif") {
+      setError(
+        t("detailPage.brandGifs.notAGif", {
+          defaultValue: "GIF 파일만 올릴 수 있어요.",
+        }),
+      );
+      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 gifsQuery.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.brandGifs.upload", { defaultValue: "GIF 올리기" })}
+        </span>
+        <input
+          ref={fileRef}
+          type="file"
+          accept="image/gif"
+          className="hidden"
+          onChange={handleUpload}
+        />
+      </label>
+
+      {brandsLoading || gifsQuery.isLoading ? (
+        <div className="flex flex-1 items-center justify-center text-neutral-400">
+          <Loader2 aria-hidden="true" className="animate-spin" size={22} />
+        </div>
+      ) : error || gifsQuery.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>
+      ) : sections.length === 0 ? (
+        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-neutral-400">
+          <Film aria-hidden="true" size={22} />
+          <p className="text-xs">
+            {t("detailPage.brandGifs.empty", {
+              defaultValue:
+                "아직 GIF가 없어요. 텍스트·이미지·도형을 골라 GIF로 만들어 보세요.",
+            })}
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-4 overflow-y-auto">
+          {sections.map((section) => (
+            <section key={section.kind}>
+              <h3 className="mb-1.5 text-[11px] font-semibold text-neutral-500">
+                {section.kind === "other"
+                  ? t("detailPage.brandGifs.sectionOther", {
+                      defaultValue: "기타",
+                    })
+                  : t(
+                      SECTIONS.find((entry) => entry.kind === section.kind)!
+                        .labelKey,
+                      {
+                        defaultValue: SECTIONS.find(
+                          (entry) => entry.kind === section.kind,
+                        )!.fallback,
+                      },
+                    )}
+                <span className="ml-1 font-normal text-neutral-300">
+                  {section.items.length}
+                </span>
+              </h3>
+              <div className="grid grid-cols-2 gap-2">
+                {section.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를
+                        // 박으면 저장하고 몇 분 뒤 다시 열 때 403으로 깨진다.
+                        asset.download_url &&
+                        insertPersonalImage(store, brand.brandAssetDocumentSrc(asset), {
+                          isGif: true,
+                        })
+                      }
+                      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">
+                      {String(asset.metadata?.effect ?? "") ||
+                        (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>
+            </section>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/detail-page/detail-page-brand-kit-panel.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { Loader2, Palette } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { useDetailPageHost } from "./detail-page-host-context";
+
+export function DetailPageBrandKitPanel({ store }: { store: unknown }) {
+  // 킷을 그리는 화면은 브랜드 도메인이라 호스트가 꽂는다. 편집기는 활성 브랜드의
+  // 무드보드를 불러 킷으로 바꾼 뒤 그 자리에 넘길 뿐이다.
+  const { brand, queryKeys, slots } = useDetailPageHost();
+  const { t } = useTranslation("branding");
+  const {
+    brands,
+    activeBrand,
+    activeBrandId,
+    setActiveBrandId,
+    isLoading: brandsLoading,
+  } = brand.useBrandWorkspace();
+  const assetsQuery = useQuery({
+    queryKey: queryKeys.branding.brandAssets(activeBrandId),
+    queryFn: ({ signal }) => brand.listBrandAssets(activeBrandId!, signal),
+    enabled: Boolean(activeBrandId),
+    staleTime: 4 * 60_000,
+  });
+  const moodboardQuery = useQuery({
+    queryKey: queryKeys.branding.brandMoodboard(activeBrandId),
+    queryFn: ({ signal }) =>
+      brand.loadBrandMoodboard(activeBrand!, assetsQuery.data ?? [], signal),
+    enabled: Boolean(activeBrand && assetsQuery.data),
+  });
+
+  if (brandsLoading || assetsQuery.isLoading || moodboardQuery.isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center text-neutral-400">
+        <Loader2 className="animate-spin" size={20} />
+      </div>
+    );
+  }
+
+  const KitPanel = slots?.BrandKitPanel;
+  if (!activeBrand || !moodboardQuery.data || !KitPanel) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 p-5 text-center text-neutral-400">
+        <Palette size={22} />
+        <p className="text-xs">{t("detailPage.brandAssets.kitEmpty")}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-y-auto">
+      <div className="border-b border-neutral-200 p-3">
+        <label className="grid gap-1 text-[11px] font-medium text-neutral-500">
+          {t("detailPage.brandAssets.activeBrand")}
+          <select
+            value={activeBrand.id}
+            onChange={(event) => setActiveBrandId(event.target.value)}
+            className="h-8 rounded-md border border-neutral-200 bg-white px-2 text-xs text-neutral-800"
+          >
+            {brands.map((brand) => (
+              <option key={brand.id} value={brand.id}>
+                {brand.name}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+      <KitPanel
+        kit={brand.deriveBrandKit(moodboardQuery.data)}
+        store={store as never}
+        className="flex-1"
+      />
+    </div>
+  );
+}

package/components/detail-page/detail-page-brand-panel-header.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+// 브랜드 자산 패널들(이미지 · GIF · 도형)이 공유하는 머리글.
+//
+// 어느 브랜드의 자산을 보고 있는지 고르는 셀렉트 + 새로고침. 패널마다 같은 마크업을
+// 복사해 두면 한쪽만 고쳐져 "이 패널에서만 브랜드가 안 바뀐다"가 생긴다.
+
+import { RefreshCw } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { useDetailPageHost } from "./detail-page-host-context";
+
+export function BrandPanelHeader({ onRefresh }: { onRefresh: () => void }) {
+  const { brand } = useDetailPageHost();
+  const { t } = useTranslation("branding");
+  const { brands, activeBrandId, setActiveBrandId } = brand.useBrandWorkspace();
+
+  return (
+    <div className="mb-3 flex items-center justify-between gap-2">
+      <label className="grid min-w-0 flex-1 gap-1 text-[11px] font-medium text-neutral-500">
+        {t("detailPage.brandAssets.activeBrand")}
+        <select
+          value={activeBrandId ?? ""}
+          onChange={(event) => setActiveBrandId(event.target.value)}
+          className="h-8 min-w-0 rounded-md border border-neutral-200 bg-white px-2 text-xs text-neutral-800"
+        >
+          {brands.map((brand) => (
+            <option key={brand.id} value={brand.id}>
+              {brand.name}
+            </option>
+          ))}
+        </select>
+      </label>
+      <button
+        type="button"
+        onClick={onRefresh}
+        className="mt-4 flex h-7 w-7 items-center justify-center rounded-md text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
+        aria-label={t("detailPage.brandAssets.refresh")}
+      >
+        <RefreshCw aria-hidden="true" size={14} />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,104 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+import { CHART_PRESETS, createChartSpec, type ChartPreset } from "../../lib/detail-page/chart/defaults";
+import { chartPreviewSvg } from "../../lib/detail-page/chart/preview";
+import { scaleChartStyle } from "../../lib/detail-page/chart/render";
+import { documentFontFamily, insertChart, type StoreLike } from "../../lib/detail-page/chart/sync";
+import { encodeSvgDataUri } from "../../lib/detail-page-canvas/export/svg";
+
+/**
+ * "차트" 패널 — 프리셋을 클릭하면 캔버스에 차트가 놓인다.
+ *
+ * 썸네일은 별도 자산이 아니라 **실제 렌더러 출력**을 SVG로 옮긴 것이다(``preview.ts``).
+ * 프리셋을 고치면 썸네일이 저절로 따라오고, 카탈로그와 결과가 어긋나지 않는다.
+ *
+ * 넣는 차트는 페이지 폭의 80%, 폰트는 문서에서 가장 많이 쓰인 것을 물려받는다 —
+ * 캔버스에 놓자마자 페이지 톤에 붙어 있어야 "AI가 얹어 준 것"처럼 보이지 않는다.
+ */
+
+/** 썸네일 기준 폭. 실제 삽입 폭(≈600)과의 비율로 스타일을 줄인다. */
+const PREVIEW_WIDTH = 220;
+const REFERENCE_WIDTH = 600;
+
+const PREVIEW_DATA = {
+  labels: ["우리", "A", "B"],
+  series: [{ name: "값", values: [92, 61, 45] }],
+};
+
+function previewUri(preset: ChartPreset): string {
+  const full = createChartSpec({
+    kind: preset.kind,
+    width: PREVIEW_WIDTH,
+    style: preset.style,
+    options: preset.options,
+    data: preset.data ?? PREVIEW_DATA,
+  });
+  return encodeSvgDataUri(
+    chartPreviewSvg(scaleChartStyle(full, PREVIEW_WIDTH / REFERENCE_WIDTH)),
+  );
+}
+
+export function DetailPageChartsPanel({ store }: { store: unknown }) {
+  const { t } = useTranslation("branding");
+  const s = store as StoreLike;
+
+  // 프리셋은 코드 상수라 세션 내내 안 바뀐다. 매 렌더마다 SVG를 다시 굽지 않는다.
+  const cells = useMemo(
+    () => CHART_PRESETS.map((preset) => ({ preset, uri: previewUri(preset) })),
+    [],
+  );
+
+  const insert = useCallback(
+    (preset: ChartPreset) => {
+      const page = s.activePage ?? s.pages?.[0];
+      const pageWidth =
+        typeof page?.computedWidth === "number" ? page.computedWidth : 860;
+      insertChart(
+        s,
+        createChartSpec({
+          kind: preset.kind,
+          width: Math.round(pageWidth * 0.8),
+          fontFamily: documentFontFamily(s),
+          style: preset.style,
+          options: preset.options,
+          data: preset.data,
+        }),
+        { name: t(preset.labelKey) },
+      );
+    },
+    [s, t],
+  );
+
+  return (
+    <div className="flex h-full flex-col overflow-y-auto p-3">
+      <p className="mb-2 text-xs font-medium text-neutral-500">
+        {t("detailPage.chart.panelTitle")}
+      </p>
+      <div className="grid grid-cols-2 gap-2">
+        {cells.map(({ preset, uri }) => (
+          <button
+            key={preset.id}
+            type="button"
+            onClick={() => insert(preset)}
+            title={t("detailPage.chart.insertHint")}
+            className="flex flex-col items-center gap-1.5 rounded-lg border border-neutral-200 p-2 hover:border-neutral-400"
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={uri}
+              alt={t(preset.labelKey)}
+              className="h-20 w-full object-contain"
+            />
+            <span className="text-[11px] text-neutral-500">{t(preset.labelKey)}</span>
+          </button>
+        ))}
+      </div>
+      <p className="mt-3 text-[11px] leading-relaxed text-neutral-400">
+        {t("detailPage.chart.panelHint")}
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,125 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Loader2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { useDetailPageHost } from "./detail-page-host-context";
+import type { DetailPageShapeLibraryItem } from "./detail-page-host-context";
+import { encodeSvgDataUri } from "../../lib/detail-page-canvas/export/svg";
+import { insertShape } from "../../lib/detail-page/insert-shape";
+import { rememberElement } from "../../lib/detail-page/element-recents";
+
+/**
+ * "장식" 패널 — 우리 템플릿에서 추린 **공용 장식 카탈로그**(읽기전용, 클릭 삽입).
+ *
+ * 카탈로그는 서버가 세 갈래로 나눠 준다: `icon` · `badge` · `line`.
+ * 여기서는 **`icon`을 안 쓴다.** 그건 루시드류 단색 픽토그램이고, "아이콘" 그룹이 같은
+ * 것을 2만 개 규모로 검색까지 붙여 덮는다. 36개짜리 사본을 옆에 두면 사용자는 어느 쪽을
+ * 봐야 하는지부터 고민하게 된다.
+ *
+ * 남는 `badge`(배지 바탕·씰·말풍선)와 `line`(선 장식·구분)이 이 패널의 전부다.
+ * 개인 도형("내 도형")과는 별개다.
+ */
+
+/** 공용 카탈로그에서 "장식"으로 볼 갈래. */
+const DECORATION_CATEGORIES = ["badge", "line"] as const;
+
+export function DetailPageDecorationsPanel({ store }: { store: unknown }) {
+  const { api, queryKeys } = useDetailPageHost();
+  const { t } = useTranslation("branding");
+  // 카탈로그는 리포에 커밋된 정적 파일이라 배포 사이엔 바뀌지 않는다. 패널은 그룹을
+  // 옮길 때마다 언마운트되므로, 컴포넌트 지역 상태로 들고 있으면 열 때마다 1.7MB를
+  // 다시 받는다. 쿼리 캐시에 얹어 세션당 한 번만 받는다(서버 ETag/304는 새로고침용).
+  const {
+    data: items = [],
+    isPending,
+    isError,
+  } = useQuery({
+    queryKey: queryKeys.branding.detailPageShapeLibrary(),
+    queryFn: ({ signal }) => api.listDetailPageShapeLibrary(signal),
+    staleTime: Infinity,
+    gcTime: Infinity,
+    refetchOnWindowFocus: false,
+  });
+
+  // 수십 KB SVG를 매 렌더마다 다시 인코딩하지 않는다.
+  const groups = useMemo(
+    () =>
+      DECORATION_CATEGORIES.map((category) => ({
+        category,
+        cells: items
+          .filter((item) => item.category === category)
+          .map((item) => ({ item, uri: encodeSvgDataUri(item.svg) })),
+      })).filter((group) => group.cells.length > 0),
+    [items],
+  );
+
+  const insert = useCallback(
+    (item: DetailPageShapeLibraryItem) => {
+      insertShape(store, item.svg, item.view_box);
+      rememberElement({
+        key: item.id,
+        markup: item.svg,
+        viewBox: item.view_box,
+        label: t(`detailPage.shapes.decorations.${item.category}`),
+      });
+    },
+    [store, t],
+  );
+
+  if (isError) {
+    return (
+      <div className="p-3">
+        <p className="text-xs text-red-600">{t("detailPage.shapes.decorationsFailed")}</p>
+      </div>
+    );
+  }
+
+  if (isPending) {
+    return (
+      <div className="flex h-full items-center justify-center text-neutral-400">
+        <Loader2 aria-hidden="true" className="animate-spin" size={18} />
+      </div>
+    );
+  }
+
+  if (!groups.length) {
+    return (
+      <div className="p-3">
+        <p className="text-xs text-neutral-400">{t("detailPage.shapes.decorationsEmpty")}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-y-auto p-3">
+      {groups.map(({ category, cells }) => (
+        <div key={category} className="mb-4 last:mb-0">
+          <p className="mb-2 text-xs font-medium text-neutral-500">
+            {t(`detailPage.shapes.decorations.${category}`)}
+          </p>
+          <div className="grid grid-cols-4 gap-2">
+            {cells.map(({ item, uri }) => (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => insert(item)}
+                className="flex aspect-square items-center justify-center rounded-lg border border-neutral-200 p-2 hover:border-neutral-400"
+                title={t("detailPage.shapes.insertHint")}
+              >
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={uri}
+                  alt={t("detailPage.shapes.shapeAlt")}
+                  className="max-h-full max-w-full object-contain"
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}