dcf24e96d2
구역 기반 선박 항적 검색 기능 추가. 사용자가 지도에 최대 3개 구역을 그리고 ANY/ALL/SEQUENTIAL 조건으로 해당 구역을 통과한 선박의 항적을 조회·재생할 수 있다. 신규 패키지 (src/areaSearch/): - stores: areaSearchStore, areaSearchAnimationStore (재생 제어) - services: areaSearchApi (REST API + hitDetails 타임스탬프/위치 보간) - components: AreaSearchPage, ZoneDrawPanel, AreaSearchTimeline, AreaSearchTooltip - hooks: useAreaSearchLayer (Deck.gl 레이어), useZoneDraw (OL Draw) - utils: areaSearchLayerRegistry, csvExport (BOM+UTF-8 엑셀 호환) - types: areaSearch.types (상수, 색상, 모드) 주요 기능: - 폴리곤/사각형/원 구역 그리기 + 드래그 순서 변경 - 구역별 색상 구분 (빨강/청록/황색) - 시간 기반 애니메이션 재생 (TripsLayer 궤적 + 가상선박 이동) - 선종/개별 선박 필터링, 항적 표시/궤적 표시 토글 - 호버 툴팁 (국기 SVG, 구역별 진입/진출 시각·위치) - CSV 내보내기 (신호원, 식별번호, 국적 ISO 변환, 구역 통과 정보) 기존 파일 수정: - SideNav/Sidebar: gnb8 '항적분석' 메뉴 활성화 - useShipLayer: areaSearch 레이어 병합 - MapContainer: useAreaSearchLayer 훅 + 호버 핸들러 + 타임라인 렌더링 - trackLayer: layerIds 파라미터 추가 (area search/track query 레이어 ID 분리) - ShipLegend: 항적분석 모드 선종 카운트 지원 - countryCodeUtils: MMSI MID→ISO alpha-2 매핑 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
78 lines
2.4 KiB
JavaScript
78 lines
2.4 KiB
JavaScript
/**
|
|
* 사이드 네비게이션 메뉴
|
|
* - 퍼블리시 NavComponent 구조와 동일하게 맞춤
|
|
*/
|
|
|
|
const gnbList = [
|
|
{ key: 'gnb1', className: 'gnb1', label: '선박', path: 'ship' },
|
|
{ key: 'gnb2', className: 'gnb2', label: '위성', path: 'satellite' },
|
|
{ key: 'gnb3', className: 'gnb3', label: '기상', path: 'weather' },
|
|
{ key: 'gnb4', className: 'gnb4', label: '분석', path: 'analysis' },
|
|
{ key: 'gnb5', className: 'gnb5', label: '타임라인', path: 'timeline' },
|
|
// { key: 'gnb6', className: 'gnb6', label: 'AI모드', path: 'ai' },
|
|
{ key: 'gnb7', className: 'gnb7', label: '리플레이', path: 'replay' },
|
|
{ key: 'gnb8', className: 'gnb8', label: '항적분석', path: 'area-search' },
|
|
];
|
|
|
|
// 필터/레이어 버튼 비활성화 — 선박(gnb1) 버튼에서 DisplayComponent로 통합
|
|
const sideList = [
|
|
// { key: 'filter', className: 'filter', label: '필터', path: 'filter' },
|
|
// { key: 'layer', className: 'layer', label: '레이어', path: 'layer' },
|
|
];
|
|
|
|
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>
|
|
|
|
<ul className="side">
|
|
{sideList.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',
|
|
gnb2: 'satellite',
|
|
gnb3: 'weather',
|
|
gnb4: 'analysis',
|
|
gnb5: 'timeline',
|
|
gnb6: 'ai',
|
|
gnb7: 'replay',
|
|
gnb8: 'area-search',
|
|
filter: 'filter',
|
|
layer: 'layer',
|
|
};
|
|
|
|
export const pathToKey = Object.fromEntries(
|
|
Object.entries(keyToPath).map(([k, v]) => [v, k])
|
|
);
|