diff --git a/frontend/src/features/dashboard/Dashboard.tsx b/frontend/src/features/dashboard/Dashboard.tsx index ce146b7..1423dfb 100644 --- a/frontend/src/features/dashboard/Dashboard.tsx +++ b/frontend/src/features/dashboard/Dashboard.tsx @@ -11,6 +11,7 @@ import { import type { LucideIcon } from 'lucide-react'; import { Card, CardContent, CardHeader, CardTitle } from '@shared/components/ui/card'; import { Badge } from '@shared/components/ui/badge'; +import { PageContainer } from '@shared/components/layout'; import { AreaChart, PieChart } from '@lib/charts'; import { useKpiStore } from '@stores/kpiStore'; import { useEventStore } from '@stores/eventStore'; @@ -393,8 +394,8 @@ export function Dashboard() { const defconLabels = ['', 'DEFCON 1', 'DEFCON 2', 'DEFCON 3', 'DEFCON 4', 'DEFCON 5']; return ( -
- {/* ── 상단 헤더 바 ── */} + + {/* ── 상단 헤더 바 (DEFCON + 라이브 상태) — 커스텀 구조 유지 ── */}
@@ -670,6 +671,6 @@ export function Dashboard() {
-
+ ); } diff --git a/frontend/src/features/monitoring/MonitoringDashboard.tsx b/frontend/src/features/monitoring/MonitoringDashboard.tsx index debb480..9532769 100644 --- a/frontend/src/features/monitoring/MonitoringDashboard.tsx +++ b/frontend/src/features/monitoring/MonitoringDashboard.tsx @@ -2,6 +2,7 @@ import { useEffect, useState, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { Card, CardContent } from '@shared/components/ui/card'; import { Badge } from '@shared/components/ui/badge'; +import { PageContainer, PageHeader } from '@shared/components/layout'; import { Activity, AlertTriangle, Ship, Eye, Anchor, Radar, Shield, Bell, Clock, Target, ChevronRight } from 'lucide-react'; import type { LucideIcon } from 'lucide-react'; import { AreaChart, PieChart } from '@lib/charts'; @@ -80,11 +81,13 @@ export function MonitoringDashboard() { })); return ( -
-
-

{t('monitoring.title')}

-

{t('monitoring.desc')}

-
+ + {/* iran 백엔드 + Prediction 시스템 상태 (실시간) */} @@ -125,6 +128,6 @@ export function MonitoringDashboard() { ))}
-
+ ); } diff --git a/frontend/src/features/risk-assessment/RiskMap.tsx b/frontend/src/features/risk-assessment/RiskMap.tsx index a041a0c..1c57d6d 100644 --- a/frontend/src/features/risk-assessment/RiskMap.tsx +++ b/frontend/src/features/risk-assessment/RiskMap.tsx @@ -2,6 +2,8 @@ import { useState, useRef, useCallback } from 'react'; import { BaseMap, STATIC_LAYERS, createHeatmapLayer, useMapLayers, type MapHandle } from '@lib/map'; import type { HeatPoint } from '@lib/map'; import { Card, CardContent } from '@shared/components/ui/card'; +import { Button } from '@shared/components/ui/button'; +import { PageContainer, PageHeader } from '@shared/components/layout'; import { Map, Layers, Clock, BarChart3, AlertTriangle, Printer, Download, Ship, TrendingUp } from 'lucide-react'; import { AreaChart as EcAreaChart, LineChart as EcLineChart, PieChart as EcPieChart, BarChart as EcBarChart } from '@lib/charts'; @@ -175,20 +177,24 @@ export function RiskMap() { useMapLayers(mapRef, buildLayers, [tab]); return ( -
-
-
-

- 격자 기반 불법조업 위험도 지도 + + {COLLECTING_BADGE} -

-

SFR-05 | 위험도 히트맵 (수집 중) + MTIS 해양사고 통계 (중앙해양안전심판원)

-
-
- - -
-
+ + + + } + /> {/* 탭 */}
@@ -489,6 +495,6 @@ export function RiskMap() {
)} -
+ ); } diff --git a/frontend/src/features/surveillance/LiveMapView.tsx b/frontend/src/features/surveillance/LiveMapView.tsx index be54d76..27a71cf 100644 --- a/frontend/src/features/surveillance/LiveMapView.tsx +++ b/frontend/src/features/surveillance/LiveMapView.tsx @@ -4,6 +4,7 @@ import { BaseMap, STATIC_LAYERS, createMarkerLayer, createRadiusLayer, useMapLay import type { MarkerData } from '@lib/map'; import { Card, CardContent } from '@shared/components/ui/card'; import { Badge } from '@shared/components/ui/badge'; +import { PageContainer } from '@shared/components/layout'; import { AlertTriangle, Ship, Radio, Zap, Activity, Clock, Pin, Loader2, WifiOff } from 'lucide-react'; import { fetchVesselAnalysis, @@ -227,7 +228,7 @@ export function LiveMapView() { }, [selectedEvent]); return ( -
+ {/* 좌측: 이벤트 목록 + 지도 */}
{/* 이벤트 카드 목록 */} @@ -391,6 +392,6 @@ export function LiveMapView() {
)} -
+ ); } diff --git a/frontend/src/features/surveillance/MapControl.tsx b/frontend/src/features/surveillance/MapControl.tsx index 7f1bde1..e3f9ec6 100644 --- a/frontend/src/features/surveillance/MapControl.tsx +++ b/frontend/src/features/surveillance/MapControl.tsx @@ -2,6 +2,7 @@ import { useState, useRef, useCallback } from 'react'; import { BaseMap, STATIC_LAYERS, createMarkerLayer, createRadiusLayer, useMapLayers, type MapHandle } from '@lib/map'; import { Card, CardContent } from '@shared/components/ui/card'; import { Badge } from '@shared/components/ui/badge'; +import { PageContainer, PageHeader } from '@shared/components/layout'; import { DataTable, type DataColumn } from '@shared/components/common/DataTable'; import { Map, Shield, Crosshair, AlertTriangle, Eye, Anchor, Ship, Filter, Layers, Target, Clock, MapPin, Bell, Navigation, Info } from 'lucide-react'; import { getTrainingZoneIntent, getTrainingZoneHex, getTrainingZoneMeta } from '@shared/constants/trainingZoneTypes'; @@ -244,18 +245,14 @@ export function MapControl() { useMapLayers(mapRef, buildLayers, [visibleZones]); return ( -
-
-
-

- 해역 통제 - - ⚠데모 데이터 (백엔드 API 미구현) - -

-

한국연안 해상사격 훈련구역도 No.462 | Chart of Firing and Bombing Exercise Areas | WGS-84 | 출처: 국립해양조사원

-
-
+ + {/* KPI */}
@@ -428,6 +425,6 @@ export function MapControl() { /> )} -
+ ); } diff --git a/frontend/src/features/vessel/TransferDetection.tsx b/frontend/src/features/vessel/TransferDetection.tsx index bb962e5..0ca79c5 100644 --- a/frontend/src/features/vessel/TransferDetection.tsx +++ b/frontend/src/features/vessel/TransferDetection.tsx @@ -1,13 +1,17 @@ import { Card, CardContent } from '@shared/components/ui/card'; +import { PageContainer, PageHeader } from '@shared/components/layout'; +import { RefreshCw } from 'lucide-react'; import { RealTransshipSuspects } from '@features/detection/RealVesselAnalysis'; export function TransferDetection() { return ( -
-
-

환적·접촉 탐지

-

선박 간 근접 접촉 및 환적 의심 행위 분석

-
+ + {/* prediction 분석 결과 기반 실시간 환적 의심 선박 */} @@ -32,6 +36,6 @@ export function TransferDetection() {
-
+ ); } diff --git a/frontend/src/features/vessel/VesselDetail.tsx b/frontend/src/features/vessel/VesselDetail.tsx index ccd3d6c..b6930bc 100644 --- a/frontend/src/features/vessel/VesselDetail.tsx +++ b/frontend/src/features/vessel/VesselDetail.tsx @@ -1,6 +1,7 @@ import { useState, useEffect, useRef, useCallback } from 'react'; import { useParams } from 'react-router-dom'; import { Badge } from '@shared/components/ui/badge'; +import { PageContainer } from '@shared/components/layout'; import { Search, Ship, AlertTriangle, Radar, MapPin, Printer, @@ -157,7 +158,7 @@ export function VesselDetail() { const riskMeta = ALERT_LEVELS[riskLevel] ?? ALERT_LEVELS.LOW; return ( -
+ {/* ── 좌측: 선박 정보 패널 ── */}
@@ -427,6 +428,6 @@ export function VesselDetail() {
-
+ ); }