htlee
b00bb56af3
대형 파일 집중 변환: - SatelliteRequest: 134→66 (hex 색상 일괄 변환) - IncidentsView: 141→90, MediaModal: 97→38 - HNSScenarioView: 78→38, HNSView: 49→31 - LoginPage, MapView, PredictionInputSection 등 중소 파일 8개 변환 패턴: hex 색상→text-[#hex], CSS 변수→Tailwind 유틸리티, flex/grid/padding/fontSize/fontWeight/overflow 등 정적 속성 className 이동 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
629 lines
25 KiB
TypeScript
629 lines
25 KiB
TypeScript
import { useState, useEffect, useMemo } from 'react'
|
|
import { Map, useControl } from '@vis.gl/react-maplibre'
|
|
import { MapboxOverlay } from '@deck.gl/mapbox'
|
|
import { ScatterplotLayer, PathLayer, TextLayer } from '@deck.gl/layers'
|
|
import type { StyleSpecification } from 'maplibre-gl'
|
|
import type { PickingInfo } from '@deck.gl/core'
|
|
import 'maplibre-gl/dist/maplibre-gl.css'
|
|
|
|
// ── 지도 스타일 ─────────────────────────────────────────
|
|
const BASE_STYLE: StyleSpecification = {
|
|
version: 8,
|
|
sources: {
|
|
'carto-dark': {
|
|
type: 'raster',
|
|
tiles: [
|
|
'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
|
|
'https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
|
|
'https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png',
|
|
],
|
|
tileSize: 256,
|
|
attribution: '© OSM © CARTO',
|
|
},
|
|
},
|
|
layers: [{ id: 'carto-dark-layer', type: 'raster', source: 'carto-dark' }],
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
function DeckGLOverlay({ layers }: { layers: any[] }) {
|
|
const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay({ interleaved: true }))
|
|
overlay.setProps({ layers })
|
|
return null
|
|
}
|
|
|
|
// ── Mock 데이터 ─────────────────────────────────────────
|
|
interface DroneInfo {
|
|
id: string
|
|
name: string
|
|
status: 'active' | 'returning' | 'standby' | 'charging'
|
|
battery: number
|
|
altitude: number
|
|
speed: number
|
|
sensor: string
|
|
color: string
|
|
lon: number
|
|
lat: number
|
|
}
|
|
|
|
const drones: DroneInfo[] = [
|
|
{ id: 'D-01', name: 'DJI M300 #1', status: 'active', battery: 78, altitude: 150, speed: 12, sensor: '광학 4K', color: '#3b82f6', lon: 128.68, lat: 34.72 },
|
|
{ id: 'D-02', name: 'DJI M300 #2', status: 'active', battery: 65, altitude: 200, speed: 8, sensor: 'IR 열화상', color: '#ef4444', lon: 128.74, lat: 34.68 },
|
|
{ id: 'D-03', name: 'Mavic 3E', status: 'active', battery: 82, altitude: 120, speed: 15, sensor: '광학 4K', color: '#a855f7', lon: 128.88, lat: 34.60 },
|
|
{ id: 'D-04', name: 'DJI M30T', status: 'active', battery: 45, altitude: 180, speed: 10, sensor: '다중센서', color: '#22c55e', lon: 128.62, lat: 34.56 },
|
|
{ id: 'D-05', name: 'DJI M300 #3', status: 'returning', battery: 12, altitude: 80, speed: 18, sensor: '광학 4K', color: '#f97316', lon: 128.80, lat: 34.75 },
|
|
{ id: 'D-06', name: 'Mavic 3E #2', status: 'charging', battery: 35, altitude: 0, speed: 0, sensor: '광학 4K', color: '#6b7280', lon: 128.70, lat: 34.65 },
|
|
]
|
|
|
|
interface VesselInfo {
|
|
name: string
|
|
lon: number
|
|
lat: number
|
|
aisOff: boolean
|
|
}
|
|
|
|
const vessels: VesselInfo[] = [
|
|
{ name: '영풍호', lon: 128.72, lat: 34.74, aisOff: false },
|
|
{ name: '불명-A', lon: 128.82, lat: 34.65, aisOff: true },
|
|
{ name: '금성호', lon: 128.60, lat: 34.62, aisOff: false },
|
|
{ name: '불명-B', lon: 128.92, lat: 34.70, aisOff: true },
|
|
{ name: '태양호', lon: 128.66, lat: 34.58, aisOff: false },
|
|
]
|
|
|
|
interface ZoneInfo {
|
|
id: string
|
|
lon: number
|
|
lat: number
|
|
radius: number
|
|
color: [number, number, number]
|
|
}
|
|
|
|
const searchZones: ZoneInfo[] = [
|
|
{ id: 'A', lon: 128.70, lat: 34.72, radius: 3000, color: [6, 182, 212] },
|
|
{ id: 'B', lon: 128.88, lat: 34.60, radius: 2500, color: [249, 115, 22] },
|
|
{ id: 'C', lon: 128.62, lat: 34.56, radius: 2000, color: [234, 179, 8] },
|
|
]
|
|
|
|
const oilSpill = { lon: 128.85, lat: 34.58 }
|
|
const hnsPoint = { lon: 128.58, lat: 34.52 }
|
|
|
|
interface AlertItem {
|
|
time: string
|
|
type: 'warning' | 'info' | 'danger'
|
|
message: string
|
|
}
|
|
|
|
const alerts: AlertItem[] = [
|
|
{ time: '15:42', type: 'danger', message: 'D-05 배터리 부족 — 자동 복귀' },
|
|
{ time: '15:38', type: 'warning', message: '오염원 신규 탐지 (34.82°N)' },
|
|
{ time: '15:35', type: 'info', message: 'D-01~D-03 다시점 융합 완료' },
|
|
{ time: '15:30', type: 'warning', message: 'AIS OFF 선박 2척 추가 탐지' },
|
|
{ time: '15:25', type: 'info', message: 'D-04 센서 데이터 수집 시작' },
|
|
{ time: '15:20', type: 'danger', message: '유류오염 확산 속도 증가 감지' },
|
|
{ time: '15:15', type: 'info', message: '3D 재구성 시작 (불명선박-B)' },
|
|
]
|
|
|
|
// ── 유틸 ────────────────────────────────────────────────
|
|
function hexToRgba(hex: string): [number, number, number, number] {
|
|
const r = parseInt(hex.slice(1, 3), 16)
|
|
const g = parseInt(hex.slice(3, 5), 16)
|
|
const b = parseInt(hex.slice(5, 7), 16)
|
|
return [r, g, b, 255]
|
|
}
|
|
|
|
// ── 컴포넌트 ────────────────────────────────────────────
|
|
export function RealtimeDrone() {
|
|
const [reconProgress, setReconProgress] = useState(0)
|
|
const [reconDone, setReconDone] = useState(false)
|
|
const [selectedDrone, setSelectedDrone] = useState<string | null>(null)
|
|
const [animFrame, setAnimFrame] = useState(0)
|
|
|
|
// 3D 재구성 진행률
|
|
useEffect(() => {
|
|
if (reconDone) return
|
|
const timer = setInterval(() => {
|
|
setReconProgress(prev => {
|
|
if (prev >= 100) {
|
|
clearInterval(timer)
|
|
setReconDone(true)
|
|
return 100
|
|
}
|
|
return prev + 2
|
|
})
|
|
}, 300)
|
|
return () => clearInterval(timer)
|
|
}, [reconDone])
|
|
|
|
// 애니메이션 루프 (~20fps)
|
|
useEffect(() => {
|
|
let frame = 0
|
|
let raf: number
|
|
const tick = () => {
|
|
frame++
|
|
if (frame % 3 === 0) setAnimFrame(f => f + 1)
|
|
raf = requestAnimationFrame(tick)
|
|
}
|
|
raf = requestAnimationFrame(tick)
|
|
return () => cancelAnimationFrame(raf)
|
|
}, [])
|
|
|
|
const activeDrones = useMemo(() => drones.filter(d => d.status !== 'charging'), [])
|
|
|
|
// ── deck.gl 레이어 ──────────────────────────────────
|
|
const deckLayers = useMemo(() => {
|
|
const t = animFrame * 0.05
|
|
|
|
// 탐색 구역 (반투명 원 + 테두리)
|
|
const zoneFillLayer = new ScatterplotLayer<ZoneInfo>({
|
|
id: 'search-zones-fill',
|
|
data: searchZones,
|
|
getPosition: d => [d.lon, d.lat],
|
|
getRadius: d => d.radius + Math.sin(t + searchZones.indexOf(d)) * 100,
|
|
getFillColor: d => [...d.color, 15],
|
|
getLineColor: d => [...d.color, 80],
|
|
getLineWidth: 2,
|
|
filled: true,
|
|
stroked: true,
|
|
radiusUnits: 'meters',
|
|
radiusMinPixels: 30,
|
|
lineWidthMinPixels: 1.5,
|
|
})
|
|
|
|
// 구역 라벨
|
|
const zoneLabels = new TextLayer<ZoneInfo>({
|
|
id: 'zone-labels',
|
|
data: searchZones,
|
|
getPosition: d => [d.lon, d.lat + 0.025],
|
|
getText: d => `${d.id}구역`,
|
|
getColor: d => [...d.color, 180],
|
|
getSize: 12,
|
|
fontFamily: 'NanumSquare, Malgun Gothic, 맑은 고딕, sans-serif',
|
|
fontWeight: 'bold',
|
|
characterSet: 'auto',
|
|
outlineWidth: 2,
|
|
outlineColor: [15, 21, 36, 180],
|
|
getTextAnchor: 'middle',
|
|
getAlignmentBaseline: 'center',
|
|
billboard: false,
|
|
})
|
|
|
|
// 유류 확산 (동심원 3개)
|
|
const oilRings = [0, 1, 2].map(ring =>
|
|
new ScatterplotLayer({
|
|
id: `oil-spill-${ring}`,
|
|
data: [oilSpill],
|
|
getPosition: () => [oilSpill.lon, oilSpill.lat],
|
|
getRadius: 800 + ring * 500 + Math.sin(t * 0.5 + ring) * 80,
|
|
getFillColor: [249, 115, 22, Math.max(4, 20 - ring * 6)],
|
|
getLineColor: [249, 115, 22, ring === 0 ? 120 : 40],
|
|
getLineWidth: ring === 0 ? 2 : 1,
|
|
filled: true,
|
|
stroked: true,
|
|
radiusUnits: 'meters',
|
|
radiusMinPixels: 15,
|
|
lineWidthMinPixels: ring === 0 ? 1.5 : 0.8,
|
|
}),
|
|
)
|
|
|
|
// 유류 확산 라벨
|
|
const oilLabel = new TextLayer({
|
|
id: 'oil-label',
|
|
data: [oilSpill],
|
|
getPosition: () => [oilSpill.lon, oilSpill.lat - 0.015],
|
|
getText: () => '유류확산',
|
|
getColor: [249, 115, 22, 200],
|
|
getSize: 11,
|
|
fontFamily: 'NanumSquare, Malgun Gothic, 맑은 고딕, sans-serif',
|
|
fontWeight: 'bold',
|
|
characterSet: 'auto',
|
|
outlineWidth: 2,
|
|
outlineColor: [15, 21, 36, 180],
|
|
getTextAnchor: 'middle',
|
|
getAlignmentBaseline: 'center',
|
|
billboard: false,
|
|
})
|
|
|
|
// HNS 의심
|
|
const hnsLayer = new ScatterplotLayer({
|
|
id: 'hns-point',
|
|
data: [hnsPoint],
|
|
getPosition: () => [hnsPoint.lon, hnsPoint.lat],
|
|
getRadius: 400 + Math.sin(t * 1.2) * 80,
|
|
getFillColor: [234, 179, 8, 50],
|
|
getLineColor: [234, 179, 8, 100],
|
|
getLineWidth: 1.5,
|
|
filled: true,
|
|
stroked: true,
|
|
radiusUnits: 'meters',
|
|
radiusMinPixels: 6,
|
|
lineWidthMinPixels: 1,
|
|
})
|
|
const hnsCore = new ScatterplotLayer({
|
|
id: 'hns-core',
|
|
data: [hnsPoint],
|
|
getPosition: () => [hnsPoint.lon, hnsPoint.lat],
|
|
getRadius: 150,
|
|
getFillColor: [234, 179, 8, 200],
|
|
filled: true,
|
|
radiusUnits: 'meters',
|
|
radiusMinPixels: 4,
|
|
})
|
|
const hnsLabel = new TextLayer({
|
|
id: 'hns-label',
|
|
data: [hnsPoint],
|
|
getPosition: () => [hnsPoint.lon, hnsPoint.lat - 0.008],
|
|
getText: () => 'HNS 의심',
|
|
getColor: [234, 179, 8, 180],
|
|
getSize: 10,
|
|
fontFamily: 'NanumSquare, Malgun Gothic, 맑은 고딕, sans-serif',
|
|
fontWeight: 'bold',
|
|
characterSet: 'auto',
|
|
outlineWidth: 2,
|
|
outlineColor: [15, 21, 36, 180],
|
|
getTextAnchor: 'middle',
|
|
getAlignmentBaseline: 'center',
|
|
billboard: false,
|
|
})
|
|
|
|
// 선박 — AIS OFF는 red 경고 원
|
|
const vesselAlertLayer = new ScatterplotLayer<VesselInfo>({
|
|
id: 'vessel-alert',
|
|
data: vessels.filter(v => v.aisOff),
|
|
getPosition: d => [d.lon, d.lat],
|
|
getRadius: 600 + Math.sin(t * 1.5) * 150,
|
|
getFillColor: [239, 68, 68, 20],
|
|
getLineColor: [239, 68, 68, 60],
|
|
getLineWidth: 1,
|
|
filled: true,
|
|
stroked: true,
|
|
radiusUnits: 'meters',
|
|
radiusMinPixels: 10,
|
|
lineWidthMinPixels: 0.8,
|
|
})
|
|
const vesselLayer = new ScatterplotLayer<VesselInfo>({
|
|
id: 'vessels',
|
|
data: vessels,
|
|
getPosition: d => [d.lon, d.lat],
|
|
getRadius: 200,
|
|
getFillColor: d => d.aisOff ? [239, 68, 68, 255] : [96, 165, 250, 255],
|
|
getLineColor: d => d.aisOff ? [239, 68, 68, 120] : [96, 165, 250, 80],
|
|
getLineWidth: 1.5,
|
|
filled: true,
|
|
stroked: true,
|
|
radiusUnits: 'meters',
|
|
radiusMinPixels: 5,
|
|
lineWidthMinPixels: 1,
|
|
})
|
|
const vesselLabels = new TextLayer<VesselInfo>({
|
|
id: 'vessel-labels',
|
|
data: vessels,
|
|
getPosition: d => [d.lon, d.lat + 0.005],
|
|
getText: d => d.name,
|
|
getColor: [255, 255, 255, 190],
|
|
getSize: 11,
|
|
fontFamily: 'NanumSquare, Malgun Gothic, 맑은 고딕, sans-serif',
|
|
fontWeight: 'bold',
|
|
characterSet: 'auto',
|
|
outlineWidth: 2,
|
|
outlineColor: [15, 21, 36, 180],
|
|
getTextAnchor: 'middle',
|
|
getAlignmentBaseline: 'center',
|
|
billboard: false,
|
|
})
|
|
|
|
// 드론 간 메시 링크
|
|
const droneLinks: { path: [number, number][] }[] = []
|
|
for (let i = 0; i < activeDrones.length; i++) {
|
|
for (let j = i + 1; j < activeDrones.length; j++) {
|
|
const a = activeDrones[i]
|
|
const b = activeDrones[j]
|
|
droneLinks.push({
|
|
path: [
|
|
[a.lon + Math.sin(t + i * 2) * 0.002, a.lat + Math.cos(t * 0.8 + i) * 0.001],
|
|
[b.lon + Math.sin(t + j * 2) * 0.002, b.lat + Math.cos(t * 0.8 + j) * 0.001],
|
|
],
|
|
})
|
|
}
|
|
}
|
|
const linkLayer = new PathLayer({
|
|
id: 'drone-links',
|
|
data: droneLinks,
|
|
getPath: d => d.path,
|
|
getColor: [77, 208, 225, 35],
|
|
getWidth: 1,
|
|
getDashArray: [6, 8],
|
|
dashJustified: true,
|
|
widthMinPixels: 0.7,
|
|
})
|
|
|
|
// 드론 글로우 (뒤쪽 큰 원)
|
|
const droneGlowLayer = new ScatterplotLayer<DroneInfo>({
|
|
id: 'drone-glow',
|
|
data: activeDrones,
|
|
getPosition: d => {
|
|
const i = activeDrones.indexOf(d)
|
|
return [
|
|
d.lon + Math.sin(t + i * 2) * 0.002,
|
|
d.lat + Math.cos(t * 0.8 + i) * 0.001,
|
|
]
|
|
},
|
|
getRadius: d => selectedDrone === d.id ? 500 : 350,
|
|
getFillColor: d => {
|
|
const [r, g, b] = hexToRgba(d.color)
|
|
return [r, g, b, selectedDrone === d.id ? 40 : 20]
|
|
},
|
|
filled: true,
|
|
radiusUnits: 'meters',
|
|
radiusMinPixels: selectedDrone ? 12 : 8,
|
|
updateTriggers: {
|
|
getPosition: [animFrame],
|
|
getFillColor: [selectedDrone],
|
|
getRadius: [selectedDrone],
|
|
},
|
|
})
|
|
|
|
// 드론 본체
|
|
const droneLayer = new ScatterplotLayer<DroneInfo>({
|
|
id: 'drones',
|
|
data: activeDrones,
|
|
getPosition: d => {
|
|
const i = activeDrones.indexOf(d)
|
|
return [
|
|
d.lon + Math.sin(t + i * 2) * 0.002,
|
|
d.lat + Math.cos(t * 0.8 + i) * 0.001,
|
|
]
|
|
},
|
|
getRadius: d => selectedDrone === d.id ? 200 : 150,
|
|
getFillColor: d => hexToRgba(d.color),
|
|
getLineColor: [255, 255, 255, 200],
|
|
getLineWidth: d => selectedDrone === d.id ? 2 : 1,
|
|
filled: true,
|
|
stroked: true,
|
|
radiusUnits: 'meters',
|
|
radiusMinPixels: selectedDrone ? 6 : 4,
|
|
lineWidthMinPixels: 1,
|
|
pickable: true,
|
|
onClick: (info: PickingInfo<DroneInfo>) => {
|
|
if (info.object) setSelectedDrone(info.object.id)
|
|
},
|
|
updateTriggers: {
|
|
getPosition: [animFrame],
|
|
getRadius: [selectedDrone],
|
|
getLineWidth: [selectedDrone],
|
|
},
|
|
})
|
|
|
|
// 드론 라벨
|
|
const droneLabels = new TextLayer<DroneInfo>({
|
|
id: 'drone-labels',
|
|
data: activeDrones,
|
|
getPosition: d => {
|
|
const i = activeDrones.indexOf(d)
|
|
return [
|
|
d.lon + Math.sin(t + i * 2) * 0.002,
|
|
d.lat + Math.cos(t * 0.8 + i) * 0.001 + 0.006,
|
|
]
|
|
},
|
|
getText: d => d.id,
|
|
getColor: d => {
|
|
const [r, g, b] = hexToRgba(d.color)
|
|
return selectedDrone === d.id ? [255, 255, 255, 255] : [r, g, b, 230]
|
|
},
|
|
getSize: d => selectedDrone === d.id ? 13 : 10,
|
|
fontFamily: 'Outfit, monospace',
|
|
fontWeight: 'bold',
|
|
characterSet: 'auto',
|
|
outlineWidth: 2,
|
|
outlineColor: [15, 21, 36, 200],
|
|
getTextAnchor: 'middle',
|
|
getAlignmentBaseline: 'center',
|
|
billboard: false,
|
|
updateTriggers: {
|
|
getPosition: [animFrame],
|
|
getColor: [selectedDrone],
|
|
getSize: [selectedDrone],
|
|
},
|
|
})
|
|
|
|
return [
|
|
zoneFillLayer,
|
|
zoneLabels,
|
|
...oilRings,
|
|
oilLabel,
|
|
hnsLayer,
|
|
hnsCore,
|
|
hnsLabel,
|
|
vesselAlertLayer,
|
|
vesselLayer,
|
|
vesselLabels,
|
|
linkLayer,
|
|
droneGlowLayer,
|
|
droneLayer,
|
|
droneLabels,
|
|
]
|
|
}, [animFrame, selectedDrone, activeDrones])
|
|
|
|
// ── UI 유틸 ───────────────────────────────────────────
|
|
const statusLabel = (s: string) => {
|
|
if (s === 'active') return { text: '비행중', cls: 'text-status-green' }
|
|
if (s === 'returning') return { text: '복귀중', cls: 'text-status-orange' }
|
|
if (s === 'charging') return { text: '충전중', cls: 'text-text-3' }
|
|
return { text: '대기', cls: 'text-text-3' }
|
|
}
|
|
|
|
const alertColor = (t: string) =>
|
|
t === 'danger' ? 'border-l-status-red bg-[rgba(239,68,68,0.05)]'
|
|
: t === 'warning' ? 'border-l-status-orange bg-[rgba(249,115,22,0.05)]'
|
|
: 'border-l-primary-blue bg-[rgba(59,130,246,0.05)]'
|
|
|
|
return (
|
|
<div className="flex h-full overflow-hidden" style={{ margin: '-20px -24px', height: 'calc(100% + 40px)' }}>
|
|
{/* 지도 영역 */}
|
|
<div className="flex-1 relative overflow-hidden">
|
|
<Map
|
|
initialViewState={{
|
|
longitude: 128.75,
|
|
latitude: 34.64,
|
|
zoom: 10,
|
|
}}
|
|
mapStyle={BASE_STYLE}
|
|
className="w-full h-full"
|
|
attributionControl={false}
|
|
>
|
|
<DeckGLOverlay layers={deckLayers} />
|
|
</Map>
|
|
|
|
{/* 오버레이 통계 */}
|
|
<div className="absolute top-2.5 left-2.5 flex gap-1.5 z-[2] pointer-events-none">
|
|
{[
|
|
{ label: '탐지 객체', value: '847', unit: '건', color: 'text-primary-blue' },
|
|
{ label: '식별 선박', value: '312', unit: '척', color: 'text-primary-cyan' },
|
|
{ label: 'AIS OFF', value: '14', unit: '척', color: 'text-status-red' },
|
|
{ label: '오염 탐지', value: '3', unit: '건', color: 'text-status-orange' },
|
|
].map((s, i) => (
|
|
<div key={i} className="bg-[rgba(15,21,36,0.9)] backdrop-blur-sm rounded-sm px-2.5 py-1.5 border border-border">
|
|
<div className="text-[7px] text-text-3">{s.label}</div>
|
|
<div>
|
|
<span className={`font-mono font-bold text-base ${s.color}`}>{s.value}</span>
|
|
<span className="text-[7px] text-text-3 ml-0.5">{s.unit}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 3D 재구성 진행률 */}
|
|
<div className="absolute bottom-2.5 right-2.5 bg-[rgba(15,21,36,0.9)] rounded-sm px-3 py-2 border z-[3] min-w-[175px] cursor-pointer transition-colors hover:border-primary-cyan/40" style={{ borderColor: 'rgba(6,182,212,0.18)' }}>
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-[9px] font-bold text-primary-cyan">🧊 3D 재구성</span>
|
|
<span className="font-mono font-bold text-[13px] text-primary-cyan">{reconProgress}%</span>
|
|
</div>
|
|
<div className="w-full h-[3px] bg-white/[0.06] rounded-sm mb-1">
|
|
<div className="h-full rounded-sm transition-all duration-500" style={{ width: `${reconProgress}%`, background: 'linear-gradient(90deg, var(--cyan), var(--blue))' }} />
|
|
</div>
|
|
{!reconDone ? (
|
|
<div className="text-[7px] text-text-3">D-01~D-03 다각도 영상 융합중...</div>
|
|
) : (
|
|
<div className="text-[8px] font-bold text-status-green mt-0.5 animate-pulse-dot">✅ 완료 — 클릭하여 정밀분석</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 실시간 영상 패널 */}
|
|
{selectedDrone && (() => {
|
|
const drone = drones.find(d => d.id === selectedDrone)
|
|
if (!drone) return null
|
|
return (
|
|
<div className="absolute bottom-0 left-0 right-0 bg-[rgba(15,21,36,0.95)] z-[5] border-t" style={{ borderColor: 'rgba(59,130,246,0.2)', height: 190 }}>
|
|
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border">
|
|
<div className="text-[10px] font-bold flex items-center gap-1.5" style={{ color: drone.color }}>
|
|
<div className="w-1.5 h-1.5 rounded-full animate-pulse-dot" style={{ background: drone.color }} />
|
|
{drone.id} 실시간 영상
|
|
</div>
|
|
<button onClick={() => setSelectedDrone(null)} className="w-5 h-5 rounded bg-white/5 border border-border text-text-3 text-[11px] flex items-center justify-center cursor-pointer hover:text-text-1">✕</button>
|
|
</div>
|
|
<div className="grid h-[calc(100%-30px)]" style={{ gridTemplateColumns: '1fr 180px' }}>
|
|
<div className="relative overflow-hidden" style={{ background: 'radial-gradient(ellipse at center, #0c1a2e, #060c18)' }}>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="text-text-3/20 text-2xl font-mono">LIVE FEED</div>
|
|
</div>
|
|
<div className="absolute top-1.5 left-2 z-[2]">
|
|
<span className="text-[11px] font-bold" style={{ color: drone.color }}>{drone.id}</span>
|
|
<span className="text-[7px] px-1 py-px rounded bg-white/[0.08] ml-1">{drone.sensor}</span>
|
|
<div className="text-[7px] text-text-3 font-mono mt-0.5">{drone.lat.toFixed(2)}°N, {drone.lon.toFixed(2)}°E</div>
|
|
</div>
|
|
<div className="absolute top-1.5 right-2 z-[2] flex items-center gap-1 text-[8px] font-bold text-status-red">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-status-red" />REC
|
|
</div>
|
|
<div className="absolute bottom-1 left-2 z-[2] text-[7px] text-text-3">
|
|
ALT {drone.altitude}m · SPD {drone.speed}m/s · HDG 045°
|
|
</div>
|
|
</div>
|
|
<div className="p-2 overflow-auto text-[9px] border-l border-border">
|
|
<div className="font-bold text-text-2 mb-1.5 font-korean">비행 정보</div>
|
|
{[
|
|
['드론 ID', drone.id],
|
|
['기체', drone.name],
|
|
['배터리', `${drone.battery}%`],
|
|
['고도', `${drone.altitude}m`],
|
|
['속도', `${drone.speed}m/s`],
|
|
['센서', drone.sensor],
|
|
['상태', statusLabel(drone.status).text],
|
|
].map(([k, v], i) => (
|
|
<div key={i} className="flex justify-between py-0.5">
|
|
<span className="text-text-3 font-korean">{k}</span>
|
|
<span className="font-mono font-semibold text-text-1">{v}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})()}
|
|
</div>
|
|
|
|
{/* 우측 사이드바 */}
|
|
<div className="w-[260px] bg-[rgba(15,21,36,0.88)] border-l border-border flex flex-col overflow-auto">
|
|
{/* 군집 드론 현황 */}
|
|
<div className="p-2.5 px-3 border-b border-border">
|
|
<div className="text-[10px] font-bold text-text-3 mb-1.5 uppercase tracking-wider">군집 드론 현황 · {activeDrones.length}/{drones.length} 운용</div>
|
|
<div className="flex flex-col gap-1">
|
|
{drones.map(d => {
|
|
const st = statusLabel(d.status)
|
|
return (
|
|
<div
|
|
key={d.id}
|
|
onClick={() => d.status !== 'charging' && setSelectedDrone(d.id)}
|
|
className={`flex items-center gap-2 px-2 py-1.5 rounded-sm cursor-pointer transition-colors ${
|
|
selectedDrone === d.id ? 'bg-[rgba(6,182,212,0.08)] border border-primary-cyan/20' : 'hover:bg-white/[0.02] border border-transparent'
|
|
}`}
|
|
>
|
|
<div className="w-2 h-2 rounded-full" style={{ background: d.color }} />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-[9px] font-bold" style={{ color: d.color }}>{d.id}</div>
|
|
<div className="text-[7px] text-text-3 truncate">{d.name}</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className={`text-[8px] font-semibold ${st.cls}`}>{st.text}</div>
|
|
<div className="text-[7px] font-mono text-text-3">{d.battery}%</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 다각화 분석 */}
|
|
<div className="p-2.5 px-3 border-b border-border">
|
|
<div className="text-[10px] font-bold text-text-3 mb-1.5 uppercase tracking-wider">다각화 분석</div>
|
|
<div className="grid grid-cols-2 gap-1">
|
|
{[
|
|
{ icon: '🎯', label: '다시점 융합', value: '28건', sub: '360° 식별' },
|
|
{ icon: '🧊', label: '3D 재구성', value: '12건', sub: '선박+오염원' },
|
|
{ icon: '📡', label: '다센서 융합', value: '45건', sub: '광학+IR+SAR' },
|
|
{ icon: '🛢️', label: '오염원 3D', value: '3건', sub: '유류+HNS' },
|
|
].map((a, i) => (
|
|
<div key={i} className="bg-white/[0.02] rounded-sm px-1.5 py-1.5 border border-white/[0.03]">
|
|
<div className="text-[10px] mb-px">{a.icon}</div>
|
|
<div className="text-[7px] text-text-3">{a.label}</div>
|
|
<div className="text-xs font-bold font-mono text-primary-cyan my-px">{a.value}</div>
|
|
<div className="text-[6px] text-text-3">{a.sub}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 실시간 경보 */}
|
|
<div className="p-2.5 px-3 flex-1 overflow-auto">
|
|
<div className="text-[10px] font-bold text-text-3 mb-1.5 uppercase tracking-wider">실시간 경보</div>
|
|
<div className="flex flex-col gap-1">
|
|
{alerts.map((a, i) => (
|
|
<div key={i} className={`px-2 py-1.5 border-l-2 rounded-sm text-[9px] font-korean ${alertColor(a.type)}`}>
|
|
<span className="font-mono text-text-3 mr-1.5">{a.time}</span>
|
|
<span className="text-text-2">{a.message}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|