From 808fe5fc681b28fab69ce28a38a6225124942899 Mon Sep 17 00:00:00 2001
From: koreacomp5 <comp5@pluxity.com>
Date: Wed, 5 Nov 2025 23:03:53 +0900
Subject: [PATCH] header

---
 src/app/components/AppHeader.tsx  | 15 ++++++++-------
 src/app/components/HeroBanner.tsx | 26 ++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/app/components/AppHeader.tsx b/src/app/components/AppHeader.tsx
index 9fd1f5f..fea93c4 100644
--- a/src/app/components/AppHeader.tsx
+++ b/src/app/components/AppHeader.tsx
@@ -377,7 +377,7 @@ export function AppHeader() {
             if (!e.currentTarget.contains(next)) setMegaOpen(false);
           }}
         >
-          <div className="relative flex items-center gap-8" ref={navRowRef}>
+          <div className="relative flex items-center gap-0" ref={navRowRef}>
             {categories.map((cat, idx) => (
               <div
                 key={cat.id}
@@ -389,7 +389,7 @@ export function AppHeader() {
               >
                 <Link
                   href={cat.boards?.[0]?.slug ? `/boards/${cat.boards[0].slug}` : `/boards?category=${cat.slug}`}
-                  className={`block w-full px-2 py-2 text-sm font-medium transition-colors duration-200 whitespace-nowrap ${
+                  className={`block w-full px-6 py-2 text-sm font-medium transition-colors duration-200 whitespace-nowrap ${
                     (megaOpen && openSlug === cat.slug) || activeCategorySlug === cat.slug ? "" : "text-neutral-700"
                   }`}
                   style={(megaOpen && openSlug === cat.slug) || activeCategorySlug === cat.slug ? { color: "var(--red-50, #F94B37)" } : undefined}
@@ -423,7 +423,7 @@ export function AppHeader() {
             />
           </div>
           <div
-            className={`fixed left-0 right-0 z-50 bg-white shadow-[0_12px_32px_rgba(0,0,0,0.12)] transition-all duration-200 ${
+            className={`fixed left-0 right-0 z-50 bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60 shadow-[0_12px_32px_rgba(0,0,0,0.12)] transition-all duration-200 ${
               megaOpen ? "opacity-100" : "pointer-events-none opacity-0"
             }`}
             style={{ top: headerBottom }}
@@ -442,15 +442,16 @@ export function AppHeader() {
                     style={{ left: (leftPositions[cat.slug] ?? 0), width: blockWidths[cat.slug] ?? undefined }}
                   >
                     {/* <div className="mb-2 font-semibold text-neutral-800">{cat.name}</div> */}
-                    <div className="mx-auto flex flex-col items-center gap-3 w-full">
+                    <div className="mx-auto flex flex-col items-center gap-0 w-full">
                       {cat.boards.map((b) => (
                         <Link
                           key={b.id}
                           href={`/boards/${b.slug}`}
-                          className={`rounded px-2 py-1 text-sm transition-colors duration-150 text-center whitespace-nowrap ${
-                            activeBoardId === b.slug ? "font-semibold" : "text-neutral-700 hover:text-neutral-900 hover:bg-neutral-100"
+                          className={`rounded px-2 pb-4 text-sm transition-colors duration-150 text-center whitespace-nowrap ${
+                            activeBoardId === b.slug
+                              ? "text-[var(--red-50,#F94B37)] font-semibold"
+                              : "text-neutral-700 hover:text-[var(--red-50,#F94B37)]"
                           }`}
-                          style={activeBoardId === b.slug ? { color: "var(--red-50, #F94B37)" } : undefined}
                           aria-current={activeBoardId === b.slug ? "page" : undefined}
                         >
                           {b.name}
diff --git a/src/app/components/HeroBanner.tsx b/src/app/components/HeroBanner.tsx
index 94a871b..5481bd3 100644
--- a/src/app/components/HeroBanner.tsx
+++ b/src/app/components/HeroBanner.tsx
@@ -130,6 +130,32 @@ export function HeroBanner({ subItems, activeSubId, hideSubOnMobile }: { subItem
           ))}
         </div>
 
+        {/* 좌우 내비게이션 버튼 */}
+        {numSlides > 1 && (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-between px-1 sm:px-2">
+            <button
+              type="button"
+              onClick={goPrev}
+              aria-label="이전 배너"
+              className="pointer-events-auto inline-flex items-center justify-center h-8 w-8 text-white/80 hover:text-[var(--red-50,#F94B37)] transition-colors focus:outline-none"
+            >
+              <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </button>
+            <button
+              type="button"
+              onClick={goNext}
+              aria-label="다음 배너"
+              className="pointer-events-auto inline-flex items-center justify-center h-8 w-8 text-white/80 hover:text-[var(--red-50,#F94B37)] transition-colors focus:outline-none"
+            >
+              <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.5 5L12.5 10L7.5 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </button>
+          </div>
+        )}
+
         {/* Pagination - Figma 스타일: 활성은 주황 바, 비활성은 회색 점 (배너 위에 오버랩) */}
         {numSlides > 1 && (
           <div className="pointer-events-auto absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex items-center gap-[10px]">