feat: System Flow 뷰어 — 시스템 전체 데이터 흐름 시각화 (102 노드) #8
No reviewers
claude-bot
레이블
레이블 없음
마일스톤 없음
담당자 없음
참여자 2명
알림
마감일
마감일이 설정되지 않았습니다.
의존성
No dependencies set.
Reference: gc/kcg-ai-monitoring#8
불러오는 중...
Reference in New Issue
Block a user
No description provided.
Delete Branch "feature/system-flow-viewer"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
요약
iran 프로젝트의 gear-parent-flow 패턴을 차용하여 KCG AI Monitoring 시스템 전체 워크플로우를 노드/엣지로 시각화하는 별도 React 앱 추가.
주요 변경
URL
변경
27 files changed, +3,276 / -0
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>MR 승인