caadiq
64fc07044d
레이아웃 컴포넌트: - Header: PC용 헤더 (네비게이션 + SNS 링크) - MobileNav: 모바일 하단 네비게이션 - Footer: PC용 푸터 - Layout: PC/Mobile 통합 레이아웃 (useIsMobile 기반 분기) 스케줄 페이지 (기본 구조): - PC: 좌측 캘린더 + 우측 일정 목록 - Mobile: 상단 네비게이션 + 일정 목록 - 월 변경, 날짜 선택, 일정 표시 기능 App.jsx 업데이트: - 라우팅 설정 (/, /schedule, /members, /album) - Layout 컴포넌트 적용 상수 추가: - NAV_ITEMS: 네비게이션 메뉴 항목 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
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;
|