100 lines
4.5 KiB
TypeScript
100 lines
4.5 KiB
TypeScript
"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;
|
|
|
|
const isLoading = !partnersData && (!reqData || partners.length === 0);
|
|
|
|
if (isLoading) {
|
|
// 스켈레톤: 실제 카드와 동일 사이즈(384x308)로 5~6개 표시
|
|
const skeletons = Array.from({ length: 6 }).map((_, i) => i);
|
|
return (
|
|
<div className="relative h-[400px]">
|
|
<div className="scrollbar-hidden h-full overflow-x-auto overflow-y-hidden">
|
|
<div className="flex h-full items-center gap-4">
|
|
{skeletons.map((i) => (
|
|
<article
|
|
key={`sk-${i}`}
|
|
className="flex-shrink-0 w-[384px] h-[308px] rounded-[16px] bg-white overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.05),0_0_2px_rgba(0,0,0,0.05)]"
|
|
>
|
|
<div className="grid grid-rows-[192px_116px] h-full">
|
|
<div className="w-full h-[192px] overflow-hidden rounded-t-[16px] bg-neutral-200 animate-pulse" />
|
|
<div className="h-[116px] px-8 py-4 grid grid-rows-[26px_auto_16px]">
|
|
<div className="w-[68px] h-[26px] rounded-[20px] bg-neutral-200 animate-pulse" />
|
|
<div className="self-center">
|
|
<div className="h-6 w-[70%] rounded bg-neutral-200 animate-pulse" />
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-4 w-[60%] rounded bg-neutral-200 animate-pulse" />
|
|
<div className="h-4 w-8 rounded bg-neutral-200 animate-pulse" />
|
|
<div className="h-4 w-8 rounded bg-neutral-200 animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (items.length === 0) return null;
|
|
return <HorizontalCardScroller items={items} />;
|
|
}
|
|
|
|
|