caadiq
27fc26ee96
변경 전:
components/
├── pc/admin/ (플랫)
├── pc/public/ (플랫)
└── mobile/ (플랫)
변경 후:
components/
├── pc/admin/
│ ├── layout/ (Layout, Header)
│ ├── common/ (ConfirmDialog, DatePicker, TimePicker, NumberPicker)
│ └── schedule/ (AdminScheduleCard, CategorySelector)
├── pc/public/
│ ├── layout/ (Layout, Header, Footer)
│ └── schedule/ (Calendar, ScheduleCard, BirthdayCard, CategoryFilter)
└── mobile/
├── layout/ (Layout, Header, BottomNav)
└── schedule/ (Calendar, ScheduleCard 등)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
import { NavLink, useLocation } from 'react-router-dom';
|
|
import { Home, Users, Disc3, Calendar } from 'lucide-react';
|
|
|
|
/**
|
|
* 모바일 하단 네비게이션
|
|
*/
|
|
function MobileBottomNav() {
|
|
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 MobileBottomNav;
|