From f672f7af7dc3ead6309a61290d7319a4f047d243 Mon Sep 17 00:00:00 2001
From: Godopu <godopu16@gmail.com>
Date: Thu, 30 Jul 2026 22:26:09 +0900
Subject: [PATCH] feat: add high-contrast active page highlight badge to
 AppHeader

---
 refer_landing_page/components/Header.tsx | 104 +++++++++++++----------
 1 file changed, 61 insertions(+), 43 deletions(-)

diff --git a/refer_landing_page/components/Header.tsx b/refer_landing_page/components/Header.tsx
index 703191e..29bc9de 100644
--- a/refer_landing_page/components/Header.tsx
+++ b/refer_landing_page/components/Header.tsx
@@ -55,30 +55,32 @@ export default function Header() {
         </Link>
 
         {/* Desktop nav — small caps, wide tracking (visible at >= 1240px) */}
-        <div className="hidden items-center gap-7 desktop:flex">
-          <nav className="flex items-center gap-7" aria-label="주 메뉴">
-            {navItems.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-colors ${
-                  isActive(item.href)
-                    ? "text-vermillion"
-                    : "text-ink hover:text-vermillion"
-                }`}
-              >
-                <span className="font-display text-[0.62rem] text-ink-mute">
-                  {item.no}
-                </span>
-                <span>{item.en}</span>
-                <span
-                  aria-hidden
-                  className={`absolute -bottom-1.5 left-0 h-px bg-vermillion transition-all duration-300 ${
-                    isActive(item.href) ? "w-full" : "w-0 group-hover:w-full"
+        <div className="hidden items-center gap-4 desktop:flex">
+          <nav className="flex items-center gap-2" aria-label="주 메뉴">
+            {navItems.map((item) => {
+              const active = isActive(item.href);
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  aria-current={active ? "page" : undefined}
+                  className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-all px-3 py-1.5 rounded-md ${
+                    active
+                      ? "bg-vermillion text-white shadow-sm dark:bg-vermillion dark:text-ivory font-bold"
+                      : "text-ink hover:text-vermillion hover:bg-paper/60"
                   }`}
-                />
-              </Link>
-            ))}
+                >
+                  <span
+                    className={`font-display text-[0.62rem] ${
+                      active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
+                    }`}
+                  >
+                    {item.no}
+                  </span>
+                  <span>{item.en}</span>
+                </Link>
+              );
+            })}
           </nav>
           <div className="h-4 w-px bg-line" aria-hidden="true" />
           <ThemeToggle />
@@ -113,26 +115,42 @@ export default function Header() {
           className="border-t border-ink bg-ivory desktop:hidden"
           aria-label="모바일 메뉴"
         >
-          <ul className="container-content flex flex-col divide-y divide-line py-2">
-            {navItems.map((item) => (
-              <li key={item.href}>
-                <Link
-                  href={item.href}
-                  onClick={() => setOpen(false)}
-                  className={`flex items-baseline justify-between py-4 transition ${
-                    isActive(item.href) ? "text-vermillion" : "text-ink"
-                  }`}
-                >
-                  <span className="flex items-baseline gap-3">
-                    <span className="font-display text-xs text-ink-mute">{item.no}</span>
-                    <span className="headline-ko text-lg">{item.ko}</span>
-                  </span>
-                  <span className="text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-ink-mute">
-                    {item.en}
-                  </span>
-                </Link>
-              </li>
-            ))}
+          <ul className="container-content flex flex-col py-2">
+            {navItems.map((item) => {
+              const active = isActive(item.href);
+              return (
+                <li key={item.href}>
+                  <Link
+                    href={item.href}
+                    onClick={() => setOpen(false)}
+                    aria-current={active ? "page" : undefined}
+                    className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
+                      active
+                        ? "bg-vermillion text-white font-bold dark:bg-vermillion dark:text-ivory shadow-sm"
+                        : "text-ink hover:bg-paper/60"
+                    }`}
+                  >
+                    <span className="flex items-baseline gap-3">
+                      <span
+                        className={`font-display text-xs ${
+                          active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
+                        }`}
+                      >
+                        {item.no}
+                      </span>
+                      <span className="headline-ko text-lg">{item.ko}</span>
+                    </span>
+                    <span
+                      className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
+                        active ? "text-white/90 dark:text-ivory/90" : "text-ink-mute"
+                      }`}
+                    >
+                      {item.en}
+                    </span>
+                  </Link>
+                </li>
+              );
+            })}
           </ul>
         </nav>
       )}