경고음 및 마커 색상 이슈 수정

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

@@ -192,12 +192,11 @@ export const DronMarker = props => {
     const getIcon = marker.getIcon();
 
     marker.setPosition(position);
-
-    if (
-      controlGpArcrftWarnList?.filter(i => i.cntrlId === gps.controlId).length >
-      0
-    ) {
-      if (controlGpArcrftWarnList[0].controlWarnCd) {
+    const warnList = controlGpArcrftWarnList?.filter(
+      i => i.cntrlId === gps.controlId
+    );
+    if (warnList.length > 0) {
+      if (warnList[0].controlWarnCd) {
         marker.setIcon({
           content: `<img ${getIcon.content.substr(
             getIcon.content.indexOf('src'),

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

@@ -23,7 +23,8 @@ const DronToast = () => {
     state => state.controlGpLogState
   );
   const [toastId, setToastId] = useState();
-  // const [is, setIs] = useState(false);
+
+  let warningList = [];
 
   useEffect(() => {
     if (controlGpArcrftWarnList) {
@@ -47,28 +48,23 @@ 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);
-        }
+        warningList.push(controlGpArcrftWarnList[i].controlWarnCd);
       }
+
+      warningList.find(i => i) ? toggle(true) : toggle(false);
     }
   }, [controlGpArcrftWarnList]);
 

src/utility/hooks/useAudio.js

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

test/pav-warning.js

@@ -1,51 +1,57 @@
-const {getConnection, writeData} = require("./pav-client")
-const {getCoordsFormBetweenCoord, dumyData} = require("./pav-utils")
+const { getConnection, writeData } = require('./pav-client');
+const { getCoordsFormBetweenCoord, dumyData } = require('./pav-utils');
 
 // const host = "192.168.0.24"
 // const host = "localhost"
-const host = "211.253.38.218"
-const port = 8082
+const host = '192.168.0.34';
+const port = 8082;
 
 // 기본정보
-const prefix = 'TEST-DRON-W-'
+const prefix = 'PA';
 
 const pathSampleCoord = [
-    [37.5215, 126.6050],
-    [37.5215, 126.6082],
-    [37.5210, 126.6082],
-    [37.5210, 126.6057],
+  [37.5215, 126.605],
+  [37.5215, 126.61],
+  //   [37.5215, 126.6082],
+  [37.521, 126.6082],
+  [37.521, 126.6057],
   [37.5205, 126.6057],
   [37.5205, 126.6082],
-    [37.5200, 126.6082],
-    [37.5200, 126.6057],
+  [37.52, 126.6082],
+  [37.52, 126.6057],
   [37.5195, 126.6057],
   [37.5195, 126.6082],
-    [37.5190, 126.6082],
-    [37.5190, 126.6050]
-]
+  [37.519, 126.6082],
+  [37.519, 126.605]
+];
 
-const divDist = 10 // [m]
+const divDist = 10; // [m]
 
 // 특정거리에 따른 좌표 추출
-const getCoords = (coords) => {
+const getCoords = coords => {
   if (!coords || coords.length < 1) return;
   const totalCoords = [];
   for (let i = 1; i < coords.length; i++) {
-        const divCoords = getCoordsFormBetweenCoord(coords[i - 1], coords[i], divDist);
-        totalCoords.push(...divCoords)
+    const divCoords = getCoordsFormBetweenCoord(
+      coords[i - 1],
+      coords[i],
+      divDist
+    );
+    totalCoords.push(...divCoords);
   }
   return totalCoords;
-}
+};
 
 const getClient = () => {
-    const dronName = prefix + '001';
+  const dronName = prefix + '003';
+  //   const dronName = prefix + '0000001A';
 
   const client = {};
-    client.dronName = dronName
+  client.dronName = dronName;
   client.socket = getConnection(dronName, host, port);
   client.data = getCoords(pathSampleCoord);
   return client;
-}
+};
 
 const sendData = (client, cnt) => {
   const data = {
@@ -59,19 +65,19 @@ const sendData = (client, cnt) => {
         lon: client.data[cnt][1]
       }
     ]
-    }
+  };
   writeData(client.socket, JSON.stringify(data));
   iteratorSendData(++cnt);
-}
+};
 
 const client = getClient();
 
 const iteratorSendData = (cnt = 0) => {
   if (cnt >= client.data.length) {
-        client.socket.destroy()
+    client.socket.destroy();
     return;
   }
   setTimeout(() => sendData(client, cnt), 1000);
-}
+};
 
-iteratorSendData()
+iteratorSendData();