45 lines
1.4 KiB
React
45 lines
1.4 KiB
React
|
import { NavLink, useLocation } from 'react-router-dom';
|
||
|
|
import { Home, Users, Disc3, Calendar } from 'lucide-react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 모바일 하단 네비게이션 컴포넌트
|
||
|
|
*/
|
||
|
|
function MobileNav() {
|
||
|
|
const location = useLocation();
|
||
|
|
|
||
|
|
const navItems = [
|
||
|
|
{ path: '/', label: '홈', icon: Home },
|
||
|
|
{ path: '/members', label: '멤버', icon: Users },
|
||
|
|
{ path: '/album', label: '앨범', icon: Disc3 },
|
||
|
|
{ path: '/schedule', label: '일정', icon: Calendar },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav className="flex-shrink-0 bg-white border-t border-gray-200 z-50 safe-area-bottom">
|
||
|
|
<div className="flex items-center justify-around h-16">
|
||
|
|
{navItems.map((item) => {
|
||
|
|
const Icon = item.icon;
|
||
|
|
const isActive = location.pathname === item.path ||
|
||
|
|
(item.path !== '/' && location.pathname.startsWith(item.path));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<NavLink
|
||
|
|
key={item.path}
|
||
|
|
to={item.path}
|
||
|
|
onClick={() => window.scrollTo(0, 0)}
|
||
|
|
className={`flex flex-col items-center justify-center gap-1 w-full h-full transition-colors ${
|
||
|
|
isActive ? 'text-primary' : 'text-gray-400'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<Icon size={22} strokeWidth={isActive ? 2.5 : 2} />
|
||
|
|
<span className="text-xs font-medium">{item.label}</span>
|
||
|
|
</NavLink>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MobileNav;
|