PaperNav.tsx 831 B

1234567891011121314151617181920212223242526272829303132333435
  1. 'use client';
  2. import Link from 'next/link';
  3. import { usePathname } from 'next/navigation';
  4. const TABS = [
  5. { href: '/paper', label: '홈' },
  6. { href: '/paper/trade', label: '주문' },
  7. { href: '/paper/portfolio', label: '포트폴리오' },
  8. { href: '/paper/leaderboard', label: '리더보드' }
  9. ];
  10. export default function PaperNav()
  11. {
  12. const pathname = usePathname();
  13. return (
  14. <nav className='paper__nav' aria-label='모의투자 메뉴'>
  15. {TABS.map(tab => {
  16. const active = tab.href === '/paper' ? pathname === '/paper' : pathname.startsWith(tab.href);
  17. return (
  18. <Link
  19. key={tab.href}
  20. href={tab.href}
  21. className={`paper__nav-link${active ? ' paper__nav-link--active' : ''}`}
  22. aria-current={active ? 'page' : undefined}
  23. >
  24. {tab.label}
  25. </Link>
  26. );
  27. })}
  28. </nav>
  29. );
  30. }