docs: 프로젝트 산출문서 2026-04-17 기준 정비
- docs/architecture.md: shared/components/ui 9개·i18n 네임스페이스 갱신 - docs/sfr-traceability.md: v3.0 전면 재작성 (운영 상태 기반 531 라인) - docs/sfr-user-guide.md: 헤더 + SFR-01/02/09/10/11/12/13/17 구현 현황 갱신 - docs/data-sharing-analysis.md / next-refactoring.md / page-workflow.md: stale 3건 제거
This commit is contained in:
부모
760bceed32
커밋
831045ace9
@ -50,6 +50,7 @@ src/
|
|||||||
│ ├── i18n/ # 10 NS (common, dashboard, detection, patrol, enforcement, statistics, ai, fieldOps, admin, auth)
|
│ ├── i18n/ # 10 NS (common, dashboard, detection, patrol, enforcement, statistics, ai, fieldOps, admin, auth)
|
||||||
│ │ ├── config.ts # i18next 초기화 (ko 기본, en 폴백)
|
│ │ ├── config.ts # i18next 초기화 (ko 기본, en 폴백)
|
||||||
│ │ └── locales/ # ko/*.json, en/*.json (10파일 x 2언어)
|
│ │ └── locales/ # ko/*.json, en/*.json (10파일 x 2언어)
|
||||||
|
│ │ # 2026-04-17: common.json 에 aria(36)/error(7)/dialog(4)/success(2)/message(5) 네임스페이스 추가
|
||||||
│ └── theme/ # tokens, colors, variants (CVA)
|
│ └── theme/ # tokens, colors, variants (CVA)
|
||||||
│ ├── tokens.ts # CSS 변수 매핑 + resolved 색상값
|
│ ├── tokens.ts # CSS 변수 매핑 + resolved 색상값
|
||||||
│ ├── colors.ts # 시맨틱 팔레트 (risk, alert, vessel, status, chartSeries)
|
│ ├── colors.ts # 시맨틱 팔레트 (risk, alert, vessel, status, chartSeries)
|
||||||
@ -89,20 +90,28 @@ src/
|
|||||||
│ ├── ws.ts # connectWs (STOMP 스텁, 미구현)
|
│ ├── ws.ts # connectWs (STOMP 스텁, 미구현)
|
||||||
│ └── index.ts # 배럴 export
|
│ └── index.ts # 배럴 export
|
||||||
│
|
│
|
||||||
├── shared/components/ # 공유 UI 컴포넌트
|
├── shared/components/ # 공유 UI 컴포넌트 (design-system.html SSOT)
|
||||||
│ ├── ui/
|
│ ├── ui/ # 9개 공통 컴포넌트 (2026-04-17 모든 화면 SSOT 준수 완료)
|
||||||
│ │ ├── card.tsx # Card(CVA variant), CardHeader, CardTitle, CardContent
|
│ │ ├── card.tsx # Card(CVA variant), CardHeader, CardTitle, CardContent (4 variant)
|
||||||
│ │ └── badge.tsx # Badge(CVA intent/size)
|
│ │ ├── badge.tsx # Badge(CVA intent 8종 × size 4단계, LEGACY_MAP 변형 호환)
|
||||||
|
│ │ ├── button.tsx # Button (variant 5종 × size 3단계, icon/trailingIcon prop)
|
||||||
|
│ │ ├── input.tsx # Input (size/state, forwardRef)
|
||||||
|
│ │ ├── select.tsx # Select (aria-label|aria-labelledby|title TS union 강제)
|
||||||
|
│ │ ├── textarea.tsx # Textarea
|
||||||
|
│ │ ├── checkbox.tsx # Checkbox (native input 래퍼)
|
||||||
|
│ │ ├── radio.tsx # Radio
|
||||||
|
│ │ └── tabs.tsx # TabBar + TabButton (underline/pill/segmented 3 variant)
|
||||||
|
│ ├── layout/ # PageContainer / PageHeader / Section (표준 페이지 루트)
|
||||||
│ └── common/
|
│ └── common/
|
||||||
│ ├── DataTable.tsx # 범용 테이블 (가변너비, 검색, 정렬, 페이징, 엑셀, 출력)
|
│ ├── DataTable.tsx # 범용 테이블 (가변너비, 검색, 정렬, 페이징, 엑셀, 출력)
|
||||||
│ ├── Pagination.tsx # 페이지네이션
|
│ ├── Pagination.tsx # 페이지네이션
|
||||||
│ ├── SearchInput.tsx # 검색 입력
|
│ ├── SearchInput.tsx # 검색 입력 (i18n 통합)
|
||||||
│ ├── ExcelExport.tsx # 엑셀 다운로드
|
│ ├── ExcelExport.tsx # 엑셀 다운로드
|
||||||
│ ├── FileUpload.tsx # 파일 업로드
|
│ ├── FileUpload.tsx # 파일 업로드
|
||||||
│ ├── PageToolbar.tsx # 페이지 상단 툴바
|
│ ├── PageToolbar.tsx # 페이지 상단 툴바
|
||||||
│ ├── PrintButton.tsx # 인쇄 버튼
|
│ ├── PrintButton.tsx # 인쇄 버튼
|
||||||
│ ├── SaveButton.tsx # 저장 버튼
|
│ ├── SaveButton.tsx # 저장 버튼
|
||||||
│ └── NotificationBanner.tsx # 알림 배너
|
│ └── NotificationBanner.tsx # 알림 배너 (common.aria.closeNotification)
|
||||||
│
|
│
|
||||||
├── features/ # 13 도메인 그룹 (31 페이지)
|
├── features/ # 13 도메인 그룹 (31 페이지)
|
||||||
│ ├── dashboard/ # 종합 대시보드 (Dashboard)
|
│ ├── dashboard/ # 종합 대시보드 (Dashboard)
|
||||||
|
|||||||
@ -1,252 +0,0 @@
|
|||||||
# Mock 데이터 공유 현황 분석 및 통합 결과
|
|
||||||
|
|
||||||
> 최초 작성일: 2026-04-06
|
|
||||||
> 마지막 업데이트: 2026-04-06
|
|
||||||
> 대상: `kcg-ai-monitoring` 프론트엔드 코드베이스 전체 (31개 페이지)
|
|
||||||
> 상태: **통합 완료**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. 선박 데이터 교차참조
|
|
||||||
|
|
||||||
현재 동일한 선박 데이터가 여러 컴포넌트에 독립적으로 하드코딩되어 있다. 각 파일마다 동일 선박의 속성(위험도, 위치, 상태 등)이 서로 다른 형식과 값으로 중복 정의되어 있어 데이터 일관성 문제가 발생한다.
|
|
||||||
|
|
||||||
| 선박명 | 등장 파일 수 | 파일 목록 |
|
|
||||||
|---|---|---|
|
|
||||||
| 鲁荣渔56555 | 7+ | Dashboard, MobileService, LiveMapView, MonitoringDashboard, EventList, EnforcementHistory, ChinaFishing |
|
|
||||||
| 浙甬渔60651 | 4 | Dashboard, LiveMapView, EventList, DarkVesselDetection |
|
|
||||||
| 冀黄港渔05001 | 6 | MobileService, LiveMapView, Dashboard, TransferDetection, EventList, GearDetection |
|
|
||||||
| 3001함 | 6+ | ShipAgent, MobileService, LiveMapView, Dashboard, PatrolRoute, FleetOptimization |
|
|
||||||
| 3009함 | 6+ | ShipAgent, MobileService, Dashboard, PatrolRoute, FleetOptimization, AIAlert |
|
|
||||||
| 미상선박-A | 5 | MobileService, Dashboard, LiveMapView, MonitoringDashboard, EventList |
|
|
||||||
|
|
||||||
### 문제점
|
|
||||||
- 하나의 선박이 평균 5~7개 파일에 중복 정의됨
|
|
||||||
- 선박 속성(이름, MMSI, 위치, 위험도, 상태)이 파일마다 미세하게 다를 수 있음
|
|
||||||
- 새 선박 추가/수정 시 모든 관련 파일을 일일이 찾아 수정해야 함
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. 위험도 스케일 불일치
|
|
||||||
|
|
||||||
동일한 선박의 위험도가 페이지마다 서로 다른 스케일로 표현되고 있다.
|
|
||||||
|
|
||||||
| 선박명 | Dashboard (risk) | DarkVesselDetection (risk) | MonitoringDashboard |
|
|
||||||
|---|---|---|---|
|
|
||||||
| 鲁荣渔56555 | **0.96** (0~1 스케일) | - | **CRITICAL** (레벨 문자열) |
|
|
||||||
| 浙甬渔60651 | **0.85** (0~1 스케일) | **94** (0~100 정수) | - |
|
|
||||||
| 미상선박-A | **0.94** (0~1 스케일) | **96** (0~100 정수) | - |
|
|
||||||
|
|
||||||
### 원인 분석
|
|
||||||
- Dashboard는 `risk: 0.96` 형식 (0~1 소수)
|
|
||||||
- DarkVesselDetection은 `risk: 96` 형식 (0~100 정수)
|
|
||||||
- MonitoringDashboard는 `'CRITICAL' | 'HIGH' | 'MEDIUM' | 'LOW'` 레벨 문자열
|
|
||||||
- LiveMapView는 `risk: 0.94` 형식 (0~1 소수)
|
|
||||||
- EventList는 레벨 문자열 (`AlertLevel`)
|
|
||||||
|
|
||||||
### 통합 방안
|
|
||||||
위험도를 **0~100 정수** 스케일로 통일하되, 레벨 문자열은 구간별 자동 매핑 유틸로 변환한다.
|
|
||||||
|
|
||||||
```
|
|
||||||
0~30: LOW | 31~60: MEDIUM | 61~85: HIGH | 86~100: CRITICAL
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. KPI 수치 중복
|
|
||||||
|
|
||||||
Dashboard와 MonitoringDashboard가 **완전히 동일한 KPI 수치**를 독립적으로 정의하고 있다.
|
|
||||||
|
|
||||||
| 지표 | Dashboard `KPI_DATA` | MonitoringDashboard `KPI` |
|
|
||||||
|---|---|---|
|
|
||||||
| 실시간 탐지 | 47 | 47 |
|
|
||||||
| EEZ 침범 | 18 | 18 |
|
|
||||||
| 다크베셀 | 12 | 12 |
|
|
||||||
| 불법환적 의심 | 8 | 8 |
|
|
||||||
| 추적 중 | 15 | 15 |
|
|
||||||
| 나포/검문(금일 단속) | 3 | 3 |
|
|
||||||
|
|
||||||
### 문제점
|
|
||||||
- 6개 KPI 수치가 두 파일에 100% 동일하게 하드코딩
|
|
||||||
- 수치 변경 시 양쪽 모두 수정해야 함
|
|
||||||
- Dashboard에는 `prev` 필드(전일 비교)가 추가로 있으나, Monitoring에는 없음
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. 이벤트 타임라인 중복
|
|
||||||
|
|
||||||
08:47~06:12 시계열 이벤트가 최소 4개 파일에 각각 정의되어 있다.
|
|
||||||
|
|
||||||
| 시각 | Dashboard | Monitoring | MobileService | EventList |
|
|
||||||
|---|---|---|---|---|
|
|
||||||
| 08:47 | EEZ 침범 (鲁荣渔56555) | EEZ 침범 (鲁荣渔56555 외 2척) | [긴급] EEZ 침범 탐지 | EVT-0001 EEZ 침범 |
|
|
||||||
| 08:32 | 다크베셀 출현 | 다크베셀 출현 | 다크베셀 출현 | EVT-0002 다크베셀 |
|
|
||||||
| 08:15 | 선단 밀집 경보 | 선단 밀집 경보 | - | EVT-0003 선단밀집 |
|
|
||||||
| 07:58 | 불법환적 의심 | 불법환적 의심 | 환적 의심 | EVT-0004 불법환적 |
|
|
||||||
| 07:41 | MMSI 변조 탐지 | MMSI 변조 탐지 | - | EVT-0005 MMSI 변조 |
|
|
||||||
| 07:23 | 함정 검문 완료 | 함정 검문 완료 | - | EVT-0006 검문 완료 |
|
|
||||||
| 06:12 | 속력 이상 탐지 | - | - | EVT-0010 속력 이상 |
|
|
||||||
|
|
||||||
### 문제점
|
|
||||||
- 동일 이벤트의 description이 파일마다 미세하게 다름 (예: "鲁荣渔56555" vs "鲁荣渔56555 외 2척")
|
|
||||||
- EventList에는 ID가 있으나(EVT-xxxx), 다른 파일에는 없음
|
|
||||||
- Dashboard에는 10개, Monitoring에는 6개, EventList에는 15개로 **건수도 불일치**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. 환적 데이터 100% 중복
|
|
||||||
|
|
||||||
`TransferDetection.tsx`와 `ChinaFishing.tsx`에 **TR-001~TR-003 환적 데이터가 완전히 동일**하게 정의되어 있다.
|
|
||||||
|
|
||||||
```
|
|
||||||
TransferDetection.tsx:
|
|
||||||
const transferData = [
|
|
||||||
{ id: 'TR-001', time: '2026-01-20 13:42:11', a: {name:'장저우8호'}, b: {name:'黑江9호'}, ... },
|
|
||||||
{ id: 'TR-002', time: '2026-01-20 11:15:33', ... },
|
|
||||||
{ id: 'TR-003', time: '2026-01-20 09:23:45', ... },
|
|
||||||
];
|
|
||||||
|
|
||||||
ChinaFishing.tsx:
|
|
||||||
const TRANSFER_DATA = [
|
|
||||||
{ id: 'TR-001', time: '2026-01-20 13:42:11', a: {name:'장저우8호'}, b: {name:'黑江9호'}, ... },
|
|
||||||
{ id: 'TR-002', time: '2026-01-20 11:15:33', ... },
|
|
||||||
{ id: 'TR-003', time: '2026-01-20 09:23:45', ... },
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
### 문제점
|
|
||||||
- 변수명만 다르고 (`transferData` vs `TRANSFER_DATA`) 데이터 구조와 값이 100% 동일
|
|
||||||
- 한쪽만 수정하면 다른 쪽과 불일치 발생
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 6. 함정 상태 불일치
|
|
||||||
|
|
||||||
동일 함정의 상태가 페이지마다 모순되는 경우가 확인되었다.
|
|
||||||
|
|
||||||
| 함정 | ShipAgent | Dashboard | PatrolRoute | FleetOptimization |
|
|
||||||
|---|---|---|---|---|
|
|
||||||
| 5001함 | **오프라인** (`status: '오프라인'`) | **가용** (PATROL_SHIPS에 대기로 표시) | **가용** (`status: '가용'`) | **가용** (`status: '가용'`) |
|
|
||||||
| 3009함 | **온라인** (동기화 중) | **검문 중** | **출동중** | **출동중** |
|
|
||||||
| 1503함 | **미배포** | - | - | **정비중** |
|
|
||||||
|
|
||||||
### 문제점
|
|
||||||
- 5001함이 ShipAgent에서는 오프라인이지만, Dashboard/PatrolRoute/FleetOptimization에서는 가용으로 표시됨 -- **직접적 모순**
|
|
||||||
- 3009함의 상태가 "온라인", "검문 중", "출동중"으로 파일마다 다름
|
|
||||||
- 실제 운영 시 혼란을 초래할 수 있는 시나리오 불일치
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 7. 현재 상태: 통합 완료
|
|
||||||
|
|
||||||
아래 분석에서 식별한 모든 중복/불일치 문제를 해소하기 위해, 7개 공유 Mock 모듈 + 7개 Zustand 스토어 체계로 통합이 **완료**되었다.
|
|
||||||
|
|
||||||
### 7.1 완료된 아키텍처: mock -> store -> page
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ src/data/mock/ (7개 공유 모듈) │
|
|
||||||
├───────────┬──────────┬──────────┬────────┬───────────┬────────┬────────┤
|
|
||||||
│ vessels │ patrols │ events │ kpi │ transfers │ gear │enforce-│
|
|
||||||
│ .ts │ .ts │ .ts │ .ts │ .ts │ .ts │ment.ts │
|
|
||||||
└─────┬─────┴─────┬────┴─────┬────┴───┬────┴─────┬────┴───┬────┴───┬────┘
|
|
||||||
│ │ │ │ │ │ │
|
|
||||||
▼ ▼ ▼ ▼ ▼ ▼ ▼
|
|
||||||
┌─────────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ src/stores/ (7개 Zustand 스토어 + settingsStore) │
|
|
||||||
├───────────┬──────────┬──────────┬────────┬───────────┬────────┬────────┤
|
|
||||||
│ vessel │ patrol │ event │ kpi │ transfer │ gear │enforce-│
|
|
||||||
│ Store │ Store │ Store │ Store │ Store │ Store │mentStr │
|
|
||||||
└─────┬─────┴─────┬────┴─────┬────┴───┬────┴─────┬────┴───┬────┴───┬────┘
|
|
||||||
│ │ │ │ │ │ │
|
|
||||||
▼ ▼ ▼ ▼ ▼ ▼ ▼
|
|
||||||
┌─────────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ src/features/*/ (페이지 컴포넌트) │
|
|
||||||
│ store.load() 호출 -> store에서 데이터 구독 -> 뷰 변환은 페이지 책임 │
|
|
||||||
└─────────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
### 7.2 스토어별 소비 현황 (16개 페이지가 스토어 사용)
|
|
||||||
|
|
||||||
| 스토어 | 소비 페이지 |
|
|
||||||
|---|---|
|
|
||||||
| `useVesselStore` | Dashboard, LiveMapView, DarkVesselDetection, VesselDetail |
|
|
||||||
| `usePatrolStore` | Dashboard, PatrolRoute, FleetOptimization |
|
|
||||||
| `useEventStore` | Dashboard, MonitoringDashboard, LiveMapView, EventList, MobileService, AIAlert |
|
|
||||||
| `useKpiStore` | Dashboard, MonitoringDashboard, Statistics |
|
|
||||||
| `useTransferStore` | TransferDetection, ChinaFishing |
|
|
||||||
| `useGearStore` | GearDetection |
|
|
||||||
| `useEnforcementStore` | EnforcementPlan, EnforcementHistory |
|
|
||||||
|
|
||||||
### 7.3 페이지 전용 인라인 데이터 (미통합)
|
|
||||||
|
|
||||||
아래 페이지들은 도메인 특성상 공유 mock에 포함하지 않고 페이지 전용 인라인 데이터를 유지한다.
|
|
||||||
|
|
||||||
| 페이지 | 인라인 데이터 | 사유 |
|
|
||||||
|---|---|---|
|
|
||||||
| ChinaFishing | `COUNTERS_ROW1/2`, `VESSEL_LIST`, `MONTHLY_DATA`, `VTS_ITEMS` | 중국어선 전용 센서 카운터/통계 (다른 페이지에서 미사용) |
|
|
||||||
| VesselDetail | `VESSELS: VesselTrack[]` | 항적 데이터 구조가 `VesselData`와 다름 (주석으로 명시) |
|
|
||||||
| MLOpsPage | 실험/배포 데이터 | MLOps 전용 도메인 데이터 |
|
|
||||||
| MapControl | 훈련구역 데이터 | 해상사격 훈련구역 전용 |
|
|
||||||
| DataHub | 수신현황 데이터 | 데이터 허브 전용 모니터링 |
|
|
||||||
| AIModelManagement | 모델/규칙 데이터 | AI 모델 관리 전용 |
|
|
||||||
| AIAssistant | `SAMPLE_CONVERSATIONS` | 챗봇 샘플 대화 |
|
|
||||||
| LoginPage | `DEMO_ACCOUNTS` | 데모 인증 정보 |
|
|
||||||
| 기타 (AdminPanel, SystemConfig 등) | 각 페이지 전용 설정/관리 데이터 | 관리 도메인 특화 |
|
|
||||||
|
|
||||||
### 7.4 설계 원칙 (구현 완료)
|
|
||||||
|
|
||||||
1. **위험도 0~100 통일**: 모든 선박의 위험도를 0~100 정수로 통일. 레벨 문자열은 유틸 함수로 변환.
|
|
||||||
2. **단일 원천(Single Source of Truth)**: 각 데이터는 하나의 mock 모듈에서만 정의하고, 스토어를 통해 접근.
|
|
||||||
3. **Lazy Loading**: 스토어의 `load()` 메서드가 최초 호출 시 `import()`로 mock 데이터를 동적 로딩 (loaded 플래그로 중복 방지).
|
|
||||||
4. **뷰 변환은 페이지 책임**: mock 모듈/스토어는 원본 데이터만 제공하고, 화면별 가공(필터, 정렬, 포맷)은 각 페이지에서 수행.
|
|
||||||
|
|
||||||
### 7.5 Mock 모듈 상세 (참고용)
|
|
||||||
|
|
||||||
참고: 초기 분석에서 계획했던 `areas.ts`는 최종 구현 시 `enforcement.ts`(단속 이력 데이터)로 대체되었다.
|
|
||||||
해역/구역 데이터는 RiskMap, MapControl 등 각 페이지에서 전용 데이터로 관리한다.
|
|
||||||
|
|
||||||
| # | 모듈 파일 | 스토어 | 내용 |
|
|
||||||
|---|---|---|---|
|
|
||||||
| 1 | `data/mock/vessels.ts` | `vesselStore` | 중국어선 + 한국어선 + 미상선박 마스터 (`MOCK_VESSELS`, `MOCK_SUSPECTS`) |
|
|
||||||
| 2 | `data/mock/patrols.ts` | `patrolStore` | 경비함정 마스터 + 경로/시나리오/커버리지 |
|
|
||||||
| 3 | `data/mock/events.ts` | `eventStore` | 이벤트 타임라인 + 알림 데이터 |
|
|
||||||
| 4 | `data/mock/kpi.ts` | `kpiStore` | KPI 수치 + 월별 추이 |
|
|
||||||
| 5 | `data/mock/transfers.ts` | `transferStore` | 환적 데이터 (TR-001~003) |
|
|
||||||
| 6 | `data/mock/gear.ts` | `gearStore` | 어구 데이터 (불법어구 목록) |
|
|
||||||
| 7 | `data/mock/enforcement.ts` | `enforcementStore` | 단속 이력 + 단속 계획 데이터 |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 8. 작업 완료 요약
|
|
||||||
|
|
||||||
| 모듈 | 상태 | 스토어 소비 페이지 수 |
|
|
||||||
|---|---|---|
|
|
||||||
| `vessels.ts` | **완료** | 4개 (useVesselStore) |
|
|
||||||
| `events.ts` | **완료** | 6개 (useEventStore) |
|
|
||||||
| `patrols.ts` | **완료** | 3개 (usePatrolStore) |
|
|
||||||
| `kpi.ts` | **완료** | 3개 (useKpiStore) |
|
|
||||||
| `transfers.ts` | **완료** | 2개 (useTransferStore) |
|
|
||||||
| `gear.ts` | **완료** | 1개 (useGearStore) |
|
|
||||||
| `enforcement.ts` | **완료** | 2개 (useEnforcementStore) |
|
|
||||||
|
|
||||||
### 실제 작업 결과
|
|
||||||
- Mock 모듈 생성: 7개 파일 (`src/data/mock/`)
|
|
||||||
- Zustand 스토어 생성: 7개 + 1개 설정용 (`src/stores/`)
|
|
||||||
- 기존 페이지 리팩토링: 16개 페이지에서 스토어 소비로 전환
|
|
||||||
- 나머지 15개 페이지: 도메인 특화 인라인 데이터 유지 (공유 필요성 없음)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 9. 결론
|
|
||||||
|
|
||||||
위 1~6절에서 분석한 6개의 심각한 중복/불일치 문제(위험도 스케일, 함정 상태 모순, KPI 중복, 이벤트 불일치, 환적 100% 중복, 선박 교차참조)는 **7개 공유 mock 모듈 + 7개 Zustand 스토어** 도입으로 모두 해소되었다.
|
|
||||||
|
|
||||||
달성한 효과:
|
|
||||||
- **데이터 일관성**: Single Source of Truth로 불일치 원천 차단
|
|
||||||
- **유지보수성**: 데이터 변경 시 mock 모듈 1곳만 수정
|
|
||||||
- **확장성**: 신규 페이지 추가 시 기존 store import로 즉시 사용
|
|
||||||
- **코드 품질**: 중복 인라인 데이터 제거, 16개 페이지가 스토어 기반으로 전환
|
|
||||||
- **성능**: Zustand lazy loading으로 최초 접근 시에만 mock 데이터 로딩
|
|
||||||
|
|
||||||
1~6절의 분석 내용은 통합 전 문제 식별 기록으로 보존한다.
|
|
||||||
@ -1,194 +0,0 @@
|
|||||||
# KCG AI Monitoring - 다음 단계 리팩토링 TODO
|
|
||||||
|
|
||||||
> 프론트엔드 UI 스캐폴딩 + 기반 인프라(상태관리, 지도 GPU, mock 데이터, CVA) 완료 상태. 백엔드 연동 및 운영 품질 확보를 위해 남은 항목을 순차적으로 진행한다.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. ✅ 상태관리 도입 (Zustand 5.0) — COMPLETED
|
|
||||||
|
|
||||||
`zustand` 5.0.12 설치, `src/stores/`에 8개 독립 스토어 구현 완료.
|
|
||||||
|
|
||||||
- `vesselStore` — 선박 목록, 선택, 필터
|
|
||||||
- `patrolStore` — 순찰 경로/함정
|
|
||||||
- `eventStore` — 탐지/경보 이벤트
|
|
||||||
- `kpiStore` — KPI 메트릭, 추세
|
|
||||||
- `transferStore` — 전재(환적)
|
|
||||||
- `gearStore` — 어구 탐지
|
|
||||||
- `enforcementStore` — 단속 이력
|
|
||||||
- `settingsStore` — theme/language + localStorage 동기화, 지도 타일 자동 전환
|
|
||||||
|
|
||||||
> `AuthContext`는 유지 (인증은 Context API가 적합, 마이그레이션 불필요로 결정)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. API 서비스 계층 (Axios 1.14) — 구조 완성, 실제 연동 대기
|
|
||||||
|
|
||||||
### 현재 상태
|
|
||||||
- `src/services/`에 7개 서비스 모듈 구현 (api, vessel, event, patrol, kpi, ws, index)
|
|
||||||
- `api.ts`: fetch 래퍼 (`apiGet`, `apiPost`) — 향후 Axios 교체 예정
|
|
||||||
- 각 서비스가 `data/mock/` 모듈에서 mock 데이터 반환 (실제 HTTP 호출 0건)
|
|
||||||
- `ws.ts`: STOMP WebSocket 스텁 존재, 미구현
|
|
||||||
|
|
||||||
### 남은 작업
|
|
||||||
- [ ] `axios` 1.14 설치 → `api.ts`의 fetch 래퍼를 Axios 인스턴스로 교체
|
|
||||||
- [ ] Axios 인터셉터:
|
|
||||||
- Request: Authorization 헤더 자동 주입
|
|
||||||
- Response: 401 → 로그인 리다이렉트, 500 → 에러 토스트
|
|
||||||
- [ ] `@tanstack/react-query` 5.x 설치 → TanStack Query Provider 추가
|
|
||||||
- [ ] 각 서비스의 mock 반환을 실제 API 호출로 교체
|
|
||||||
- [ ] 로딩 스켈레톤, 에러 바운더리 공통 컴포넌트
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. 실시간 인프라 (STOMP.js + SockJS) — 스텁 구조만 존재
|
|
||||||
|
|
||||||
### 현재 상태
|
|
||||||
- `services/ws.ts`에 `connectWs` 스텁 함수 존재 (인터페이스 정의 완료)
|
|
||||||
- STOMP.js, SockJS 미설치 — 실제 WebSocket 연결 없음
|
|
||||||
- `useStoreLayerSync` hook으로 store→지도 실시간 파이프라인 준비 완료
|
|
||||||
|
|
||||||
### 남은 작업
|
|
||||||
- [ ] `@stomp/stompjs` + `sockjs-client` 설치
|
|
||||||
- [ ] `ws.ts` 스텁을 실제 STOMP 클라이언트로 구현
|
|
||||||
- [ ] 구독 채널 설계:
|
|
||||||
- `/topic/ais-positions` — 실시간 AIS 위치
|
|
||||||
- `/topic/alerts` — 경보/이벤트
|
|
||||||
- `/topic/detections` — 탐지 결과
|
|
||||||
- `/user/queue/notifications` — 개인 알림
|
|
||||||
- [ ] 재연결 로직 (지수 백오프)
|
|
||||||
- [ ] store → `useStoreLayerSync` → 지도 마커 실시간 업데이트 연결
|
|
||||||
- [ ] `eventStore`와 연동하여 알림 배너/뱃지 카운트 업데이트
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. ✅ 고급 지도 레이어 (deck.gl 9.2) — COMPLETED
|
|
||||||
|
|
||||||
`deck.gl` 9.2.11 + `@deck.gl/mapbox` 설치, MapLibre + deck.gl 인터리브 아키텍처 구현 완료.
|
|
||||||
|
|
||||||
- **BaseMap**: `forwardRef` + `memo`, `MapboxOverlay`를 `useImperativeHandle`로 외부 노출
|
|
||||||
- **useMapLayers**: RAF 배치 레이어 업데이트, React 리렌더 0회
|
|
||||||
- **useStoreLayerSync**: Zustand store.subscribe → RAF → overlay.setProps (React 우회)
|
|
||||||
- **STATIC_LAYERS**: EEZ + NLL PathLayer 싱글턴 (GPU 1회 업로드)
|
|
||||||
- **createMarkerLayer**: ScatterplotLayer + transitions 보간 + DataFilterExtension
|
|
||||||
- **createRadiusLayer**: 반경 원 표시용 ScatterplotLayer
|
|
||||||
- 레거시 GeoJSON 레이어(`boundaries.ts`)는 하위 호환으로 유지
|
|
||||||
|
|
||||||
> 성능 목표 40만척+ GPU 렌더링 달성. TripsLayer/HexagonLayer/IconLayer는 실데이터 확보 후 추가 예정.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. ✅ 더미 데이터 통합 — COMPLETED
|
|
||||||
|
|
||||||
`src/data/mock/`에 7개 공유 mock 모듈 구현 완료. TypeScript 인터페이스 정의 포함.
|
|
||||||
|
|
||||||
```
|
|
||||||
data/mock/
|
|
||||||
├── vessels.ts # VesselData — 선박 목록 (한국, 중국, 경비함)
|
|
||||||
├── events.ts # EventRecord, AlertRecord — 탐지/단속 이벤트
|
|
||||||
├── transfers.ts # 전재(환적) 데이터
|
|
||||||
├── patrols.ts # PatrolShip — 순찰 경로/함정
|
|
||||||
├── gear.ts # 어구 탐지 데이터
|
|
||||||
├── kpi.ts # KpiMetric, MonthlyTrend, ViolationType
|
|
||||||
└── enforcement.ts # 단속 이력 데이터
|
|
||||||
```
|
|
||||||
|
|
||||||
- `services/` 계층이 mock 모듈을 import하여 반환 → 향후 API 교체 시 서비스만 수정
|
|
||||||
- 인터페이스가 API 응답 타입 계약 역할 수행
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 6. i18n 실적용 — 구조 완성, 내부 텍스트 미적용
|
|
||||||
|
|
||||||
### 현재 상태
|
|
||||||
- 10 네임스페이스 리소스 완비: common, dashboard, detection, patrol, enforcement, statistics, ai, fieldOps, admin, auth
|
|
||||||
- ko/en 각 10파일 (총 20 JSON)
|
|
||||||
- `settingsStore.toggleLanguage()` + `localStorage` 동기화 구현 완료
|
|
||||||
- **적용 완료**: MainLayout 사이드바 메뉴명, 24개 페이지 제목, LoginPage
|
|
||||||
- **미적용**: 각 페이지 내부 텍스트 (카드 레이블, 테이블 헤더, 상태 텍스트 등) — 대부분 한국어 하드코딩 잔존
|
|
||||||
|
|
||||||
### 남은 작업
|
|
||||||
- [ ] 각 feature 페이지 내부 텍스트를 `useTranslation('namespace')` + `t()` 로 교체
|
|
||||||
- [ ] 날짜/숫자 포맷 로컬라이즈 (`Intl.DateTimeFormat`, `Intl.NumberFormat`)
|
|
||||||
- [ ] 누락 키 감지 자동화 (i18next missing key handler 또는 lint 규칙)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 7. ✅ Tailwind 공통 스타일 모듈화 (CVA) — COMPLETED
|
|
||||||
|
|
||||||
`class-variance-authority` 0.7.1 설치, `src/lib/theme/variants.ts`에 3개 CVA 변형 구현 완료.
|
|
||||||
|
|
||||||
- **cardVariants**: default / elevated / inner / transparent — CSS 변수 기반 테마 반응
|
|
||||||
- **badgeVariants**: 8 intent (critical~cyan) x 4 size (xs~lg) — 150회+ 반복 패턴 통합
|
|
||||||
- **statusDotVariants**: 4 status (online/warning/danger/offline) x 3 size (sm/md/lg)
|
|
||||||
- `shared/components/ui/card.tsx`, `badge.tsx`에 CVA 적용 완료
|
|
||||||
- CSS 변수(`surface-raised`, `surface-overlay`, `border`) 참조로 Dark/Light 자동 반응
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 8. 코드 스플리팅 — 미착수
|
|
||||||
|
|
||||||
### 현재 상태
|
|
||||||
- **단일 번들 ~3.2MB** (모든 feature + deck.gl + MapLibre + ECharts 포함)
|
|
||||||
- `React.lazy` 미적용, 모든 31개 페이지가 동기 import
|
|
||||||
- 초기 로딩 시 사용하지 않는 페이지 코드까지 전부 다운로드
|
|
||||||
|
|
||||||
### 필요한 이유
|
|
||||||
- 초기 로딩 성능 개선 (FCP, LCP)
|
|
||||||
- 현장 모바일 환경 (LTE/3G)에서의 사용성 확보
|
|
||||||
- 번들 캐싱 효율 향상 (변경된 chunk만 재다운로드)
|
|
||||||
|
|
||||||
### 구현 계획
|
|
||||||
- [ ] `React.lazy` + `Suspense`로 feature 단위 동적 임포트:
|
|
||||||
```typescript
|
|
||||||
const Dashboard = lazy(() => import('@features/dashboard/Dashboard'));
|
|
||||||
const RiskMap = lazy(() => import('@features/risk-assessment/RiskMap'));
|
|
||||||
```
|
|
||||||
- [ ] `App.tsx` 라우트 전체를 lazy 컴포넌트로 교체
|
|
||||||
- [ ] 로딩 폴백 컴포넌트 (스켈레톤 또는 스피너) 공통화
|
|
||||||
- [ ] Vite `build.rollupOptions.output.manualChunks` 설정:
|
|
||||||
```typescript
|
|
||||||
manualChunks: {
|
|
||||||
'vendor-react': ['react', 'react-dom', 'react-router-dom'],
|
|
||||||
'vendor-map': ['maplibre-gl', 'deck.gl', '@deck.gl/mapbox'],
|
|
||||||
'vendor-chart': ['echarts'],
|
|
||||||
}
|
|
||||||
```
|
|
||||||
- [ ] 목표: 초기 번들 < 300KB (gzip), 각 feature chunk < 100KB
|
|
||||||
- [ ] `vite-plugin-compression`으로 gzip/brotli 사전 압축 검토
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 9. Light 테마 하드코딩 정리
|
|
||||||
|
|
||||||
### 현재 상태
|
|
||||||
- Dark/Light 테마 전환 구조 완성 (CSS 변수 + `.light` 클래스 + settingsStore)
|
|
||||||
- 시맨틱 변수(`surface-raised`, `text-heading` 등) + CVA 변형은 정상 작동
|
|
||||||
- **문제**: 일부 alert/status 색상이 Tailwind 하드코딩 (`bg-red-500/20`, `text-red-400`, `border-red-500/30` 등)
|
|
||||||
- Dark에서는 자연스러우나, Light 전환 시 대비/가독성 부족
|
|
||||||
|
|
||||||
### 구현 계획
|
|
||||||
- [ ] 하드코딩 alert 색상을 CSS 변수 또는 CVA intent로 교체
|
|
||||||
- [ ] `badgeVariants`의 intent 색상도 CSS 변수 기반으로 전환 검토
|
|
||||||
- [ ] Light 모드 전용 대비 테스트 (WCAG AA 기준)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 우선순위 및 의존관계
|
|
||||||
|
|
||||||
```
|
|
||||||
✅ 완료 ─────────────────────────────────────
|
|
||||||
[1. Zustand] [4. deck.gl] [5. mock 데이터] [7. CVA]
|
|
||||||
|
|
||||||
진행 중 / 남은 작업 ──────────────────────────
|
|
||||||
[6. i18n 내부 텍스트] ──┐
|
|
||||||
├──▶ [2. API 실제 연동] ──▶ [3. 실시간 STOMP]
|
|
||||||
[9. Light 테마 정리] ───┘
|
|
||||||
|
|
||||||
[8. 코드 스플리팅] ← 독립 작업, 언제든 착수 가능 (~3.2MB → 목표 <300KB)
|
|
||||||
```
|
|
||||||
|
|
||||||
### 권장 진행 순서
|
|
||||||
|
|
||||||
1. **Phase A (품질)**: i18n 내부 텍스트 적용 (6) + Light 테마 하드코딩 정리 (9) + 코드 스플리팅 (8)
|
|
||||||
2. **Phase B (연동)**: Axios 설치 + API 실제 연동 (2)
|
|
||||||
3. **Phase C (실시간)**: STOMP.js + SockJS 실시간 인프라 (3)
|
|
||||||
@ -1,436 +0,0 @@
|
|||||||
# 페이지 역할표 및 업무 파이프라인
|
|
||||||
|
|
||||||
> 최초 작성일: 2026-04-06
|
|
||||||
> 마지막 업데이트: 2026-04-06
|
|
||||||
> 대상: `kcg-ai-monitoring` 프론트엔드 31개 페이지
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 0. 공통 아키텍처
|
|
||||||
|
|
||||||
### 디렉토리 구조
|
|
||||||
|
|
||||||
모든 페이지는 `src/features/` 아래 도메인별 디렉토리에 배치되어 있다.
|
|
||||||
|
|
||||||
```
|
|
||||||
src/features/
|
|
||||||
admin/ AccessControl, AdminPanel, DataHub, NoticeManagement, SystemConfig
|
|
||||||
ai-operations/ AIAssistant, AIModelManagement, MLOpsPage
|
|
||||||
auth/ LoginPage
|
|
||||||
dashboard/ Dashboard
|
|
||||||
detection/ ChinaFishing, DarkVesselDetection, GearDetection, GearIdentification
|
|
||||||
enforcement/ EnforcementHistory, EventList
|
|
||||||
field-ops/ AIAlert, MobileService, ShipAgent
|
|
||||||
monitoring/ MonitoringDashboard
|
|
||||||
patrol/ FleetOptimization, PatrolRoute
|
|
||||||
risk-assessment/ EnforcementPlan, RiskMap
|
|
||||||
statistics/ ExternalService, ReportManagement, Statistics
|
|
||||||
surveillance/ LiveMapView, MapControl
|
|
||||||
vessel/ TransferDetection, VesselDetail
|
|
||||||
```
|
|
||||||
|
|
||||||
### 데이터 흐름
|
|
||||||
|
|
||||||
모든 공유 데이터는 **mock -> store -> page** 패턴으로 흐른다.
|
|
||||||
|
|
||||||
```
|
|
||||||
src/data/mock/*.ts --> src/stores/*Store.ts --> src/features/*/*.tsx
|
|
||||||
(7개 공유 모듈) (7개 Zustand 스토어) (16개 페이지가 스토어 소비)
|
|
||||||
```
|
|
||||||
|
|
||||||
- 스토어는 `load()` 호출 시 `import()`로 mock 데이터를 lazy loading
|
|
||||||
- 도메인 특화 데이터는 페이지 내 인라인으로 유지 (MLOps, MapControl, DataHub 등)
|
|
||||||
- 상세 매핑은 `docs/data-sharing-analysis.md` 참조
|
|
||||||
|
|
||||||
### 지도 렌더링
|
|
||||||
|
|
||||||
지도가 필요한 11개 페이지는 공통 `src/lib/map/` 인프라를 사용한다.
|
|
||||||
|
|
||||||
- **deck.gl** 기반 렌더링 (`BaseMap.tsx`)
|
|
||||||
- **`useMapLayers`** 훅: 페이지별 동적 레이어 구성
|
|
||||||
- **`STATIC_LAYERS`**: EEZ/KDLZ 등 정적 레이어를 상수로 분리하여 zero rerender 보장
|
|
||||||
- 사용 페이지: Dashboard, LiveMapView, MapControl, EnforcementPlan, PatrolRoute, FleetOptimization, GearDetection, DarkVesselDetection, RiskMap, VesselDetail, MobileService
|
|
||||||
|
|
||||||
### 다국어 (i18n)
|
|
||||||
|
|
||||||
- `react-i18next` 기반, 24개 페이지 + MainLayout + LoginPage에 i18n 적용
|
|
||||||
- 지원 언어: 한국어 (ko), 영어 (en)
|
|
||||||
- 페이지 타이틀, 주요 UI 라벨이 번역 키로 관리됨
|
|
||||||
|
|
||||||
### 테마
|
|
||||||
|
|
||||||
- `settingsStore`에서 dark/light 테마 전환 지원
|
|
||||||
- 기본값: dark (해양 감시 시스템 특성상)
|
|
||||||
- `localStorage`에 선택 유지, CSS 클래스 토글 방식
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. 31개 페이지 역할표
|
|
||||||
|
|
||||||
### 1.1 인증/관리 (4개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| SFR-01 | LoginPage | `/login` | 전체 | SSO/GPKI/비밀번호 인증, 5회 실패 잠금 | ID/PW, 인증 방식 선택 | 세션 발급, 역할 부여 | - | 모든 페이지 (인증 게이트) |
|
|
||||||
| SFR-01 | AccessControl | `/access-control` | 관리자 | RBAC 권한 관리, 감사 로그 | 역할/사용자/권한 설정 | 권한 변경, 감사 기록 | LoginPage | 전체 시스템 접근 제어 |
|
|
||||||
| SFR-02 | SystemConfig | `/system-config` | 관리자 | 공통코드 기준정보 관리 (해역52/어종578/어업59/선박186) | 코드 검색/필터 | 코드 조회, 설정 변경 | AccessControl | 탐지/분석 엔진 기준데이터 |
|
|
||||||
| SFR-02 | NoticeManagement | `/notices` | 관리자 | 시스템 공지(배너/팝업/토스트), 역할별 대상 설정 | 공지 작성, 기간/대상 설정 | 배너/팝업 노출 | AccessControl | 모든 페이지 (NotificationBanner) |
|
|
||||||
|
|
||||||
### 1.2 데이터 수집/연계 (1개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| SFR-03 | DataHub | `/data-hub` | 관리자 | 통합데이터 허브 — 선박신호 수신 현황 히트맵, 연계 채널 모니터링 | 수신 소스 선택 | 수신률 조회, 연계 상태 확인 | 외부 센서 (VTS, AIS, V-PASS 등) | 탐지 파이프라인 전체 |
|
|
||||||
|
|
||||||
### 1.3 AI 모델/운영 (3개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| SFR-04 | AIModelManagement | `/ai-model` | 분석관 | 모델 레지스트리, 탐지 규칙, 피처 엔지니어링, 학습 파이프라인, 7대 탐지엔진 | 모델 버전/규칙/피처 설정 | 모델 배포, 성능 리포트 | DataHub (학습 데이터) | DarkVessel, GearDetection, TransferDetection 등 탐지 엔진 |
|
|
||||||
| SFR-18/19 | MLOpsPage | `/mlops` | 분석관/관리자 | MLOps/LLMOps 운영 대시보드 (실험, 배포, API Playground, LLM 테스트) | 실험 템플릿, HPS 설정 | 실험 결과, 모델 배포 | AIModelManagement | AIAssistant, 탐지 엔진 |
|
|
||||||
| SFR-20 | AIAssistant | `/ai-assistant` | 상황실/분석관 | 자연어 Q&A 의사결정 지원 (법령 조회, 대응 절차 안내) | 자연어 질의 | 답변 + 법령 참조 | MLOpsPage (LLM 모델) | 작전 의사결정 |
|
|
||||||
|
|
||||||
### 1.4 탐지 (4개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| SFR-09 | DarkVesselDetection | `/dark-vessel` | 분석관 | AIS 조작/위장/Dark Vessel 패턴 탐지 (6가지 패턴), 지도+테이블 | AIS 데이터 스트림 | 의심 선박 목록, 위험도, 라벨 분류 | DataHub (AIS/레이더) | RiskMap, LiveMapView, EventList |
|
|
||||||
| SFR-10 | GearDetection | `/gear-detection` | 분석관 | 불법 어망/어구 탐지 및 관리, 허가 상태 판정 | 어구 센서/영상 | 어구 목록, 불법 판정 결과 | DataHub (센서) | RiskMap, EnforcementPlan |
|
|
||||||
| - | GearIdentification | `features/detection/` | 분석관 | 어구 국적 판별 (중국/한국/불확실), GB/T 5147 기준 | 어구 물리적 특성 입력 | 판별 결과 (국적, 신뢰도, 경보등급) | GearDetection | EnforcementHistory |
|
|
||||||
| - | ChinaFishing | `/china-fishing` | 분석관/상황실 | 중국어선 통합 감시 (센서 카운터, 특이운항, 월별 통계, 환적 탐지, VTS 연계) | 센서 데이터 융합 | 감시 현황, 환적 의심 목록 | DataHub, DarkVessel | RiskMap, EnforcementPlan |
|
|
||||||
|
|
||||||
### 1.5 환적 탐지 (1개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| - | TransferDetection | `features/vessel/` | 분석관 | 선박 간 근접 접촉 및 환적 의심 행위 분석 (거리/시간/속도 기준) | AIS 궤적 분석 | 환적 이벤트 목록, 의심도 점수 | DataHub, DarkVessel | EventList, EnforcementPlan |
|
|
||||||
|
|
||||||
### 1.6 위험도 평가/계획 (2개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| SFR-05 | RiskMap | `/risk-map` | 분석관/상황실 | 격자 기반 불법조업 위험도 지도 + MTIS 해양사고 통계 연계 | 탐지 결과, 사고 통계 | 히트맵, 해역별 위험도, 사고 통계 차트 | DarkVessel, GearDetection, ChinaFishing | EnforcementPlan, PatrolRoute |
|
|
||||||
| SFR-06 | EnforcementPlan | `/enforcement-plan` | 상황실 | 단속 계획 수립, 경보 연계, 우선지역 예보 | 위험도 데이터, 가용 함정 | 단속 계획 테이블, 지도 표시 | RiskMap | PatrolRoute, FleetOptimization |
|
|
||||||
|
|
||||||
### 1.7 순찰/함대 (2개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| SFR-07 | PatrolRoute | `/patrol-route` | 상황실 | AI 단일 함정 순찰 경로 추천 (웨이포인트, 거리/시간/연료 산출) | 함정 선택, 구역 조건 | 추천 경로, 웨이포인트 목록 | EnforcementPlan, RiskMap | 함정 출동 (ShipAgent) |
|
|
||||||
| SFR-08 | FleetOptimization | `/fleet-optimization` | 상황실 | 다함정 협력형 경로 최적화 (커버리지 시뮬레이션, 승인 워크플로) | 함대 목록, 구역 조건 | 최적화 결과, 커버리지 비교 | EnforcementPlan, PatrolRoute | 함정 출동 (ShipAgent) |
|
|
||||||
|
|
||||||
### 1.8 감시/지도 (2개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| - | LiveMapView | `/events` | 상황실 | 실시간 해역 감시 지도 (AIS 선박 + 이벤트 경보 + 아군 함정) | 실시간 AIS/이벤트 스트림 | 지도 마커, 이벤트 카드, 위험도 바 | 탐지 엔진 전체 | EventList, AIAlert |
|
|
||||||
| - | MapControl | `/map-control` | 상황실/관리자 | 해역 통제 관리 (해상사격 훈련구역도 No.462, 군/해경 구역) | 구역 데이터 | 훈련구역 지도, 상태 테이블 | 국립해양조사원 데이터 | LiveMapView (레이어) |
|
|
||||||
|
|
||||||
### 1.9 대시보드/모니터링 (2개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| - | Dashboard | `/dashboard` | 전체 | 종합 상황판 (KPI, 타임라인, 위험선박 TOP8, 함정 현황, 해역 위험도, 시간대별 탐지 추이) | 전 시스템 데이터 집계 | 한눈에 보는 현황 | 탐지/순찰/이벤트 전체 | 각 상세 페이지로 드릴다운 |
|
|
||||||
| SFR-12 | MonitoringDashboard | `/monitoring` | 상황실 | 모니터링 및 경보 현황판 (KPI, 24시간 추이, 탐지 유형 분포, 실시간 이벤트) | 경보/탐지 데이터 | 경보 현황 대시보드 | 탐지 엔진, EventList | AIAlert, EnforcementPlan |
|
|
||||||
|
|
||||||
### 1.10 이벤트/이력 (2개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| - | EventList | `/event-list` | 상황실/분석관 | 이벤트 전체 목록 (검색/정렬/페이징/엑셀/출력), 15건+ 이벤트 | 필터 조건 | 이벤트 테이블, 엑셀 내보내기 | 탐지 엔진, LiveMapView | EnforcementHistory, ReportManagement |
|
|
||||||
| SFR-11 | EnforcementHistory | `/enforcement-history` | 분석관 | 단속/탐지 이력 관리 (AI 매칭 검증 포함) | 검색 조건 | 이력 테이블, AI 일치 여부 | EventList, 현장 단속 | ReportManagement, Statistics |
|
|
||||||
|
|
||||||
### 1.11 현장 대응 (3개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| SFR-15 | MobileService | `/mobile-service` | 현장 단속요원 | 모바일 앱 프리뷰 (위험도/의심선박/경로추천/경보, 푸시 설정) | 모바일 위치, 푸시 설정 | 경보 수신, 지도 조회 | AIAlert, LiveMapView | 현장 단속 수행 |
|
|
||||||
| SFR-16 | ShipAgent | `/ship-agent` | 현장 단속요원 | 함정용 Agent 관리 (배포/동기화 상태, 버전 관리) | 함정 Agent 설치 | Agent 상태 조회, 동기화 | PatrolRoute, FleetOptimization | 현장 단속 수행 |
|
|
||||||
| SFR-17 | AIAlert | `/ai-alert` | 상황실/현장 | AI 탐지 알림 자동 발송 (함정/관제요원 대상, 탐지시각/좌표/유형/신뢰도 포함) | 탐지 이벤트 트리거 | 알림 발송, 수신 확인 | MonitoringDashboard, EventList | MobileService, ShipAgent |
|
|
||||||
|
|
||||||
### 1.12 통계/외부연계/보고 (3개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| SFR-13 | Statistics | `/statistics` | 상황실/분석관 | 통계/지표/성과 분석 (월별 추이, 위반유형, KPI 달성률) | 기간/유형 필터 | 차트, KPI 테이블, 보고서 | EnforcementHistory, EventList | 외부 보고, 전략 수립 |
|
|
||||||
| SFR-14 | ExternalService | `/external-service` | 관리자/외부 | 외부 서비스 제공 (해수부/수협/기상청 API/파일 연계, 비식별/익명화 정책) | 서비스 설정 | API 호출 수, 연계 상태 | Statistics, 탐지 결과 | 외부기관 |
|
|
||||||
| - | ReportManagement | `/reports` | 분석관/상황실 | 증거 관리 및 보고서 생성 (사건별 자동 패키징) | 사건 선택, 증거 파일 업로드 | 보고서 PDF, 증거 패키지 | EnforcementHistory, EventList | 검찰/외부기관 |
|
|
||||||
|
|
||||||
### 1.13 선박 상세 (1개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| - | VesselDetail | `/vessel/:id` | 분석관/상황실 | 선박 상세 정보 (AIS 데이터, 항적, 입항 이력, 선원 정보, 비허가 선박 목록) | 선박 ID/MMSI | 상세 프로필, 지도 항적 | LiveMapView, DarkVessel, EventList | EnforcementPlan, ReportManagement |
|
|
||||||
|
|
||||||
### 1.14 시스템 관리 (1개)
|
|
||||||
|
|
||||||
| SFR | 화면명 | 경로 | 사용자 | 핵심 기능 | 입력 | 출력/액션 | 업스트림 | 다운스트림 |
|
|
||||||
|---|---|---|---|---|---|---|---|---|
|
|
||||||
| - | AdminPanel | `/admin` | 관리자 | 시스템 인프라 관리 (서버 상태, CPU/메모리/디스크 모니터링) | - | 서버 상태 대시보드 | - | 시스템 안정성 보장 |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. 업무 파이프라인 (4개)
|
|
||||||
|
|
||||||
### 2.1 탐지 파이프라인
|
|
||||||
|
|
||||||
불법 조업을 탐지하고 실시간 감시하여 현장 작전까지 연결하는 핵심 파이프라인.
|
|
||||||
|
|
||||||
```
|
|
||||||
AIS/레이더/위성 신호
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌─────────┐
|
|
||||||
│ DataHub │ ← 통합데이터 허브 (VTS, AIS, V-PASS, E-Nav 수집)
|
|
||||||
└────┬────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌──────────────────────────────────────────────┐
|
|
||||||
│ AI 탐지 엔진 (AIModelManagement 관리) │
|
|
||||||
│ │
|
|
||||||
│ DarkVesselDetection ─ AIS 조작/위장/소실 │
|
|
||||||
│ GearDetection ─────── 불법 어구 탐지 │
|
|
||||||
│ ChinaFishing ──────── 중국어선 통합 감시 │
|
|
||||||
│ TransferDetection ─── 환적 행위 탐지 │
|
|
||||||
│ GearIdentification ── 어구 국적 판별 │
|
|
||||||
└──────────────┬───────────────────────────────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌──────────┐ ┌───────────────────┐
|
|
||||||
│ RiskMap │─────▶│ LiveMapView │ ← 실시간 지도 감시
|
|
||||||
└────┬─────┘ │ MonitoringDashboard│ ← 경보 현황판
|
|
||||||
│ └───────────────────┘
|
|
||||||
▼
|
|
||||||
┌──────────────────┐
|
|
||||||
│ EnforcementPlan │ ← 단속 우선지역 예보
|
|
||||||
└────────┬─────────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌──────────────┐ ┌───────────────────┐
|
|
||||||
│ PatrolRoute │─────▶│ FleetOptimization │ ← 다함정 최적화
|
|
||||||
└──────┬───────┘ └─────────┬─────────┘
|
|
||||||
│ │
|
|
||||||
▼ ▼
|
|
||||||
┌──────────┐
|
|
||||||
│ AIAlert │ ← 함정/관제 자동 알림 발송
|
|
||||||
└────┬─────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
현장 작전 (MobileService, ShipAgent)
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2.2 대응 파이프라인
|
|
||||||
|
|
||||||
AI 알림 수신 후 현장 단속, 이력 기록, 보고서 생성까지의 대응 프로세스.
|
|
||||||
|
|
||||||
```
|
|
||||||
┌──────────┐
|
|
||||||
│ AIAlert │ ← AI 탐지 알림 자동 발송
|
|
||||||
└────┬─────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌──────────────────────────────────┐
|
|
||||||
│ 현장 대응 │
|
|
||||||
│ │
|
|
||||||
│ MobileService ── 모바일 경보 수신│
|
|
||||||
│ ShipAgent ────── 함정 Agent 연동 │
|
|
||||||
└──────────────┬───────────────────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
현장 단속 수행
|
|
||||||
(정선/검문/나포/퇴거)
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌──────────────────────┐
|
|
||||||
│ EnforcementHistory │ ← 단속 이력 등록, AI 매칭 검증
|
|
||||||
└──────────┬───────────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌──────────────────────┐
|
|
||||||
│ ReportManagement │ ← 증거 패키징, 보고서 생성
|
|
||||||
└──────────┬───────────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
검찰/외부기관 (ExternalService 통해 연계)
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2.3 분석 파이프라인
|
|
||||||
|
|
||||||
축적된 데이터를 분석하여 전략적 의사결정을 지원하는 파이프라인.
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────┐
|
|
||||||
│ Statistics │ ← 월별 추이, 위반유형, KPI 달성률
|
|
||||||
└──────┬──────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌──────────┐
|
|
||||||
│ RiskMap │ ← 격자 위험도 + MTIS 해양사고 통계
|
|
||||||
└────┬─────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌──────────────┐
|
|
||||||
│ VesselDetail │ ← 개별 선박 심층 분석 (항적, 이력)
|
|
||||||
└──────┬───────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌──────────────┐
|
|
||||||
│ AIAssistant │ ← 자연어 Q&A (법령 조회, 대응 절차)
|
|
||||||
└──────┬───────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
전략 수립 (순찰 패턴, 탐지 규칙 조정)
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2.4 관리 파이프라인
|
|
||||||
|
|
||||||
시스템 접근 제어, 환경 설정, 데이터 관리, 인프라 모니터링 파이프라인.
|
|
||||||
|
|
||||||
```
|
|
||||||
┌────────────────┐
|
|
||||||
│ AccessControl │ ← RBAC 역할/권한 설정
|
|
||||||
└───────┬────────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌────────────┐
|
|
||||||
│ LoginPage │ ← SSO/GPKI/비밀번호 인증
|
|
||||||
└──────┬─────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌──────────────────────────────────────┐
|
|
||||||
│ 시스템 설정/관리 │
|
|
||||||
│ │
|
|
||||||
│ SystemConfig ──── 공통코드/환경설정 │
|
|
||||||
│ NoticeManagement ── 공지/배너/팝업 │
|
|
||||||
│ DataHub ────────── 데이터 수집 관리 │
|
|
||||||
│ AdminPanel ────── 서버/인프라 모니터 │
|
|
||||||
└──────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. 사용자 역할별 페이지 접근 매트릭스
|
|
||||||
|
|
||||||
시스템에 정의된 5개 역할(LoginPage의 `DEMO_ACCOUNTS` 및 AccessControl의 `ROLES` 기반)에 대한 페이지 접근 권한.
|
|
||||||
|
|
||||||
### 3.1 역할 정의
|
|
||||||
|
|
||||||
| 역할 | 코드 | 설명 | 인원(시뮬) |
|
|
||||||
|---|---|---|---|
|
|
||||||
| 시스템 관리자 | `ADMIN` | 전체 시스템 관리 권한 | 3명 |
|
|
||||||
| 상황실 운영자 | `OPERATOR` | 상황판, 통계, 경보 운영 | 12명 |
|
|
||||||
| 분석 담당자 | `ANALYST` | AI 모델, 통계, 항적 분석 | 8명 |
|
|
||||||
| 현장 단속요원 | `FIELD` | 함정 Agent, 모바일 대응 | 45명 |
|
|
||||||
| 유관기관 열람자 | `VIEWER` | 공유 대시보드 열람 | 6명 |
|
|
||||||
|
|
||||||
### 3.2 접근 매트릭스
|
|
||||||
|
|
||||||
| 페이지 | ADMIN | OPERATOR | ANALYST | FIELD | VIEWER |
|
|
||||||
|---|---|---|---|---|---|
|
|
||||||
| **인증/관리** | | | | | |
|
|
||||||
| LoginPage | O | O | O | O | O |
|
|
||||||
| AccessControl | O | - | - | - | - |
|
|
||||||
| SystemConfig | O | - | - | - | - |
|
|
||||||
| NoticeManagement | O | - | - | - | - |
|
|
||||||
| AdminPanel | O | - | - | - | - |
|
|
||||||
| **데이터/AI** | | | | | |
|
|
||||||
| DataHub | O | - | - | - | - |
|
|
||||||
| AIModelManagement | O | - | O | - | - |
|
|
||||||
| MLOpsPage | O | - | O | - | - |
|
|
||||||
| AIAssistant | O | O | O | - | - |
|
|
||||||
| **탐지** | | | | | |
|
|
||||||
| DarkVesselDetection | O | - | O | - | - |
|
|
||||||
| GearDetection | O | - | O | - | - |
|
|
||||||
| ChinaFishing | O | O | O | - | - |
|
|
||||||
| TransferDetection | O | - | O | - | - |
|
|
||||||
| **위험도/계획** | | | | | |
|
|
||||||
| RiskMap | O | O | O | - | - |
|
|
||||||
| EnforcementPlan | O | O | - | - | - |
|
|
||||||
| **순찰** | | | | | |
|
|
||||||
| PatrolRoute | O | O | - | - | - |
|
|
||||||
| FleetOptimization | O | O | - | - | - |
|
|
||||||
| **감시/지도** | | | | | |
|
|
||||||
| LiveMapView | O | O | O | - | - |
|
|
||||||
| MapControl | O | O | - | - | - |
|
|
||||||
| **대시보드** | | | | | |
|
|
||||||
| Dashboard | O | O | O | O | O |
|
|
||||||
| MonitoringDashboard | O | O | - | - | - |
|
|
||||||
| **이벤트/이력** | | | | | |
|
|
||||||
| EventList | O | O | O | O | - |
|
|
||||||
| EnforcementHistory | O | - | O | - | - |
|
|
||||||
| **현장 대응** | | | | | |
|
|
||||||
| MobileService | O | - | - | O | - |
|
|
||||||
| ShipAgent | O | - | - | O | - |
|
|
||||||
| AIAlert | O | O | - | O | - |
|
|
||||||
| **통계/보고** | | | | | |
|
|
||||||
| Statistics | O | O | O | - | - |
|
|
||||||
| ExternalService | O | - | - | - | O |
|
|
||||||
| ReportManagement | O | O | O | - | - |
|
|
||||||
| **선박 상세** | | | | | |
|
|
||||||
| VesselDetail | O | O | O | - | - |
|
|
||||||
|
|
||||||
### 3.3 역할별 요약
|
|
||||||
|
|
||||||
| 역할 | 접근 가능 페이지 | 페이지 수 |
|
|
||||||
|---|---|---|
|
|
||||||
| **시스템 관리자** (ADMIN) | 전체 페이지 | 31 |
|
|
||||||
| **상황실 운영자** (OPERATOR) | Dashboard, MonitoringDashboard, LiveMapView, MapControl, EventList, EnforcementPlan, PatrolRoute, FleetOptimization, ChinaFishing, RiskMap, Statistics, ReportManagement, AIAssistant, AIAlert, VesselDetail | 15 |
|
|
||||||
| **분석 담당자** (ANALYST) | Dashboard, DarkVesselDetection, GearDetection, ChinaFishing, TransferDetection, RiskMap, LiveMapView, EventList, EnforcementHistory, Statistics, ReportManagement, VesselDetail, AIAssistant, AIModelManagement, MLOpsPage | 15 |
|
|
||||||
| **현장 단속요원** (FIELD) | Dashboard, MobileService, ShipAgent, AIAlert, EventList | 5 |
|
|
||||||
| **유관기관 열람자** (VIEWER) | Dashboard, ExternalService | 2 |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. 페이지 간 데이터 흐름 요약
|
|
||||||
|
|
||||||
```
|
|
||||||
┌──────────────────┐
|
|
||||||
│ LoginPage │
|
|
||||||
│ (인증 게이트) │
|
|
||||||
└────────┬─────────┘
|
|
||||||
│
|
|
||||||
┌────────────────────┬┴──────────────────┐
|
|
||||||
▼ ▼ ▼
|
|
||||||
┌──────────────┐ ┌─────────────────┐ ┌─────────────┐
|
|
||||||
│ 관리 파이프라인│ │ 탐지 파이프라인 │ │ 현장 대응 │
|
|
||||||
│ │ │ │ │ │
|
|
||||||
│ AccessControl│ │ DataHub │ │ MobileSvc │
|
|
||||||
│ SystemConfig │ │ ↓ │ │ ShipAgent │
|
|
||||||
│ NoticeManage │ │ AI탐지엔진 │ │ AIAlert │
|
|
||||||
│ DataHub │ │ (DV/Gear/CN/TR)│ └──────┬──────┘
|
|
||||||
│ AdminPanel │ │ ↓ │ │
|
|
||||||
└──────────────┘ │ RiskMap │ │
|
|
||||||
│ ↓ │ ▼
|
|
||||||
│ EnforcementPlan │ ┌──────────────┐
|
|
||||||
│ ↓ │ │ 대응 파이프라인│
|
|
||||||
│ PatrolRoute │ │ │
|
|
||||||
│ FleetOptim │ │ Enforcement │
|
|
||||||
│ ↓ │ │ History │
|
|
||||||
│ LiveMapView │ │ ReportManage │
|
|
||||||
│ Monitoring │ │ ExternalSvc │
|
|
||||||
└────────┬────────┘ └──────────────┘
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
┌─────────────────┐
|
|
||||||
│ 분석 파이프라인 │
|
|
||||||
│ │
|
|
||||||
│ Statistics │
|
|
||||||
│ VesselDetail │
|
|
||||||
│ AIAssistant │
|
|
||||||
└─────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. 미할당 SFR 참고
|
|
||||||
|
|
||||||
현재 라우트에서 확인되는 SFR 번호 기준, 아래 기능은 기존 페이지에 통합되어 있다:
|
|
||||||
|
|
||||||
- **Dashboard**: SFR 번호 미부여, 종합 상황판 (기존 유지)
|
|
||||||
- **LiveMapView**: SFR 번호 미부여, 실시간 감시 지도
|
|
||||||
- **EventList**: SFR-02 공통 컴포넌트 적용 대상으로 분류
|
|
||||||
- **MapControl**: SFR 번호 미부여, 해역 통제 관리
|
|
||||||
- **VesselDetail**: SFR 번호 미부여, 선박 상세
|
|
||||||
- **ReportManagement**: SFR 번호 미부여, 증거/보고서 관리
|
|
||||||
- **AdminPanel**: SFR 번호 미부여, 인프라 관리
|
|
||||||
- **GearIdentification**: ChinaFishing 내 서브 컴포넌트
|
|
||||||
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
Load Diff
@ -1,7 +1,8 @@
|
|||||||
# SFR 요구사항별 화면 사용 가이드
|
# SFR 요구사항별 화면 사용 가이드
|
||||||
|
|
||||||
> **문서 작성일:** 2026-04-06
|
> **문서 작성일:** 2026-04-06
|
||||||
> **시스템 버전:** v0.1.0 (프로토타입)
|
> **최종 업데이트:** 2026-04-17 (2026-04-17 릴리즈 기준)
|
||||||
|
> **시스템 버전:** 운영 배포 (rocky-211 + redis-211)
|
||||||
> **다국어:** 한국어/영어 전환 지원 (헤더 우측 EN/한국어 버튼)
|
> **다국어:** 한국어/영어 전환 지원 (헤더 우측 EN/한국어 버튼)
|
||||||
> **테마:** 다크/라이트 전환 지원 (헤더 우측 해/달 아이콘 버튼)
|
> **테마:** 다크/라이트 전환 지원 (헤더 우측 해/달 아이콘 버튼)
|
||||||
|
|
||||||
@ -11,7 +12,12 @@
|
|||||||
|
|
||||||
이 문서는 **KCG AI 모니터링 시스템**의 각 SFR(소프트웨어 기능 요구사항)이 화면에서 어떻게 구현되어 있는지를 **비개발자**(일반 사용자, 사업 PM, 산출물 작성자)가 이해할 수 있도록 정리한 가이드입니다.
|
이 문서는 **KCG AI 모니터링 시스템**의 각 SFR(소프트웨어 기능 요구사항)이 화면에서 어떻게 구현되어 있는지를 **비개발자**(일반 사용자, 사업 PM, 산출물 작성자)가 이해할 수 있도록 정리한 가이드입니다.
|
||||||
|
|
||||||
현재 시스템은 **프로토타입 단계(v0.1.0)**로, 모든 SFR의 UI가 완성되어 있으나 백엔드 서버 연동은 아직 이루어지지 않았습니다. 화면에 표시되는 데이터는 시연용 샘플 데이터입니다.
|
### 시스템 현황 (2026-04-17 기준)
|
||||||
|
- **프런트엔드·백엔드·분석엔진(prediction) 운영 배포 완료** — 자체 JWT 인증 + 트리 기반 RBAC + 감사 로그 + 65+ API
|
||||||
|
- **AI 분석 엔진(prediction)**: 5분 주기로 AIS 원천 데이터(snpdb)를 분석하여 결과를 `kcgaidb` 에 자동 저장 (14 알고리즘 + DAR-03 G-01~G-06)
|
||||||
|
- **실시간 연동 화면**: Dashboard / MonitoringDashboard / ChinaFishing / DarkVesselDetection / GearDetection / EnforcementHistory / EventList / AIAlert / Statistics / AccessControl / PermissionsPanel / Audit 등 **15+ 화면이 실 API + prediction 결과를 실시간으로 표시**
|
||||||
|
- **Mock 화면**: DataHub / AIModelManagement / RiskMap / PatrolRoute / FleetOptimization / ExternalService / ShipAgent / MLOpsPage / AIAssistant 는 UI 완성, 백엔드/AI 엔진 연동은 단계적 추가 중
|
||||||
|
- **자세한 추적 매트릭스**: `docs/sfr-traceability.md` v3.0 참조
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -55,17 +61,18 @@
|
|||||||
- 역할별 데모 계정 선택 (ADMIN, OPERATOR, ANALYST, FIELD, VIEWER)
|
- 역할별 데모 계정 선택 (ADMIN, OPERATOR, ANALYST, FIELD, VIEWER)
|
||||||
- 로그인 후 역할에 따른 메뉴 접근 제어
|
- 로그인 후 역할에 따른 메뉴 접근 제어
|
||||||
|
|
||||||
**구현 완료:**
|
**구현 완료 (2026-04-17 기준):**
|
||||||
- ✅ 로그인 화면 UI 및 데모 계정 5종 로그인 기능
|
- ✅ 로그인 화면 UI + 자체 ID/PW 인증 + JWT 쿠키 세션 + 역할별 데모 계정 5종 실 로그인
|
||||||
- ✅ 역할 기반 세션 유지 및 메뉴 접근 제어
|
- ✅ 비밀번호 정책(9자 이상 영문+숫자+특수) + 5회 실패 30분 잠금 + BCrypt 해시
|
||||||
|
- ✅ 트리 기반 RBAC (47 리소스 노드, Level 0 13개 + Level 1 32개, 5 operation) + Caffeine 10분 TTL
|
||||||
|
- ✅ 모든 로그인 시도 감사 로그 저장 및 조회 (로그인 이력 화면)
|
||||||
|
- ✅ 역할 기반 세션 유지 및 메뉴 접근 제어 (사이드바/라우트 가드)
|
||||||
|
|
||||||
**향후 구현 예정:**
|
**향후 구현 예정 (기업 환경 연동):**
|
||||||
- 🔲 SSO(Single Sign-On) 연동
|
- 🔲 SSO(해양경찰 통합인증) 연동
|
||||||
- 🔲 GPKI(정부 공인인증서) 인증 연동
|
- 🔲 GPKI(정부 공인인증서) 인증 연동
|
||||||
- 🔲 실제 사용자 DB 연동 및 비밀번호 암호화
|
- 🔲 공무원증 기반 인증 연동
|
||||||
|
- 🔲 인사 시스템 연동 역할 자동 부여
|
||||||
**보완 필요:**
|
|
||||||
- ⚠️ 현재 데모 계정은 하드코딩되어 있으며, 운영 환경에서는 실제 인증 체계로 대체 필요
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -83,16 +90,17 @@
|
|||||||
- 역할별 접근 가능 메뉴 및 기능 권한 설정
|
- 역할별 접근 가능 메뉴 및 기능 권한 설정
|
||||||
- 사용자 목록 조회 및 역할 할당
|
- 사용자 목록 조회 및 역할 할당
|
||||||
|
|
||||||
**구현 완료:**
|
**구현 완료 (2026-04-17 기준):**
|
||||||
- ✅ RBAC 5역할 체계 UI 및 역할별 권한 매트릭스 표시
|
- ✅ 트리 기반 RBAC 실 운영 — 47 리소스 노드 × 5 operation (READ/CREATE/UPDATE/DELETE/EXPORT) × 다중 역할 OR 합집합
|
||||||
- ✅ 권한 설정 화면 레이아웃 및 인터랙션
|
- ✅ 역할별 권한 매트릭스 시각화 (셀 클릭 Y → N → 상속 사이클)
|
||||||
|
- ✅ 부모 READ 거부 시 자식 강제 거부, 상속 표시
|
||||||
|
- ✅ 역할 CRUD (admin:role-management) + 권한 매트릭스 갱신 (admin:permission-management)
|
||||||
|
- ✅ 사용자-역할 할당 다이얼로그 (admin:user-management)
|
||||||
|
- ✅ 모든 권한 변경은 `auth_audit_log` 에 자동 기록 (ROLE_CREATE/UPDATE/DELETE/PERM_UPDATE/USER_ROLE_ASSIGN)
|
||||||
|
|
||||||
**향후 구현 예정:**
|
**향후 구현 예정:**
|
||||||
- 🔲 실제 사용자 DB 연동을 통한 권한 CRUD
|
- 🔲 권한 변경 이력 UI (auth_audit_log 조회는 현재 별도 화면)
|
||||||
- 🔲 감사 로그(권한 변경 이력) 기록
|
- 🔲 역할 템플릿 복제 기능
|
||||||
|
|
||||||
**보완 필요:**
|
|
||||||
- ⚠️ 현재 화면의 데이터는 샘플이며 실제 저장/반영되지 않음
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -369,17 +377,18 @@ AIS(선박자동식별장치) 신호를 의도적으로 끈 의심 선박(Dark V
|
|||||||
- 의심 선박 상세 프로필 및 이동 궤적 조회
|
- 의심 선박 상세 프로필 및 이동 궤적 조회
|
||||||
- 위험도 등급별 분류 표시
|
- 위험도 등급별 분류 표시
|
||||||
|
|
||||||
**구현 완료:**
|
**구현 완료 (2026-04-17 기준):**
|
||||||
- ✅ 의심 선박 7척 목록/지도 시각화
|
- ✅ **AI 분석 엔진(prediction) 5분 주기 실시간 탐지 결과 표시** — snpdb AIS 원천 데이터 기반
|
||||||
- ✅ 5가지 행동 패턴 분석 결과 UI
|
- ✅ Dark Vessel 11패턴 기반 0~100점 연속 점수 + 4단계 tier(CRITICAL≥70 / HIGH≥50 / WATCH≥30 / NONE)
|
||||||
|
- ✅ DarkDetailPanel — 선박 선택 시 ScoreBreakdown으로 P1~P11 각 패턴별 기여도 표시
|
||||||
|
- ✅ 지도 기반 실시간 위치 + tier별 색상 구분 (라이트/다크 모드 대응)
|
||||||
|
- ✅ 최근 1시간 / 중국 선박(MMSI 412*) 필터, MMSI/선박명/패턴 검색
|
||||||
|
- ✅ 특이운항 미니맵 (24h 궤적 + DARK/SPOOFING/TRANSSHIP/GEAR_VIOLATION/HIGH_RISK 구간 병합 하이라이트)
|
||||||
|
|
||||||
**향후 구현 예정:**
|
**향후 구현 예정:**
|
||||||
- 🔲 AI Dark Vessel 탐지 엔진 연동
|
- 🔲 spoofing_score 산출 재설계 (중국 MID 412 선박 전원 0 수렴 이슈, BD-09 필터 + teleport 25kn 임계 재검토)
|
||||||
- 🔲 실시간 AIS 데이터 분석 연동
|
|
||||||
- 🔲 SAR(위성영상) 기반 탐지 연동
|
- 🔲 SAR(위성영상) 기반 탐지 연동
|
||||||
|
- 🔲 과거 이력 차트 (현재는 최근 24h 중심)
|
||||||
**보완 필요:**
|
|
||||||
- ⚠️ 현재 탐지 결과는 샘플 데이터이며, AI 탐지 엔진 연동 후 실시간 탐지 결과로 교체 필요
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -398,16 +407,17 @@ AIS(선박자동식별장치) 신호를 의도적으로 끈 의심 선박(Dark V
|
|||||||
- 해역별 중국 어선 밀집도 분석
|
- 해역별 중국 어선 밀집도 분석
|
||||||
- 시계열 활동 패턴 분석
|
- 시계열 활동 패턴 분석
|
||||||
|
|
||||||
**구현 완료:**
|
**구현 완료 (2026-04-17 기준):**
|
||||||
- ✅ 중국 어선 분석 종합 대시보드 UI
|
- ✅ **3개 탭(AI 감시 대시보드 / 환적접촉탐지 / 어구·어망 판별) 전부 실데이터 연동** — `/api/analysis/*` 경유, MMSI prefix `412` 고정
|
||||||
- ✅ 지도 기반 활동 현황 시각화
|
- ✅ 중국 선박 전체 분석 결과 실시간 그리드 (최근 1h, 위험도순 상위 200건)
|
||||||
|
- ✅ 특이운항 판별 — riskScore ≥ 40 상위 목록 + 선박 클릭 시 24h 궤적 미니맵 + 판별 구간 패널
|
||||||
|
- ✅ 해역별 통항량 + 안전도 분석 (종합 위험/안전 지수) + 위험도 도넛
|
||||||
|
- ✅ 자동탐지 결과(어구 판별 탭) row 클릭 시 상단 입력 폼 자동 프리필
|
||||||
|
|
||||||
**향후 구현 예정:**
|
**향후 구현 예정:**
|
||||||
- 🔲 AI 탐지 엔진 연동 (Dark Vessel + 어구 탐지 통합)
|
- 🔲 관심영역 / VIIRS 위성영상 / 기상 예보 / VTS연계 (현재 "데모 데이터" 배지)
|
||||||
- 🔲 실시간 데이터 기반 분석 갱신
|
- 🔲 비허가 / 제재 / 관심 선박 탭 데이터 소스 연동 (현재 "준비중" 배지)
|
||||||
|
- 🔲 월별 집계 API 연동 (현재 통계 탭 "준비중")
|
||||||
**보완 필요:**
|
|
||||||
- ⚠️ 현재 분석 데이터는 샘플이며, 실제 탐지 엔진 연동 필요
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -426,17 +436,17 @@ AIS(선박자동식별장치) 신호를 의도적으로 끈 의심 선박(Dark V
|
|||||||
- 탐지 결과 상세 정보 (위치, 크기, 어구 유형, 위험도)
|
- 탐지 결과 상세 정보 (위치, 크기, 어구 유형, 위험도)
|
||||||
- 탐지 이미지 확인
|
- 탐지 이미지 확인
|
||||||
|
|
||||||
**구현 완료:**
|
**구현 완료 (2026-04-17 기준):**
|
||||||
- ✅ 어구 6건 탐지 결과 목록/지도 UI
|
- ✅ **DAR-03 G-01~G-06 실시간 탐지 결과** — prediction 5분 주기 + 한중어업협정 906척 레지스트리(V029) 매칭 53%+
|
||||||
- ✅ 어구 식별 결정트리 시각화
|
- ✅ G코드별 탐지: G-01(수역-어구 불일치) / G-02(금어기) / G-03(미등록 어구) / G-04(MMSI cycling) / G-05(고정어구 drift) / G-06(쌍끌이 — STRONG/PROBABLE/SUSPECT tier)
|
||||||
|
- ✅ 어구 그룹 지도 (ZONE_I~IV 폴리곤 + GeoJsonLayer + IconLayer) + 세부 필터 패널(해역/판정/위험도/모선 상태/허가/멤버 수) + localStorage 영속화
|
||||||
|
- ✅ GearDetailPanel — 후보 클릭 → 점수 근거(관측 7종 + 보정 3종) + 모선 확정/제외 버튼
|
||||||
|
- ✅ 24h 궤적 리플레이 (GearReplayController + TripsLayer, SPEED_FACTOR=2880, 24h→30s)
|
||||||
|
- ✅ 어구/어망 판별 화면 — 허가코드/어구물리특성/발견위치 입력 → 국적 판별(한/중/미확인) + 판별 근거·경고·AI 탐지 Rule·교차 검증 파이프라인
|
||||||
|
|
||||||
**향후 구현 예정:**
|
**향후 구현 예정:**
|
||||||
- 🔲 AI 어구 탐지 모델 연동 (영상 분석 기반)
|
- 🔲 영상(CCTV/SAR) 기반 어구 자동 분류
|
||||||
- 🔲 실시간 CCTV/SAR 영상 분석 연동
|
- 🔲 한·중 어구 5종 구조 비교 이미지 라이브러리 확장
|
||||||
- 🔲 탐지 결과 자동 분류 및 알림
|
|
||||||
|
|
||||||
**보완 필요:**
|
|
||||||
- ⚠️ 현재 탐지 결과는 샘플 데이터이며, AI 탐지 모델 연동 후 실제 탐지 결과로 교체 필요
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -455,17 +465,17 @@ AIS(선박자동식별장치) 신호를 의도적으로 끈 의심 선박(Dark V
|
|||||||
- 이력 상세 정보 조회 및 검색/필터
|
- 이력 상세 정보 조회 및 검색/필터
|
||||||
- 이력 데이터 엑셀 내보내기
|
- 이력 데이터 엑셀 내보내기
|
||||||
|
|
||||||
**구현 완료:**
|
**구현 완료 (2026-04-17 기준):**
|
||||||
- ✅ 단속 이력 6건 목록/상세 UI
|
- ✅ **실시간 이벤트 조회** — `/api/events` 페이징/필터/확인(ACK)/상태 변경
|
||||||
- ✅ AI 매칭 검증 결과 표시
|
- ✅ **단속 이력 CRUD** — `/api/enforcement/records` (GET/POST/PATCH) + ENF-yyyyMMdd-NNNN UID 자동 발급
|
||||||
|
- ✅ 이벤트 발생 → 확인 → 단속 등록 → 오탐 처리 워크플로우 (액션 버튼 4종)
|
||||||
|
- ✅ 모든 쓰기 액션 `auth_audit_log` 자동 기록 (ENFORCEMENT_CREATE / ENFORCEMENT_UPDATE / ACK_EVENT / UPDATE_EVENT_STATUS)
|
||||||
|
- ✅ KPI 카운트 (CRITICAL/HIGH/MEDIUM/LOW) + 엑셀 내보내기 + 출력
|
||||||
|
- ✅ 단속 완료 시 prediction_events.status 자동 RESOLVED 갱신
|
||||||
|
|
||||||
**향후 구현 예정:**
|
**향후 구현 예정:**
|
||||||
- 🔲 단속 이력 DB 연동 (조회/등록/수정)
|
- 🔲 증거 파일(사진/영상) 업로드 서버 연동
|
||||||
- 🔲 AI 매칭 검증 엔진 연동
|
- 🔲 AI 매칭 검증 정량 지표 (탐지↔단속 confusion matrix)
|
||||||
- 🔲 탐지-단속 연계 자동 분석
|
|
||||||
|
|
||||||
**보완 필요:**
|
|
||||||
- ⚠️ 현재 이력 데이터는 샘플이며, DB 연동 후 실제 단속 데이터로 교체 필요
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -487,17 +497,15 @@ AIS(선박자동식별장치) 신호를 의도적으로 끈 의심 선박(Dark V
|
|||||||
- 함정 배치 현황 요약
|
- 함정 배치 현황 요약
|
||||||
- 실시간 경보 알림 표시
|
- 실시간 경보 알림 표시
|
||||||
|
|
||||||
**구현 완료:**
|
**구현 완료 (2026-04-17 기준):**
|
||||||
- ✅ KPI 카드 + 히트맵 + 타임라인 + 함정 현황 통합 대시보드 UI
|
- ✅ **실시간 KPI 카드** — `/api/stats/kpi` 연동, prediction 5분 주기 결과 기반
|
||||||
- ✅ 반응형 레이아웃 (화면 크기에 따른 자동 배치)
|
- ✅ 실시간 상황 타임라인 — 최근 `prediction_events` 스트림 (긴급/경고 카운트 실시간)
|
||||||
|
- ✅ 함정 배치 현황 + 경보 알림 + 순찰 현황 통합
|
||||||
|
- ✅ 라이트/다크 모드 반응형 (2026-04-17 PR #C 하드코딩 색상 제거)
|
||||||
|
|
||||||
**향후 구현 예정:**
|
**향후 구현 예정:**
|
||||||
- 🔲 실시간 데이터 연동 (WebSocket 등)
|
- 🔲 WebSocket 기반 실시간 push (현재는 주기 polling)
|
||||||
- 🔲 KPI 수치 실시간 갱신
|
- 🔲 맞춤형 대시보드 레이아웃 (드래그/리사이즈)
|
||||||
- 🔲 히트맵/타임라인 실시간 업데이트
|
|
||||||
|
|
||||||
**보완 필요:**
|
|
||||||
- ⚠️ 현재 모든 수치는 샘플 데이터이며, 실시간 연동 후 정확한 운영 데이터로 교체 필요
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -516,17 +524,15 @@ AIS(선박자동식별장치) 신호를 의도적으로 끈 의심 선박(Dark V
|
|||||||
- 경보 처리(확인/대응/종결) 워크플로우
|
- 경보 처리(확인/대응/종결) 워크플로우
|
||||||
- 경보 발생 이력 조회
|
- 경보 발생 이력 조회
|
||||||
|
|
||||||
**구현 완료:**
|
**구현 완료 (2026-04-17 기준):**
|
||||||
- ✅ 경보 등급별 현황판 UI
|
- ✅ **실시간 경보 수신** — `/api/events` + `/api/alerts` 실 API 연동, prediction event_generator 4룰 기반
|
||||||
- ✅ 경보 목록/상세 조회 화면
|
- ✅ 경보 등급별(CRITICAL/HIGH/MEDIUM/LOW) 현황 + KPI 카운트
|
||||||
|
- ✅ 경보 처리 워크플로우 — 확인(ACK) → 단속 등록 → 오탐 처리 (DB 저장 + `auth_audit_log` 기록)
|
||||||
|
- ✅ 시스템 상태 패널 (백엔드/AI 분석 엔진/DB 상태 실시간 표시, 30초 자동 갱신)
|
||||||
|
|
||||||
**향후 구현 예정:**
|
**향후 구현 예정:**
|
||||||
- 🔲 실시간 경보 수신 연동
|
- 🔲 경보 자동 에스컬레이션 정책
|
||||||
- 🔲 경보 처리 워크플로우 DB 연동
|
- 🔲 경보 룰 커스터마이즈 UI
|
||||||
- 🔲 경보 자동 에스컬레이션
|
|
||||||
|
|
||||||
**보완 필요:**
|
|
||||||
- ⚠️ 현재 경보 데이터는 샘플이며, 실시간 연동 후 실제 경보 데이터로 교체 필요
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -545,17 +551,15 @@ AIS(선박자동식별장치) 신호를 의도적으로 끈 의심 선박(Dark V
|
|||||||
- 선박/이벤트 클릭 시 상세 정보 팝업
|
- 선박/이벤트 클릭 시 상세 정보 팝업
|
||||||
- 지도 확대/축소 및 해역 필터링
|
- 지도 확대/축소 및 해역 필터링
|
||||||
|
|
||||||
**구현 완료:**
|
**구현 완료 (2026-04-17 기준):**
|
||||||
- ✅ LiveMap 기반 실시간 감시 지도 UI
|
- ✅ **실시간 선박 위치 + 이벤트 마커** — prediction 5분 주기 분석 결과(`vessel_analysis_results.lat/lon`) + `prediction_events` 기반
|
||||||
- ✅ 선박/이벤트 마커 및 팝업 인터랙션
|
- ✅ MapLibre GL 5 + deck.gl 9 GPU 렌더링 (40만척+ 지원)
|
||||||
|
- ✅ 위험도별 마커 opacity/radius 차등 (2026-04-17 `ALERT_LEVEL_MARKER_OPACITY/RADIUS` 헬퍼 적용)
|
||||||
|
- ✅ 이벤트 상세 패널 + 고위험 사건 실시간 알림 (LIVE 표시)
|
||||||
|
|
||||||
**향후 구현 예정:**
|
**향후 구현 예정:**
|
||||||
- 🔲 실시간 AIS/VMS 데이터 연동
|
- 🔲 WebSocket 기반 실시간 push (현재는 주기 갱신)
|
||||||
- 🔲 WebSocket 기반 실시간 위치 업데이트
|
- 🔲 SAR 위성영상 오버레이
|
||||||
- 🔲 이벤트 발생 시 자동 지도 포커스 이동
|
|
||||||
|
|
||||||
**보완 필요:**
|
|
||||||
- ⚠️ 현재 선박 위치는 샘플 데이터이며, 실시간 데이터 연동 필요
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -601,17 +605,15 @@ AIS(선박자동식별장치) 신호를 의도적으로 끈 의심 선박(Dark V
|
|||||||
- 기간별/해역별/유형별 필터링
|
- 기간별/해역별/유형별 필터링
|
||||||
- 통계 데이터 엑셀 내보내기 및 인쇄
|
- 통계 데이터 엑셀 내보내기 및 인쇄
|
||||||
|
|
||||||
**구현 완료:**
|
**구현 완료 (2026-04-17 기준):**
|
||||||
- ✅ 월별 추이 차트 및 KPI 5개 대시보드 UI
|
- ✅ **실시간 통계 데이터** — `/api/stats/monthly|daily|hourly` 연동, prediction `stats_aggregator` 집계 결과 기반
|
||||||
- ✅ 필터링 및 엑셀 내보내기/인쇄 기능
|
- ✅ 월별/일별/시간별 추이 그래프 (ECharts, KST 기준)
|
||||||
|
- ✅ 해역별/유형별 필터링 + 엑셀 내보내기/인쇄
|
||||||
|
- ✅ 감사·보안 통계 — `/api/admin/stats/audit|access|login` (2026-04-17 AdminStatsService 계층 분리)
|
||||||
|
|
||||||
**향후 구현 예정:**
|
**향후 구현 예정:**
|
||||||
- 🔲 통계 데이터 DB 연동
|
- 🔲 보고서 자동 생성 (PDF/HWP) — 현재는 UI만
|
||||||
- 🔲 실제 운영 데이터 기반 KPI 자동 산출
|
- 🔲 맞춤형 지표 대시보드 설정
|
||||||
- 🔲 맞춤형 보고서 생성 기능
|
|
||||||
|
|
||||||
**보완 필요:**
|
|
||||||
- ⚠️ 현재 KPI 수치(정확도 93.2%, 오탐율 7.8% 등)는 샘플 데이터이며, 실제 운영 데이터 기반으로 교체 필요
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -743,17 +745,15 @@ AI가 분석한 결과를 기반으로 관련 담당자에게 알림을 발송
|
|||||||
- 알림 수신자 설정 및 발송
|
- 알림 수신자 설정 및 발송
|
||||||
- 알림 전송 결과(성공/실패) 확인
|
- 알림 전송 결과(성공/실패) 확인
|
||||||
|
|
||||||
**구현 완료:**
|
**구현 완료 (2026-04-17 기준):**
|
||||||
- ✅ 알림 5건 전송 현황 UI
|
- ✅ **AI 알림 이력 실 API 조회** — `/api/alerts` 연동 (2026-04-17 AlertService 계층 분리)
|
||||||
- ✅ 알림 유형별 분류 및 상세 조회
|
- ✅ prediction `alert_dispatcher` 모듈이 event_generator 결과 기반으로 `prediction_alerts` 테이블에 자동 기록
|
||||||
|
- ✅ 알림 유형별 분류 + DataTable 검색/정렬/페이징/엑셀 내보내기
|
||||||
|
|
||||||
**향후 구현 예정:**
|
**향후 구현 예정:**
|
||||||
- 🔲 실제 알림 발송 기능 구현 (SMS, 이메일, Push 등)
|
- 🔲 실제 SMS/푸시 발송 게이트웨이 연동 (현재는 DB 기록만)
|
||||||
- 🔲 AI 분석 결과 기반 자동 알림 트리거
|
- 🔲 알림 템플릿 엔진
|
||||||
- 🔲 알림 발송 이력 DB 연동
|
- 🔲 수신자 그룹 관리
|
||||||
|
|
||||||
**보완 필요:**
|
|
||||||
- ⚠️ 현재 알림은 실제 발송되지 않으며, 발송 채널(SMS/이메일/Push) 연동 필요
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -857,15 +857,27 @@ AI에게 질문하고 답변을 받을 수 있는 대화형(채팅) 인터페이
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 부록: 현재 시스템 상태 요약
|
## 부록: 현재 시스템 상태 요약 (2026-04-17 기준)
|
||||||
|
|
||||||
| 항목 | 상태 |
|
| 항목 | 상태 |
|
||||||
|------|------|
|
|------|------|
|
||||||
| UI 구현 | 모든 SFR 완료 |
|
| UI 구현 | 모든 SFR 완료 |
|
||||||
| 백엔드 연동 | 미구현 (전체) |
|
| **백엔드 연동** | **15+ 화면 실 API 연동 완료** (Auth/RBAC/Audit/Events/Alerts/Enforcement/Stats/Analysis/Master 등 65+ API) |
|
||||||
| 데이터 | 시연용 샘플 데이터 |
|
| **AI 분석 엔진 (prediction)** | **운영 중** — 5분 주기로 snpdb 분석 → kcgaidb 저장, 14 알고리즘 + DAR-03 G-01~G-06 |
|
||||||
| 인증 체계 | 데모 계정 5종 (SSO/GPKI 미연동) |
|
| **데이터** | 실 AIS 원천(snpdb) + prediction 분석 결과 + 자체 DB 저장 데이터 (일부 화면은 여전히 Mock) |
|
||||||
| 실시간 기능 | 미구현 (WebSocket 등 미연동) |
|
| **인증 체계** | 자체 ID/PW + JWT + 트리 기반 RBAC + 5회 실패 잠금 (SSO/GPKI 미연동) |
|
||||||
| AI 모델 | 미연동 (탐지/예측/최적화 등) |
|
| **실시간 기능** | prediction 5분 주기 + 프론트 30초 폴링 (WebSocket push 미도입) |
|
||||||
| 외부 시스템 | 미연동 (GICOMS, MTIS 등) |
|
| **AI 모델** | Dark Vessel 11패턴 / DAR-03 G-01~G-06 / 환적 5단계 / 경량 risk 등 14종 운영 중 (일부 모델은 Mock 계획 단계) |
|
||||||
| 모바일 앱 | 웹 시뮬레이션만 제공 (네이티브 앱 미개발) |
|
| **외부 시스템** | snpdb / gc-signal-batch 연동 완료. 유관기관 OpenAPI(GICOMS/MTIS 등)는 미연동 |
|
||||||
|
| **디자인 시스템** | `design-system.html` 쇼케이스 SSOT 전영역 준수, 라이트/다크 모드 완전 대응 |
|
||||||
|
| **다국어** | 한/영 alert/confirm/aria-label 전수 치환 완료 (JSX placeholder 35건은 후속 과제) |
|
||||||
|
| **모바일 앱** | 웹 시뮬레이션만 제공 (PWA/네이티브 앱 미개발) |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 변경 이력
|
||||||
|
|
||||||
|
| 일자 | 내용 |
|
||||||
|
|------|------|
|
||||||
|
| 2026-04-06 | 초기 작성 (프론트엔드 프로토타입 v0.1.0 기준) |
|
||||||
|
| 2026-04-17 | 헤더 + SFR-01/02/09/10/11/12/13/17 주요 섹션 업데이트. 실 API 연동 / prediction 운영 상태 / 2026-04-17 PR #A/#B/#C 반영 |
|
||||||
|
|||||||
불러오는 중...
Reference in New Issue
Block a user