gc/kcg-ai-monitoring
7
0
포크 0
코드 이슈 풀 리퀘스트 Actions 위키 활동
AI 기반 불법조업 탐지·차단 플랫폼 (React 19 + MapLibre + deck.gl + Zustand + Tailwind CSS)
33 커밋 12 브랜치 0 태그 5.1 MiB
TypeScript 64.3%
Python 21.9%
Java 11.1%
Shell 1.7%
CSS 0.8%
a6f6003c5f
Go to file
htlee a6f6003c5f feat: System Flow 뷰어 추가 (system-flow.html) — 102 노드, 133 엣지 
iran 프로젝트의 gear-parent-flow 패턴을 차용하여 시스템 전체 데이터 흐름을
노드/엣지로 시각화하는 별도 React 앱 추가. 메인 SPA와 완전 분리.

## 인프라
- @xyflow/react 추가
- frontend/system-flow.html (별도 entry HTML)
- frontend/src/systemFlowMain.tsx (React entry)
- vite.config.ts: rollupOptions.input에 systemFlow 추가
- 빌드 산출물: dist/system-flow.html + dist/assets/systemFlow-*.js (231kB, 메인과 분리)

## 매니페스트 (frontend/src/flow/manifest/)
카테고리별 JSON 분할 + 빌드 시 병합:
- 01-ingest.json (6) — snpdb, vessel_store, refresh
- 02-pipeline.json (7) — 7단계 분류 파이프라인
- 03-algorithms.json (12) — zone/dark/spoofing/risk/transship 등
- 04-fleet.json (9) — fleet_tracker, polygon_builder, gear_correlation, parent_inference
- 05-output.json (8) — event/violation/kpi/stats/alert/redis
- 06-storage.json (18) — 핵심 DB 테이블
- 07-backend.json (15) — Spring Boot 컨트롤러 + endpoint
- 08-frontend.json (17) — 프론트 화면 (menu 매핑 포함)
- 09-decision.json (8) — 운영자 의사결정 액션
- 10-external.json (2) — iran, redis
- edges.json (133) — data/trigger/feedback 분류

## 뷰어 컴포넌트
- SystemFlowViewer.tsx — 3단 레이아웃 + React Flow + 상태 관리
- components/FilterBar.tsx — 검색/단계/메뉴/상세필터 + 레이아웃 토글
- components/NodeListSidebar.tsx — 좌측 카테고리별 노드 리스트
- components/NodeDetailPanel.tsx — 우측 선택 정보 + incoming/outgoing 흐름
- components/nodeShapes.ts — kind별 모양/색상 헬퍼
- SystemFlowViewer.css — 전용 다크 테마 스타일

## 기능
- stage(단계) ⇄ menu(메뉴) 두 가지 그룹화 토글
- 통합 검색 (label/file/symbol/tag)
- 다중 필터 (kind/trigger/status)
- 노드 모양: kind별 (algorithm=다이아몬드, decision=마름모, api=6각형 등)
- 엣지 색상: data=회색, trigger=녹색, feedback=노란 점선
- 딥링크: /system-flow.html#node=<id> (산출문서에서 직접 참조)

## /version 스킬 통합
- CLAUDE.md에 "/version 스킬 사후 처리" 섹션 추가
  Claude가 /version 호출 후 자동으로 manifest.meta version/updatedAt/releaseDate 갱신
- .gitea/workflows/deploy.yml에 archive 보존 단계 추가
  /deploy/kcg-ai-monitoring-archive/system-flow/v{version}_{date}/ 영구 누적
  (nginx 노출 X, 서버 로컬 보존)
- docs/system-flow-guide.md 작성 (URL, 노드 ID 명명, 산출문서 참조법, 갱신 절차)

## URL
- 운영: https://kcg-ai-monitoring.gc-si.dev/system-flow.html
- 메인 SPA에 링크 노출 없음 (개발 단계 페이지)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 17:10:22 +09:00
.claude chore: .env.development → .example + pre-commit 모노레포 대응 2026-04-07 13:52:53 +09:00
.gitea/workflows feat: System Flow 뷰어 추가 (system-flow.html) — 102 노드, 133 엣지 2026-04-07 17:10:22 +09:00
.githooks chore: .env.development → .example + pre-commit 모노레포 대응 2026-04-07 13:52:53 +09:00
backend feat: 프론트 전수 mock 정리 + UTC→KST 통일 + i18n 수정 + stats hourly API 2026-04-07 15:36:38 +09:00
database/migration feat: S1 마스터 데이터 + prediction 기반 DB 스키마 (V008~V013) 2026-04-07 11:49:26 +09:00
deploy docs: 배포 문서 보강 + CI/CD 모노레포 수정 + CLAUDE.md 배포 섹션 2026-04-07 13:43:19 +09:00
docs feat: System Flow 뷰어 추가 (system-flow.html) — 102 노드, 133 엣지 2026-04-07 17:10:22 +09:00
frontend feat: System Flow 뷰어 추가 (system-flow.html) — 102 노드, 133 엣지 2026-04-07 17:10:22 +09:00
prediction fix: prediction e2e — 누락 테이블 12개 + 컬럼 매핑 + NUMERIC precision 통합 수정 2026-04-07 15:00:29 +09:00
.gitignore chore: .env.development.example → .env.example (서버 hook .env.* 차단 대응) 2026-04-07 13:54:22 +09:00
ATTRIBUTIONS.md chore: 팀 워크플로우 기반 초기 프로젝트 구성 2026-04-06 14:11:29 +09:00
CLAUDE.md feat: System Flow 뷰어 추가 (system-flow.html) — 102 노드, 133 엣지 2026-04-07 17:10:22 +09:00
Makefile feat: S2 prediction 분석 엔진 모노레포 이식 2026-04-07 12:56:51 +09:00
README.md chore: 팀 워크플로우 기반 초기 프로젝트 구성 2026-04-06 14:11:29 +09:00

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