feat: BottomNav 모바일 하단 네비게이션 컴포넌트
This commit is contained in:
167
src/components/BottomNav.css
Normal file
167
src/components/BottomNav.css
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
/* BottomNav — mobile bottom navigation */
|
||||||
|
|
||||||
|
.bottom-nav {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: var(--bottom-nav-h);
|
||||||
|
padding-bottom: var(--safe-area-bottom);
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
border-top: 1px solid var(--border-line);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
z-index: 300;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.bottom-nav {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Primary nav items */
|
||||||
|
.bottom-nav__item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 48px;
|
||||||
|
min-height: 48px;
|
||||||
|
gap: 3px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
transition: color 0.18s var(--ease-out);
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-nav__item:hover,
|
||||||
|
.bottom-nav__item.is-active,
|
||||||
|
.bottom-nav__item--active {
|
||||||
|
color: var(--neon-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-nav__item:hover .bottom-nav__icon,
|
||||||
|
.bottom-nav__item.is-active .bottom-nav__icon,
|
||||||
|
.bottom-nav__item--active .bottom-nav__icon {
|
||||||
|
filter: drop-shadow(0 0 6px var(--neon-cyan-dim));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icon wrapper */
|
||||||
|
.bottom-nav__icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: filter 0.18s var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-nav__icon svg,
|
||||||
|
.bottom-nav__icon > * {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Label */
|
||||||
|
.bottom-nav__label {
|
||||||
|
line-height: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- More overlay backdrop ---- */
|
||||||
|
.bottom-nav__more-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
-webkit-backdrop-filter: blur(4px);
|
||||||
|
z-index: 298;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.22s var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-nav__more-overlay.is-open {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- More panel ---- */
|
||||||
|
.bottom-nav__more-panel {
|
||||||
|
position: fixed;
|
||||||
|
bottom: calc(var(--bottom-nav-h) + var(--safe-area-bottom));
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 299;
|
||||||
|
padding: 16px 12px 12px;
|
||||||
|
background: var(--surface-raised);
|
||||||
|
border-top: 1px solid var(--border-line);
|
||||||
|
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 10px;
|
||||||
|
transform: translateY(100%);
|
||||||
|
transition: transform 0.25s var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-nav__more-panel.is-open {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* More panel item */
|
||||||
|
.bottom-nav__more-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 12px 4px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border-line);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-nav__more-item:hover,
|
||||||
|
.bottom-nav__more-item.is-active {
|
||||||
|
color: var(--neon-cyan);
|
||||||
|
border-color: var(--neon-cyan-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-nav__more-item:hover .bottom-nav__icon,
|
||||||
|
.bottom-nav__more-item.is-active .bottom-nav__icon {
|
||||||
|
filter: drop-shadow(0 0 6px var(--neon-cyan-dim));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduce motion */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.bottom-nav__item,
|
||||||
|
.bottom-nav__icon,
|
||||||
|
.bottom-nav__more-overlay,
|
||||||
|
.bottom-nav__more-panel,
|
||||||
|
.bottom-nav__more-item {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
114
src/components/BottomNav.jsx
Normal file
114
src/components/BottomNav.jsx
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
import { useState, useCallback } from 'react';
|
||||||
|
import { NavLink, useLocation } from 'react-router-dom';
|
||||||
|
import { navLinks } from '../routes';
|
||||||
|
import './BottomNav.css';
|
||||||
|
|
||||||
|
const PRIMARY_PATHS = ['/', '/lotto', '/stock', '/travel'];
|
||||||
|
|
||||||
|
// Vertical dots (three circles) icon for "more"
|
||||||
|
function MoreDotsIcon() {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="22"
|
||||||
|
height="22"
|
||||||
|
viewBox="0 0 22 22"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<circle cx="11" cy="4.5" r="1.8" />
|
||||||
|
<circle cx="11" cy="11" r="1.8" />
|
||||||
|
<circle cx="11" cy="17.5" r="1.8" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const primaryLinks = navLinks.filter((link) =>
|
||||||
|
PRIMARY_PATHS.includes(link.path)
|
||||||
|
);
|
||||||
|
// Preserve the order defined in PRIMARY_PATHS
|
||||||
|
const orderedPrimaryLinks = PRIMARY_PATHS.map((p) =>
|
||||||
|
primaryLinks.find((l) => l.path === p)
|
||||||
|
).filter(Boolean);
|
||||||
|
|
||||||
|
const moreLinks = navLinks.filter(
|
||||||
|
(link) => !PRIMARY_PATHS.includes(link.path)
|
||||||
|
);
|
||||||
|
|
||||||
|
export default function BottomNav() {
|
||||||
|
const [moreOpen, setMoreOpen] = useState(false);
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const openMore = useCallback(() => setMoreOpen(true), []);
|
||||||
|
const closeMore = useCallback(() => setMoreOpen(false), []);
|
||||||
|
const toggleMore = useCallback(() => setMoreOpen((prev) => !prev), []);
|
||||||
|
|
||||||
|
// Highlight the "more" button when the current path belongs to moreLinks
|
||||||
|
const isMoreActive =
|
||||||
|
moreOpen || moreLinks.some((link) => location.pathname === link.path);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Backdrop */}
|
||||||
|
<div
|
||||||
|
className={`bottom-nav__more-overlay${moreOpen ? ' is-open' : ''}`}
|
||||||
|
onClick={closeMore}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* More panel */}
|
||||||
|
<div
|
||||||
|
className={`bottom-nav__more-panel${moreOpen ? ' is-open' : ''}`}
|
||||||
|
role="menu"
|
||||||
|
aria-label="더보기 메뉴"
|
||||||
|
>
|
||||||
|
{moreLinks.map((link) => (
|
||||||
|
<NavLink
|
||||||
|
key={link.id}
|
||||||
|
to={link.path}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`bottom-nav__more-item${isActive ? ' is-active' : ''}`
|
||||||
|
}
|
||||||
|
onClick={closeMore}
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
<span className="bottom-nav__icon">{link.icon}</span>
|
||||||
|
<span className="bottom-nav__label">{link.label}</span>
|
||||||
|
</NavLink>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom nav bar */}
|
||||||
|
<nav className="bottom-nav" aria-label="하단 내비게이션">
|
||||||
|
{orderedPrimaryLinks.map((link) => (
|
||||||
|
<NavLink
|
||||||
|
key={link.id}
|
||||||
|
to={link.path}
|
||||||
|
end={link.path === '/'}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`bottom-nav__item${isActive ? ' is-active' : ''}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span className="bottom-nav__icon">{link.icon}</span>
|
||||||
|
<span className="bottom-nav__label">{link.label}</span>
|
||||||
|
</NavLink>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* More button */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`bottom-nav__item${isMoreActive ? ' is-active' : ''}`}
|
||||||
|
onClick={toggleMore}
|
||||||
|
aria-expanded={moreOpen}
|
||||||
|
aria-haspopup="menu"
|
||||||
|
aria-label="더보기"
|
||||||
|
>
|
||||||
|
<span className="bottom-nav__icon">
|
||||||
|
<MoreDotsIcon />
|
||||||
|
</span>
|
||||||
|
<span className="bottom-nav__label">더보기</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user