diff --git a/src/assets/sounds/warning.mp3 b/src/assets/sounds/warning.mp3
new file mode 100644
index 00000000..a62c93a9
Binary files /dev/null and b/src/assets/sounds/warning.mp3 differ
diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js
index 8d84950c..b5aeb670 100644
--- a/src/components/map/naver/dron/DronMarker.js
+++ b/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: ``,
+ anchor: getIcon.anchor
+ });
+ } else {
+ marker.setIcon({
+ content: ``,
+ 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);
diff --git a/src/components/map/naver/dron/DronToast.js b/src/components/map/naver/dron/DronToast.js
index 9c89de3f..c6c81cb1 100644
--- a/src/components/map/naver/dron/DronToast.js
+++ b/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]);
diff --git a/src/utility/hooks/useAudio.js b/src/utility/hooks/useAudio.js
new file mode 100644
index 00000000..90452c39
--- /dev/null
+++ b/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;