diff --git a/frontend/src/tabs/aerial/components/CCTVPlayer.tsx b/frontend/src/tabs/aerial/components/CCTVPlayer.tsx index 60e99be..42fca21 100644 --- a/frontend/src/tabs/aerial/components/CCTVPlayer.tsx +++ b/frontend/src/tabs/aerial/components/CCTVPlayer.tsx @@ -12,6 +12,8 @@ interface CCTVPlayerProps { sourceNm?: string | null; cellIndex?: number; oilDetectionEnabled?: boolean; + vesselDetectionEnabled?: boolean; + intrusionDetectionEnabled?: boolean; } export interface CCTVPlayerHandle { @@ -36,6 +38,8 @@ export const CCTVPlayer = forwardRef(({ sourceNm, cellIndex = 0, oilDetectionEnabled = false, + vesselDetectionEnabled = false, + intrusionDetectionEnabled = false, }, ref) => { const videoRef = useRef(null); const containerRef = useRef(null); @@ -309,6 +313,24 @@ export const CCTVPlayer = forwardRef(({ /> )} + {/* 안전관리 감지 상태 배지 */} + {(vesselDetectionEnabled || intrusionDetectionEnabled) && ( +
+ {vesselDetectionEnabled && ( +
+ 🚢 선박 출입 감지 중 +
+ )} + {intrusionDetectionEnabled && ( +
+ 🚨 침입 감지 중 +
+ )} +
+ )} + {/* OSD 오버레이 */}
diff --git a/frontend/src/tabs/aerial/components/CctvView.tsx b/frontend/src/tabs/aerial/components/CctvView.tsx index 6617e11..538d535 100644 --- a/frontend/src/tabs/aerial/components/CctvView.tsx +++ b/frontend/src/tabs/aerial/components/CctvView.tsx @@ -56,6 +56,8 @@ export function CctvView() { const [gridMode, setGridMode] = useState(1) const [activeCells, setActiveCells] = useState([]) const [oilDetectionEnabled, setOilDetectionEnabled] = useState(false) + const [vesselDetectionEnabled, setVesselDetectionEnabled] = useState(false) + const [intrusionDetectionEnabled, setIntrusionDetectionEnabled] = useState(false) const playerRefs = useRef<(CCTVPlayerHandle | null)[]>([]) const loadData = useCallback(async () => { @@ -240,6 +242,28 @@ export function CctvView() { > {oilDetectionEnabled ? '🛢 감지 ON' : '🛢 오일 감지'} + +