ㄱㄱ

src/app/components/HeroBanner.tsx

@@ -2,12 +2,22 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Image from "next/image";
 import { SelectedBanner } from "@/app/components/SelectedBanner";
+import Link from "next/link";
+import useSWR from "swr";
 
 type Banner = { id: string; title: string; imageUrl: string; linkUrl?: string | null };
 type SubItem = { id: string; name: string; href: string };
 
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
 export function HeroBanner({ subItems, activeSubId }: { subItems?: SubItem[]; activeSubId?: string }) {
-  const [banners, setBanners] = useState<Banner[]>([]);
+  // SWR 캐시 사용: 페이지 전환 시 재요청/깜빡임 최소화
+  const { data } = useSWR<{ banners: Banner[] }>("/api/banners", fetcher, {
+    revalidateOnFocus: false,
+    dedupingInterval: 10 * 60 * 1000, // 10분 간 동일 요청 합치기
+    keepPreviousData: true,
+  });
+  const banners = data?.banners ?? [];
   const [activeIndex, setActiveIndex] = useState(0);
   const [isHovered, setIsHovered] = useState(false);
   const [progress, setProgress] = useState(0); // 0..1
@@ -15,10 +25,6 @@ export function HeroBanner({ subItems, activeSubId }: { subItems?: SubItem[]; ac
   const rafIdRef = useRef<number | null>(null);
   const startedAtRef = useRef<number>(0);
 
-  useEffect(() => {
-    fetch("/api/banners").then((r) => r.json()).then((d) => setBanners(d.banners ?? []));
-  }, []);
-
   const numSlides = banners.length;
   const canAutoPlay = numSlides > 1 && !isHovered;
 
@@ -67,7 +73,33 @@ export function HeroBanner({ subItems, activeSubId }: { subItems?: SubItem[]; ac
 
   const translatePercent = useMemo(() => (numSlides > 0 ? -(activeIndex * 100) : 0), [activeIndex, numSlides]);
 
-  if (numSlides === 0) return <SelectedBanner height={224} />;
+  if (numSlides === 0) {
+    return (
+      <section className="relative w-full overflow-hidden rounded-xl bg-neutral-900 text-white" aria-roledescription="carousel">
+        <SelectedBanner className="h-56 sm:h-72 md:h-[264px]" />
+        {/* 분리된 하단 블랙 바: 높이 58px, 중앙 서브카테고리 (스켈레톤 상태에서도 동일 레이아웃 유지) */}
+        <div className="mt-2 h-[58px] bg-black rounded-xl flex items-center justify-center px-2">
+          {Array.isArray(subItems) && subItems.length > 0 && (
+            <div className="flex flex-wrap items-center gap-[8px]">
+              {subItems.map((s) => (
+                <Link
+                  key={s.id}
+                  href={s.href}
+                  className={
+                    s.id === activeSubId
+                      ? "px-3 h-[28px] rounded-full bg-[#F94B37] text-white text-[12px] leading-[28px] whitespace-nowrap"
+                      : "px-3 h-[28px] rounded-full bg-transparent text-white/85 hover:text-white border border-white/30 text-[12px] leading-[28px] whitespace-nowrap"
+                  }
+                >
+                  {s.name}
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    );
+  }
 
   return (
     <section
@@ -121,11 +153,11 @@ export function HeroBanner({ subItems, activeSubId }: { subItems?: SubItem[]; ac
       {/* 분리된 하단 블랙 바: 높이 58px, 중앙 서브카테고리 */}
       <div className="mt-2 h-[58px] bg-black rounded-xl flex items-center justify-center px-2">
         {Array.isArray(subItems) && subItems.length > 0 && (
-          <div className="flex items-center gap-[8px] overflow-x-auto no-scrollbar">
-            {subItems.map((s) => (
-              <a
+          <div className="flex flex-wrap items-center gap-[8px]">
+              {subItems.map((s) => (
+                <Link
                 key={s.id}
-                href={s.href}
+                  href={s.href}
                 className={
                   s.id === activeSubId
                     ? "px-3 h-[28px] rounded-full bg-[#F94B37] text-white text-[12px] leading-[28px] whitespace-nowrap"
@@ -133,7 +165,7 @@ export function HeroBanner({ subItems, activeSubId }: { subItems?: SubItem[]; ac
                 }
               >
                 {s.name}
-              </a>
+                </Link>
             ))}
           </div>
         )}