AI 기반 불법조업 탐지·차단 플랫폼 (React 19 + MapLibre + deck.gl + Zustand + Tailwind CSS)
AI 기반 불법조업 탐지·차단 플랫폼
해양경찰청 AIS 신호 기반 불법 조업 선박 탐지, 단속 의사결정 지원 플랫폼.
기술 스택
| 분류 |
기술 |
버전 |
| 프레임워크 |
React + TypeScript |
19.2 / 5.9 |
| 번들러 |
Vite (Rolldown) |
8.0 |
| 지도 |
MapLibre GL + deck.gl |
5.22 / 9.2 |
| 차트 |
ECharts |
6.0 |
| 상태관리 |
Zustand |
5.0 |
| 스타일 |
Tailwind CSS + CVA |
4.2 / 0.7 |
| 다국어 |
react-i18next |
ko / en |
| 린트 |
ESLint (Flat Config) |
10 |
실행
npm install
npm run dev # 개발 서버
npm run build # 프로덕션 빌드 (~480ms)
npm run lint # ESLint 검사
프로젝트 구조
src/
├── lib/charts/ ECharts 공통 (BaseChart + 프리셋)
├── lib/map/ MapLibre + deck.gl (BaseMap + 레이어 + hooks)
├── lib/i18n/ 다국어 (10 네임스페이스, ko/en)
├── lib/theme/ 디자인 토큰 + CVA 변형
├── data/mock/ 공유 더미 데이터 (7 모듈)
├── stores/ Zustand 스토어 (8개)
├── services/ API 서비스 샘플
├── shared/ 공유 UI 컴포넌트
├── features/ 도메인별 페이지 (13그룹, 31페이지)
├── app/ 라우터, 인증, 레이아웃
└── styles/ CSS (Dark/Light 테마)
문서
SFR 요구사항 대응 현황
20개 SFR 전체 UI 구현 완료. 백엔드 연동 대기 중.
| SFR |
기능 |
화면 |
상태 |
| SFR-01 |
로그인·권한 관리 |
/login, /access-control |
UI 완료 |
| SFR-02 |
환경설정·공지·공통 |
/system-config, /notices |
UI 완료 |
| SFR-03 |
통합 데이터 허브 |
/data-hub |
UI 완료 |
| SFR-04 |
AI 예측모델 관리 |
/ai-model |
UI 완료 |
| SFR-05 |
위험도 지도 |
/risk-map |
UI 완료 |
| SFR-06 |
단속 계획·경보 |
/enforcement-plan |
UI 완료 |
| SFR-07 |
단일함정 순찰경로 |
/patrol-route |
UI 완료 |
| SFR-08 |
다함정 경로최적화 |
/fleet-optimization |
UI 완료 |
| SFR-09 |
Dark Vessel 탐지 |
/dark-vessel |
UI 완료 |
| SFR-10 |
어구 탐지 |
/gear-detection |
UI 완료 |
| SFR-11 |
단속·탐지 이력 |
/enforcement-history |
UI 완료 |
| SFR-12 |
모니터링 대시보드 |
/dashboard, /monitoring |
UI 완료 |
| SFR-13 |
통계·성과 분석 |
/statistics |
UI 완료 |
| SFR-14 |
외부 서비스 연계 |
/external-service |
UI 완료 |
| SFR-15 |
모바일 서비스 |
/mobile-service |
UI 완료 |
| SFR-16 |
함정 Agent |
/ship-agent |
UI 완료 |
| SFR-17 |
AI 알림 발송 |
/ai-alert |
UI 완료 |
| SFR-18/19 |
MLOps / LLMOps |
/mlops |
UI 완료 |
| SFR-20 |
AI Q&A 지원 |
/ai-assistant |
UI 완료 |