123

src/app/components/HeroBanner.tsx

@@ -10,7 +10,7 @@ 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 }) {
+export function HeroBanner({ subItems, activeSubId, hideSubOnMobile }: { subItems?: SubItem[]; activeSubId?: string; hideSubOnMobile?: boolean }) {
   // SWR 캐시 사용: 페이지 전환 시 재요청/깜빡임 최소화
   const { data } = useSWR<{ banners: Banner[] }>("/api/banners", fetcher, {
     revalidateOnFocus: false,
@@ -78,7 +78,7 @@ export function HeroBanner({ subItems, activeSubId }: { subItems?: SubItem[]; ac
       <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="h-[58px] bg-black rounded-xl flex items-center justify-center px-2">
+        <div className={`${hideSubOnMobile ? "hidden md:flex" : "flex"} h-[58px] bg-black rounded-xl items-center justify-center px-2`}>
           {Array.isArray(subItems) && subItems.length > 0 && (
             <div className="flex flex-wrap items-center gap-[8px]">
               {subItems.map((s) => (
@@ -151,7 +151,7 @@ export function HeroBanner({ subItems, activeSubId }: { subItems?: SubItem[]; ac
       </div>
 
       {/* 분리된 하단 블랙 바: 높이 58px, 중앙 서브카테고리 */}
-      <div className="h-[58px] bg-black rounded-xl flex items-center justify-center px-2">
+      <div className={`${hideSubOnMobile ? "hidden md:flex" : "flex"} h-[58px] bg-black rounded-xl items-center justify-center px-2`}>
         {Array.isArray(subItems) && subItems.length > 0 && (
           <div className="flex flex-wrap items-center gap-[8px]">
               {subItems.map((s) => (