test

src/app/components/PartnerScroller.tsx

@@ -56,6 +56,42 @@ export default function PartnerScroller() {
     ? 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} />;
 }