htlee
ac3c204843
- 해경 관련 코드/에셋 정리 (KCGV, 해경관할구역 FGB, PatrolShipSelector) - 위성/기상/퍼블리시/레거시 모듈 전체 삭제 - STOMP WebSocket → AIS Target API HTTP 폴링 방식 전환 - 세션 인증 임시 비활성화 (VITE_DEV_SKIP_AUTH) - 환경변수 민간 데모용으로 재구성 - 팀 워크플로우 v1.2.0 구조 적용 (.claude/rules, skills, settings) - .githooks, .editorconfig, .node-version 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
/**
|
|
* 사이드 네비게이션 메뉴
|
|
*/
|
|
|
|
const gnbList = [
|
|
{ key: 'gnb1', className: 'gnb1', label: '선박', path: 'ship' },
|
|
{ key: 'gnb4', className: 'gnb4', label: '분석', path: 'analysis' },
|
|
{ key: 'gnb5', className: 'gnb5', label: '타임라인', path: 'timeline' },
|
|
{ key: 'gnb7', className: 'gnb7', label: '리플레이', path: 'replay' },
|
|
{ key: 'gnb8', className: 'gnb8', label: '항적분석', path: 'area-search' },
|
|
];
|
|
|
|
export default function SideNav({ activeKey, onChange }) {
|
|
return (
|
|
<nav id="nav">
|
|
<ul className="gnb">
|
|
{gnbList.map((item) => (
|
|
<li key={item.key}>
|
|
<button
|
|
type="button"
|
|
className={`${item.className} ${activeKey === item.key ? 'active' : ''}`}
|
|
onClick={() => onChange(item.key)}
|
|
aria-label={item.label}
|
|
title={item.label}
|
|
>
|
|
<span className="blind">{item.label}</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
// 키-경로 매핑 export (Sidebar에서 사용)
|
|
export const keyToPath = {
|
|
gnb1: 'ship',
|
|
gnb4: 'analysis',
|
|
gnb5: 'timeline',
|
|
gnb7: 'replay',
|
|
gnb8: 'area-search',
|
|
};
|
|
|
|
export const pathToKey = Object.fromEntries(
|
|
Object.entries(keyToPath).map(([k, v]) => [v, k])
|
|
);
|