feat(saju-ui-v2): DesktopHeader.jsx — 로고 + 5 항목 horizontal nav

2026-05-27 02:06:23 +09:00
parent 7d89a664aa
commit f924c25f16
1 changed files with 57 additions and 0 deletions
--- a/src/pages/saju/_shell/DesktopHeader.jsx
+++ 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>
+  );
+}