From f924c25f168790e8af3646c1de73212e12c0279d Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Wed, 27 May 2026 02:06:23 +0900
Subject: [PATCH] =?UTF-8?q?feat(saju-ui-v2):=20DesktopHeader.jsx=20?=
 =?UTF-8?q?=E2=80=94=20=EB=A1=9C=EA=B3=A0=20+=205=20=ED=95=AD=EB=AA=A9=20h?=
 =?UTF-8?q?orizontal=20nav?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/saju/_shell/DesktopHeader.jsx | 57 +++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/pages/saju/_shell/DesktopHeader.jsx

diff --git a/src/pages/saju/_shell/DesktopHeader.jsx b/src/pages/saju/_shell/DesktopHeader.jsx
new file mode 100644
index 0000000..cb01ac1
--- /dev/null
+++ b/src/pages/saju/_shell/DesktopHeader.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { NAV_ITEMS } from './BottomNav';
+
+function pathToCurrent(pathname) {
+  if (pathname === '/saju' || pathname === '/saju/') return 'home';
+  if (pathname.startsWith('/saju/today')) return 'today';
+  if (pathname.startsWith('/saju/compatibility')) return 'match';
+  if (pathname.startsWith('/saju/result')) return 'saju';
+  if (pathname.startsWith('/saju/me')) return 'me';
+  return 'home';
+}
+
+export default function DesktopHeader() {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const current = pathToCurrent(pathname);
+
+  return (
+    <header style={{
+      position: 'sticky', top: 0, zIndex: 30, height: 64,
+      background: '#FBF7EF', borderBottom: '1px solid rgba(31,42,68,0.10)',
+      display: 'flex', alignItems: 'center', padding: '0 32px',
+      backdropFilter: 'blur(14px)',
+    }}>
+      <button onClick={() => navigate('/saju')} style={{
+        background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', gap: 10,
+      }}>
+        <span className="font-title" style={{
+          fontSize: 26, color: '#D4AF37', lineHeight: 1,
+        }}>壽</span>
+        <span className="font-title" style={{
+          fontSize: 18, color: '#1F2A44', letterSpacing: '-0.02em',
+        }}>호령사주</span>
+      </button>
+      <nav aria-label="사주 메뉴" style={{ marginLeft: 40, display: 'flex', gap: 8 }}>
+        {NAV_ITEMS.map((item) => {
+          const active = item.id === current;
+          return (
+            <button key={item.id} onClick={() => navigate(item.to)}
+              aria-current={active ? 'page' : undefined}
+              style={{
+                background: active ? 'rgba(31,42,68,0.06)' : 'transparent', border: 'none',
+                padding: '8px 14px', borderRadius: 8,
+                color: active ? item.accent : '#6B6B6B',
+                fontSize: 13, fontWeight: active ? 700 : 500, letterSpacing: '-0.02em',
+                display: 'flex', alignItems: 'center', gap: 6,
+              }}>
+              <item.Icon size={16} stroke={active ? item.accent : '#9A968D'} strokeWidth={active ? 1.8 : 1.5} />
+              {item.label}
+            </button>
+          );
+        })}
+      </nav>
+    </header>
+  );
+}