feat(saju-ui-v2): BottomNav.jsx — 5 항목 + safe-area + active accent

2026-05-27 02:05:52 +09:00
parent 50ec52ab6e
commit 7d89a664aa
1 changed files with 77 additions and 0 deletions
--- a/src/pages/saju/_shell/BottomNav.jsx
+++ b/src/pages/saju/_shell/BottomNav.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { IconHome, IconSun, IconHeart, IconYinYang, IconUser } from './Icons';
+import hexA from './helpers/hexA';
+
+const NAV_ITEMS = [
+  { id: 'home',  to: '/saju',                label: '홈',         Icon: IconHome,    accent: '#1F2A44' },
+  { id: 'today', to: '/saju/today',          label: '오늘의 운세', Icon: IconSun,     accent: '#D4AF37' },
+  { id: 'match', to: '/saju/compatibility',  label: '궁합보기',    Icon: IconHeart,   accent: '#4E6B5C' },
+  { id: 'saju',  to: '/saju/result',         label: '사주풀이',    Icon: IconYinYang, accent: '#6A4C7C' },
+  { id: 'me',    to: '/saju/me',             label: '마이페이지',  Icon: IconUser,    accent: '#6B6B6B' },
+];
+
+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 BottomNav({ theme = 'ivory' }) {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const current = pathToCurrent(pathname);
+  const isDark = theme === 'navy';
+  const bg = isDark ? 'rgba(20,27,48,0.92)' : '#FBF7EF';
+  const border = isDark ? 'rgba(212,175,55,0.18)' : 'rgba(31,42,68,0.08)';
+  const inactive = isDark ? 'rgba(247,242,232,0.55)' : '#9A968D';
+
+  return (
+    <nav aria-label="사주 메뉴" style={{
+      position: 'fixed', left: 0, right: 0, bottom: 0,
+      paddingBottom: 'max(16px, env(safe-area-inset-bottom))', paddingTop: 8,
+      background: bg, borderTop: `1px solid ${border}`,
+      backdropFilter: 'blur(14px) saturate(140%)',
+      WebkitBackdropFilter: 'blur(14px) saturate(140%)',
+      zIndex: 30,
+    }}>
+      <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'flex-end', padding: '0 6px' }}>
+        {NAV_ITEMS.map((item) => {
+          const active = item.id === current;
+          const activeColor = isDark
+            ? (item.id === 'today' ? '#E8C76B' : item.accent === '#1F2A44' ? '#F7F2E8' : item.accent)
+            : item.accent;
+          const color = active ? activeColor : inactive;
+          return (
+            <button key={item.id} onClick={() => navigate(item.to)} aria-label={item.label}
+              aria-current={active ? 'page' : undefined}
+              style={{
+                background: 'transparent', border: 'none', padding: '6px 4px',
+                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
+                color, flex: 1, minWidth: 0, position: 'relative',
+                transition: 'color .2s',
+              }}>
+              <span style={{
+                width: 36, height: 28, borderRadius: 999,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                background: active ? hexA(item.accent, isDark ? 0.18 : 0.10) : 'transparent',
+                transition: 'background .2s',
+              }}>
+                <item.Icon size={20} stroke={color} strokeWidth={active ? 1.8 : 1.5} />
+              </span>
+              <span style={{
+                fontSize: 9.5, fontWeight: active ? 700 : 500, letterSpacing: '-0.04em',
+                whiteSpace: 'nowrap',
+              }}>{item.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
+
+export { NAV_ITEMS };