비정상 드론 경고음 및 색상 변경 적용

src/components/map/naver/dron/DronMarker.js

@@ -26,7 +26,9 @@ export const DronMarker = props => {
   const { controlGroupAuthInfo } = useSelector(
     state => state.controlGroupAuthState
   );
-
+  const { controlGpArcrftWarnList } = useSelector(
+    state => state.controlGpLogState
+  );
   const [arrMarkers, setArrMarkers] = useState([]);
   // const [arrInfos, setArrInfos] = useState([]);
 
@@ -186,8 +188,34 @@ export const DronMarker = props => {
   };
 
   //마커에 위치를 이동한다.
-  const moveMarkers = (marker, position) => {
+  const moveMarkers = (marker, position, gps) => {
+    const getIcon = marker.getIcon();
+
     marker.setPosition(position);
+    if (
+      controlGpArcrftWarnList?.filter(i => i.cntrlId === gps.controlId).length >
+      0
+    ) {
+      if (controlGpArcrftWarnList[0].controlWarnCd) {
+        marker.setIcon({
+          content: `<img ${getIcon.content.substr(
+            getIcon.content.indexOf('src'),
+            getIcon.content.indexOf('.svg')
+          )} alt="" style="transform: rotate(${
+            gps.heading
+          }deg); filter: invert(16%) sepia(79%) saturate(4975%) hue-rotate(359deg) brightness(104%) contrast(129%)" />`,
+          anchor: getIcon.anchor
+        });
+      } else {
+        marker.setIcon({
+          content: `<img ${getIcon.content.substr(
+            getIcon.content.indexOf('src'),
+            getIcon.content.indexOf('.svg')
+          )} alt="" style="transform: rotate(${gps.heading}deg); " />`,
+          anchor: getIcon.anchor
+        });
+      }
+    }
   };
 
   const moveInfos = (info, position) => {
@@ -225,7 +253,7 @@ export const DronMarker = props => {
           const isExists = arrMarkers.find(ele => ele.id === item.objectId);
           // const isInfos = arrInfos.find( info => info._id === item.objectId )
           if (isExists) {
-            moveMarkers(isExists, position);
+            moveMarkers(isExists, position, item);
             // moveInfos(isInfos, position);
           } else {
             addMarkers(position, item.objectId, item.controlId, item);

src/components/map/naver/dron/DronToast.js

@@ -13,14 +13,17 @@ import {
   objectUnClickAction
 } from '../../../../modules/control/map/actions/controlMapActions';
 import 'react-toastify/dist/ReactToastify.css';
+import useAudio from '../../../../utility/hooks/useAudio';
+import warning from '../../../../assets/sounds/warning.mp3';
 
 const DronToast = () => {
   const dispatch = useDispatch();
-
+  const [playing, toggle] = useAudio(warning);
   const { controlGpArcrftWarnList } = useSelector(
     state => state.controlGpLogState
   );
   const [toastId, setToastId] = useState();
+  // const [is, setIs] = useState(false);
 
   useEffect(() => {
     if (controlGpArcrftWarnList) {
@@ -44,17 +47,28 @@ const DronToast = () => {
                   // setToastId(null);
                 },
                 onClose: () => {
+                  toggle(false);
+                  // setIs(true);
                   setToastId(null);
                 }
               }
             );
 
+            if (!playing) {
+              toggle(true);
+            }
             setToastId(id);
-
             break;
           }
         }
       }
+      for (let i = 0; i < controlGpArcrftWarnList.length; i++) {
+        if (!controlGpArcrftWarnList[i].controlWarnCd) {
+          toggle(false);
+        } else {
+          toggle(true);
+        }
+      }
     }
   }, [controlGpArcrftWarnList]);
 

src/utility/hooks/useAudio.js

@@ -0,0 +1,24 @@
+import { useMemo, useEffect, useState } from 'react';
+
+const useAudio = url => {
+  const audio = useMemo(() => new Audio(url), []);
+  const [playing, setPlaying] = useState(false);
+
+  const toggle = val => setPlaying(val);
+
+  useEffect(() => {
+    if (playing) audio.loop = true;
+    playing ? audio.play() : audio.pause();
+  }, [playing]);
+
+  useEffect(() => {
+    audio.addEventListener('ended', () => setPlaying(false));
+    return () => {
+      audio.removeEventListener('ended', () => setPlaying(false));
+    };
+  }, []);
+
+  return [playing, toggle];
+};
+
+export default useAudio;