95 lines
3.3 KiB
JavaScript
95 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import BrandMark from './BrandMark';
|
|
import { IconChevron } from './Icons';
|
|
|
|
const NAV_ITEMS = [
|
|
{ id: 'today', to: '/saju/today', label: '오늘의 운세' },
|
|
{ id: 'match', to: '/saju/compatibility', label: '궁합보기' },
|
|
{ id: 'saju', to: '/saju/result', label: '사주풀이' },
|
|
{ id: 'me', to: '/saju/me', label: '상담안내' },
|
|
];
|
|
|
|
function pathToCurrent(pathname) {
|
|
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: 10, zIndex: 40,
|
|
width: 'calc(100% - 72px)', maxWidth: 1368, height: 68,
|
|
margin: '10px auto 0',
|
|
background: 'rgba(251,247,239,0.88)',
|
|
border: '1px solid rgba(31,42,68,0.13)',
|
|
borderRadius: 999,
|
|
display: 'flex', alignItems: 'center', padding: '0 22px 0 28px',
|
|
backdropFilter: 'blur(18px) saturate(150%)',
|
|
WebkitBackdropFilter: 'blur(18px) saturate(150%)',
|
|
boxShadow: '0 8px 24px rgba(31,42,68,0.06), inset 0 1px 0 rgba(255,255,255,0.75)',
|
|
}}>
|
|
<button onClick={() => navigate('/saju')} style={{
|
|
background: 'transparent', border: 'none', display: 'flex', alignItems: 'center', gap: 12,
|
|
padding: 0, minWidth: 220,
|
|
}}>
|
|
<BrandMark size={40} />
|
|
<span className="font-title" style={{
|
|
fontSize: 26, color: '#1F2A44', letterSpacing: '-0.03em', lineHeight: 1,
|
|
}}>호령사주</span>
|
|
</button>
|
|
|
|
<nav aria-label="사주 메뉴" style={{
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
gap: 24, flex: 1,
|
|
}}>
|
|
{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.07)' : 'transparent',
|
|
border: 'none',
|
|
borderRadius: active ? 18 : 0,
|
|
padding: active ? '11px 24px' : '11px 10px',
|
|
color: active ? '#1F2A44' : '#202638',
|
|
fontSize: 16,
|
|
fontWeight: active ? 800 : 700,
|
|
letterSpacing: '-0.03em',
|
|
}}>
|
|
{item.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<button onClick={() => navigate('/saju')} style={{
|
|
padding: '13px 22px 13px 26px',
|
|
borderRadius: 999,
|
|
background: '#1F2A44',
|
|
color: '#F7F2E8',
|
|
border: '1px solid rgba(212,175,55,0.5)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
fontSize: 14,
|
|
fontWeight: 800,
|
|
letterSpacing: '-0.02em',
|
|
boxShadow: '0 6px 18px rgba(31,42,68,0.18), inset 0 1px 0 rgba(212,175,55,0.3)',
|
|
whiteSpace: 'nowrap',
|
|
}}>
|
|
사주풀이 시작하기
|
|
<IconChevron dir="right" size={14} color="#E8C76B" />
|
|
</button>
|
|
</header>
|
|
);
|
|
}
|