드론교통관리 비정상 토스트 표출 파일 생성(작업전)

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

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import useAudio from '../../../../utility/hooks/useAudio';
+import warning from '../../../../assets/sounds/warning.mp3';
+import { toast } from 'react-toastify';
+import { Fragment } from 'react';
+import { objectClickAction } from '../../../../modules/control/map/actions/controlMapActions';
+import {
+  controlGpDtlAction,
+  controlGpFlightPlanAction
+} from '../../../../modules/control/gp';
+
+export default function DronToast() {
+  const dispatch = useDispatch();
+  const [playing, toggle] = useAudio(warning);
+  const { controlGpArcrftWarnList } = useSelector(
+    state => state.controlGpLogState
+  );
+  const [toastId, setToastId] = useState();
+
+  let warningList = [];
+
+  useEffect(() => {
+    if (controlGpArcrftWarnList) {
+      if (!toastId) {
+        for (let i = 0; i < controlGpArcrftWarnList.length; i++) {
+          if (controlGpArcrftWarnList[i].controlWarnCd) {
+            const id = toast.info(
+              toastRender(
+                `${controlGpArcrftWarnList[i].idntfNum} 비정상 상황 알림`,
+                `경로 상에 비행 구역을 이탈했습니다.`
+              ),
+              {
+                autoClose: false,
+                hideProgressBar: true,
+                position: toast.POSITION.BOTTOM_RIGHT,
+                onClick: () => {
+                  handlerToastClick(
+                    controlGpArcrftWarnList[i].cntrlId,
+                    controlGpArcrftWarnList[i].idntfNum
+                  );
+                  // setToastId(null);
+                },
+                onClose: () => {
+                  // setIs(true);
+                  toggle(false);
+                  setToastId(null);
+                }
+              }
+            );
+
+            setToastId(id);
+            break;
+          }
+        }
+      }
+      for (let i = 0; i < controlGpArcrftWarnList.length; i++) {
+        warningList.push(controlGpArcrftWarnList[i].controlWarnCd);
+      }
+
+      warningList.find(i => i) ? toggle(true) : toggle(false);
+    }
+  }, [controlGpArcrftWarnList]);
+
+  const handlerToastClick = (controlId, idntfNum) => {
+    dispatch(objectClickAction(controlId));
+    dispatch(controlGpDtlAction.request(controlId));
+    dispatch(controlGpFlightPlanAction.request(idntfNum));
+  };
+
+  const toastRender = (title, message) => {
+    return (
+      <Fragment>
+        <div className='toastify-header'>
+          <div className='title-wrapper'>
+            <Avatar size='sm' color='info' icon={<Info size={10} />} />
+            <h6 className='text-info ml-50 mb-0' style={{ fontSize: 'small' }}>
+              {title}
+            </h6>
+          </div>
+        </div>
+
+        <div className='toastify-body'>
+          <span>{message}</span>
+        </div>
+      </Fragment>
+    );
+  };
+
+  return null;
+
+  return <div>DronToast</div>;
+}