AI 기반 불법조업 탐지·차단 플랫폼 (React 19 + MapLibre + deck.gl + Zustand + Tailwind CSS)
htlee
bae2f33b86
Phase 4-1: 운영자 워크플로우 백엔드 (자체 DB)
- ParentResolution / ParentReviewLog / CandidateExclusion / LabelSession 엔티티
- Repository 4종 + DTO 5종
- ParentInferenceWorkflowService (HYBRID 패턴):
- review (CONFIRM/REJECT/RESET) - parent-inference-workflow:parent-review (UPDATE)
- excludeForGroup - parent-inference-workflow:parent-exclusion (CREATE)
- excludeGlobal - parent-inference-workflow:exclusion-management (CREATE) [admin]
- releaseExclusion (UPDATE)
- createLabelSession / cancelLabelSession (CREATE/UPDATE)
- ParentInferenceWorkflowController: @RequirePermission으로 권한 강제
- 모든 액션에 @Auditable AOP → audit_log + review_log 동시 기록
Phase 4-2: PermTreeController + AdminLogController
- GET /api/perm-tree (모든 사용자) - 메뉴/사이드바 구성용
- GET /api/roles (admin:role-management) - 역할+권한 매트릭스
- GET /api/admin/audit-logs / access-logs / login-history
Phase 4-3: iran 백엔드 프록시 (stub)
- IranBackendClient: RestClient 기반, 호출 실패 시 null 반환 (graceful)
- VesselAnalysisProxyController: serviceAvailable=false 응답
- PredictionProxyController: DISCONNECTED 응답
- Phase 5에서 iran 백엔드 실 연결 시 코드 변경 최소
Phase 4-4: 프론트엔드 services
- parentInferenceApi.ts: 모선 워크플로우 22개 함수
- adminApi.ts: 감사로그/접근이력/로그인이력/권한트리/역할 조회
Phase 4-5: 사이드바 권한 필터링 + ProtectedRoute 권한 가드
- AuthContext.PATH_TO_RESOURCE에 신규 경로 매핑 추가
- ProtectedRoute에 resource/operation prop 추가
→ 권한 거부 시 403 페이지 표시
- 모든 라우트에 권한 리소스 명시
- MainLayout 사이드바: parent-inference-workflow + admin 로그 메뉴 추가
- 사이드바 hasAccess 필터링 (이전부터 구현됨, 신규 메뉴에도 자동 적용)
Phase 4-6: 신규 페이지 3종
- ParentReview.tsx: 모선 확정/거부/리셋 + 신규 등록 폼
- ParentExclusion.tsx: GROUP/GLOBAL 제외 등록 + 해제
- LabelSession.tsx: 학습 세션 생성/취소
- AuditLogs.tsx: 감사 로그 조회
- AccessLogs.tsx: 접근 이력 조회
- LoginHistoryView.tsx: 로그인 이력 조회
Phase 4-7: i18n 키 + 라우터 등록
- 한국어/영어 nav.* + group.* 키 추가
- App.tsx에 12개 신규 라우트 등록 + 권한 가드 적용
Phase 4-8: 검증 완료
- 백엔드 컴파일/기동 성공
- 프론트엔드 빌드 성공 (475ms)
- E2E 시나리오:
- operator 로그인 → CONFIRM 확정 → MANUAL_CONFIRMED 갱신
- operator GROUP 제외 → 성공
- operator GLOBAL 제외 → 403 FORBIDDEN (권한 없음)
- operator 학습 세션 생성 → ACTIVE
- admin GLOBAL 제외 → 성공
- 감사 로그 자동 기록: REVIEW_PARENT/EXCLUDE_CANDIDATE_GROUP/
LABEL_PARENT_CREATE/EXCLUDE_CANDIDATE_GLOBAL 등 14건
- 권한 트리 RBAC + AOP 정상 동작 확인
설계 핵심:
- 운영자 의사결정만 자체 DB에 저장 (HYBRID)
- iran 백엔드 데이터는 향후 Phase 5에서 합쳐서 표시
- @RequirePermission + @Auditable로 모든 액션 권한 + 감사 자동화
- 데모 계정으로 완전한 워크플로우 시연 가능
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
||
|---|---|---|
| .claude | ||
| .gitea/workflows | ||
| .githooks | ||
| backend | ||
| database/migration | ||
| docs | ||
| frontend | ||
| .gitignore | ||
| ATTRIBUTIONS.md | ||
| CLAUDE.md | ||
| Makefile | ||
| README.md | ||
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 테마)
문서
| 문서 | 설명 |
|---|---|
| docs/architecture.md | 아키텍처 현황 (기술스택, 구조, 렌더링 최적화, 테마) |
| docs/sfr-user-guide.md | SFR 사용자 가이드 (메뉴별 기능 설명, 구현/미구현 현황) |
| docs/sfr-traceability.md | SFR 요구사항 추적 매트릭스 (개발자용, 소스 경로 포함) |
| docs/page-workflow.md | 31개 페이지 역할 + 4개 업무 파이프라인 |
| docs/data-sharing-analysis.md | 데이터 공유 분석 + mock 통합 결과 |
| docs/next-refactoring.md | 다음 단계 TODO (API 연동, 실시간, 코드 스플리팅) |
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 완료 |