From 5b734d3cf120515199148aad176289b530692a9c Mon Sep 17 00:00:00 2001
From: Nan Kyung Lee <nankyunglee@Nanui-Macmini.local>
Date: Mon, 9 Mar 2026 10:39:14 +0900
Subject: [PATCH] =?UTF-8?q?feat(aerial):=20CCTV=20=EC=95=88=EC=A0=84?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EA=B0=90=EC=A7=80=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20(=EC=84=A0=EB=B0=95=20=EC=B6=9C=EC=9E=85,?=
 =?UTF-8?q?=20=EC=B9=A8=EC=9E=85=20=EA=B0=90=EC=A7=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/tabs/aerial/components/CCTVPlayer.tsx | 22 ++++++++++++++++
 .../src/tabs/aerial/components/CctvView.tsx   | 26 +++++++++++++++++++
 2 files changed, 48 insertions(+)

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<CCTVPlayerHandle, CCTVPlayerProps>(({
   sourceNm,
   cellIndex = 0,
   oilDetectionEnabled = false,
+  vesselDetectionEnabled = false,
+  intrusionDetectionEnabled = false,
 }, ref) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -309,6 +313,24 @@ export const CCTVPlayer = forwardRef<CCTVPlayerHandle, CCTVPlayerProps>(({
         />
       )}
 
+      {/* 안전관리 감지 상태 배지 */}
+      {(vesselDetectionEnabled || intrusionDetectionEnabled) && (
+        <div className="absolute top-2 right-2 flex flex-col gap-1 z-20">
+          {vesselDetectionEnabled && (
+            <div className="flex items-center gap-1 px-1.5 py-0.5 rounded text-[8px] font-bold"
+              style={{ background: 'rgba(59,130,246,.3)', color: '#93c5fd' }}>
+              🚢 선박 출입 감지 중
+            </div>
+          )}
+          {intrusionDetectionEnabled && (
+            <div className="flex items-center gap-1 px-1.5 py-0.5 rounded text-[8px] font-bold"
+              style={{ background: 'rgba(249,115,22,.3)', color: '#fdba74' }}>
+              🚨 침입 감지 중
+            </div>
+          )}
+        </div>
+      )}
+
       {/* OSD 오버레이 */}
       <div className="absolute top-2 left-2 flex items-center gap-1.5 z-20">
         <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-black/70 text-white">
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<CctvCameraItem[]>([])
   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' : '🛢 오일 감지'}
             </button>
+            <button
+              onClick={() => setVesselDetectionEnabled(v => !v)}
+              className="px-2.5 py-1 border rounded-[5px] text-[10px] font-semibold cursor-pointer font-korean transition-colors"
+              style={vesselDetectionEnabled
+                ? { background: 'rgba(59,130,246,.15)', borderColor: 'rgba(59,130,246,.4)', color: 'var(--blue, #3b82f6)' }
+                : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t2)' }
+              }
+              title={gridMode === 9 ? '9분할 모드에서는 비활성화됩니다' : '선박 출입 감지'}
+            >
+              {vesselDetectionEnabled ? '🚢 감지 ON' : '🚢 선박 출입'}
+            </button>
+            <button
+              onClick={() => setIntrusionDetectionEnabled(v => !v)}
+              className="px-2.5 py-1 border rounded-[5px] text-[10px] font-semibold cursor-pointer font-korean transition-colors"
+              style={intrusionDetectionEnabled
+                ? { background: 'rgba(249,115,22,.15)', borderColor: 'rgba(249,115,22,.4)', color: 'var(--orange, #f97316)' }
+                : { background: 'var(--bg3)', borderColor: 'var(--bd)', color: 'var(--t2)' }
+              }
+              title={gridMode === 9 ? '9분할 모드에서는 비활성화됩니다' : '침입 감지'}
+            >
+              {intrusionDetectionEnabled ? '🚨 감지 ON' : '🚨 침입 감지'}
+            </button>
             <button
               onClick={() => {
                 playerRefs.current.forEach(r => r?.capture())
@@ -269,6 +293,8 @@ export function CctvView() {
                     sourceNm={cam.sourceNm}
                     cellIndex={i}
                     oilDetectionEnabled={oilDetectionEnabled && gridMode !== 9}
+                    vesselDetectionEnabled={vesselDetectionEnabled && gridMode !== 9}
+                    intrusionDetectionEnabled={intrusionDetectionEnabled && gridMode !== 9}
                   />
                 ) : (
                   <div className="text-[10px] text-text-3 font-korean opacity-40">카메라를 선택하세요</div>