AI 기반 불법조업 탐지·차단 플랫폼 (React 19 + MapLibre + deck.gl + Zustand + Tailwind CSS)
Go to file
htlee 95ca1018b5 feat: Phase 6-8 - iran 백엔드 실연결 + 시스템 상태 + AI 채팅 기반
Phase 6: iran 백엔드 실연결 + 화면 연동
- application.yml: app.iran-backend.base-url=https://kcg.gc-si.dev
- IranBackendClient: RestClient 확장 (Accept JSON header, getAs<T>)
- VesselAnalysisProxyController: HYBRID 합성 로직 추가
  - GET /api/vessel-analysis: stats + 7423건 분석 결과 통과
  - GET /api/vessel-analysis/groups: 476건 그룹 + 자체 DB resolution 합성
  - GET /api/vessel-analysis/groups/{key}/detail
  - GET /api/vessel-analysis/groups/{key}/correlations
  - 권한: detection / detection:gear-detection (READ)
- 프론트 services/vesselAnalysisApi.ts: 타입 + 필터 헬퍼
  (filterDarkVessels, filterSpoofingVessels, filterTransshipSuspects)
- features/detection/RealGearGroups.tsx: 어구/선단 그룹 실시간 표시
  (FLEET/GEAR_IN_ZONE/GEAR_OUT_ZONE 필터, 통계 5종, 운영자 결정 합성 표시)
- features/detection/RealVesselAnalysis.tsx: 분석 결과 모드별 렌더
  - mode='dark' / 'spoofing' / 'transship' / 'all'
  - 위험도순 정렬 + 6개 통계 카드 + 해역/Dark/Spoofing/전재 표시
- 화면 연동:
  - GearDetection → RealGearGroups 추가
  - DarkVesselDetection → RealDarkVessels + RealSpoofingVessels
  - ChinaFishing(dashboard) → RealAllVessels
  - TransferDetection → RealTransshipSuspects

Phase 7: 시스템 상태 대시보드
- features/monitoring/SystemStatusPanel.tsx
  - 3개 서비스 카드: KCG Backend / iran 백엔드 / Prediction
  - 위험도 분포 (CRITICAL/HIGH/MEDIUM/LOW) 4개 박스
  - 30초 자동 폴링
- MonitoringDashboard 최상단에 SystemStatusPanel 추가

Phase 8: AI 채팅 기반 (SSE는 Phase 9 인증 후)
- 프론트 services/chatApi.ts: sendChatMessage (graceful fallback)
- 백엔드 PredictionProxyController.chat 추가
  - POST /api/prediction/chat
  - 권한: ai-operations:ai-assistant (READ)
  - 현재 stub 응답 (iran chat 인증 토큰 필요)
- AIAssistant 페이지에 백엔드 호출 통합
  (handleSend → sendChatMessage → 응답 표시 + graceful 메시지)

검증:
- 백엔드 컴파일/기동 성공 (Started in 5.2s)
- iran 프록시: 471개 그룹, 7423건 분석 결과 정상 통과
- 프론트 빌드 통과 (502ms)
- E2E 시나리오:
  - admin 로그인 → /api/vessel-analysis/groups → 476건 + serviceAvailable=true
  - /api/prediction/chat → stub 응답 (Phase 9 안내)

설계 원칙:
- iran 백엔드 미연결 시 graceful degradation (serviceAvailable=false + 빈 데이터)
- HYBRID 합성: prediction 후보 + 자체 DB의 운영자 결정을 백엔드에서 조합
- 향후 iran 인증 토큰 통과 후 SSE 채팅 활성화

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 10:22:04 +09:00
.claude chore: 팀 워크플로우 초기화 + Prettier + 타입 에러 수정 2026-04-07 08:44:28 +09:00
.gitea/workflows ci: Gitea Actions 자동배포 워크플로우 추가 2026-04-06 14:12:55 +09:00
.githooks refactor: 모노레포 구조로 전환 (frontend/ + backend/ + database/) 2026-04-07 08:47:24 +09:00
backend feat: Phase 6-8 - iran 백엔드 실연결 + 시스템 상태 + AI 채팅 기반 2026-04-07 10:22:04 +09:00
database/migration refactor: 모노레포 구조로 전환 (frontend/ + backend/ + database/) 2026-04-07 08:47:24 +09:00
docs chore: 팀 워크플로우 기반 초기 프로젝트 구성 2026-04-06 14:11:29 +09:00
frontend feat: Phase 6-8 - iran 백엔드 실연결 + 시스템 상태 + AI 채팅 기반 2026-04-07 10:22:04 +09:00
.gitignore feat: Phase 3 - 자체 인증 + 트리 기반 RBAC + 감사로그 + 데모 계정 2026-04-07 09:29:52 +09:00
ATTRIBUTIONS.md chore: 팀 워크플로우 기반 초기 프로젝트 구성 2026-04-06 14:11:29 +09:00
CLAUDE.md refactor: 모노레포 구조로 전환 (frontend/ + backend/ + database/) 2026-04-07 08:47:24 +09:00
Makefile refactor: 모노레포 구조로 전환 (frontend/ + backend/ + database/) 2026-04-07 08:47:24 +09:00
README.md chore: 팀 워크플로우 기반 초기 프로젝트 구성 2026-04-06 14:11:29 +09:00

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 완료