중간

src/app/components/PartnerScroller.tsx

@@ -0,0 +1,63 @@
+"use client";
+import useSWR from "swr";
+import { useEffect, useMemo, useState } from "react";
+import HorizontalCardScroller from "@/app/components/HorizontalCardScroller";
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+export default function PartnerScroller() {
+  const { data: catData } = useSWR<{ categories: any[] }>("/api/partner-categories", fetcher);
+  const categories = catData?.categories ?? [];
+  const defaultCatId = categories[0]?.id || "";
+  const [selectedId, setSelectedId] = useState<string>(defaultCatId);
+
+  useEffect(() => {
+    if (!selectedId) {
+      let id = "";
+      try {
+        id = (window as any).__partnerCategoryId || localStorage.getItem("selectedPartnerCategoryId") || "";
+      } catch {}
+      if (!id) id = defaultCatId;
+      if (id) setSelectedId(id);
+    }
+  }, [defaultCatId, selectedId]);
+
+  // Listen to HeroBanner selection events
+  useEffect(() => {
+    // initialize from global if present
+    try {
+      const initial = (window as any).__partnerCategoryId;
+      const stored = localStorage.getItem("selectedPartnerCategoryId");
+      if (initial) setSelectedId(initial);
+      else if (stored) setSelectedId(stored);
+    } catch {}
+    const handler = (e: Event) => {
+      const ce = e as CustomEvent<{ id: string }>;
+      if (ce?.detail?.id) setSelectedId(ce.detail.id);
+    };
+    window.addEventListener("partnerCategorySelect", handler as EventListener);
+    return () => window.removeEventListener("partnerCategorySelect", handler as EventListener);
+  }, []);
+
+  const partnersQuery = useMemo(() => (selectedId ? `/api/partners?categoryId=${encodeURIComponent(selectedId)}` : "/api/partners"), [selectedId]);
+  const { data: partnersData } = useSWR<{ partners: any[] }>(partnersQuery, fetcher);
+  const partners = partnersData?.partners ?? [];
+
+  // Fallback to approved partner requests if no partners
+  const { data: reqData } = useSWR<{ items: any[] }>(partners.length === 0 ? "/api/partner-shops" : null, fetcher);
+  const activeCategoryName = useMemo(() => categories.find((c: any) => c.id === selectedId)?.name, [categories, selectedId]);
+  const fallbackItems = useMemo(() => {
+    if (!reqData?.items) return [] as any[];
+    const filtered = activeCategoryName ? reqData.items.filter((it: any) => it.category === activeCategoryName) : reqData.items;
+    return filtered.map((s: any) => ({ id: s.id, region: s.region, name: s.name, address: s.address, image: s.imageUrl || "/sample.jpg" }));
+  }, [reqData, activeCategoryName]);
+
+  const items = partners.length > 0
+    ? partners.map((p: any) => ({ id: p.id, region: p.address ? String(p.address).split(" ")[0] : p.category, name: p.name, address: p.address || "", image: p.imageUrl || "/sample.jpg" }))
+    : fallbackItems;
+
+  if (items.length === 0) return null;
+  return <HorizontalCardScroller items={items} />;
+}
+
+