From edd1be5a87e7f2e83d5917363bf7cdeda7db2b0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junh_eee@naver.com>
Date: Wed, 15 Nov 2023 18:36:10 +0900
Subject: [PATCH] =?UTF-8?q?=EB=93=9C=EB=A1=A0=EA=B5=90=ED=86=B5=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EB=B9=84=EC=A0=95=EC=83=81=20=ED=86=A0=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=ED=91=9C=EC=B6=9C=20=ED=8C=8C=EC=9D=BC=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1(=EC=9E=91=EC=97=85=EC=A0=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/mapbox/dron/DronToast.js | 93 +++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 src/components/map/mapbox/dron/DronToast.js

diff --git a/src/components/map/mapbox/dron/DronToast.js b/src/components/map/mapbox/dron/DronToast.js
new file mode 100644
index 0000000..ecbe155
--- /dev/null
+++ b/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>;
+}