비정상 toast 수정

src/components/map/naver/NaverMap.js

@@ -8,6 +8,7 @@ import { FeatureAirZone } from './feature/FeatureAirZone';
 import geoJson from '../geojson/airArea.json';
 import { controlGroupAuthAction } from '../../../modules/control/gp';
 import DronPlan from './dron/DronPlan';
+import DronToast from './dron/DronToast';
 
 export const NaverCustomMap = () => {
     const dispatch = useDispatch();
@@ -70,6 +71,8 @@ export const NaverCustomMap = () => {
                         handleHistoryInit={handleHistoryInit}
                     />
 
+                    <DronToast />
+
                     <FeatureAirZone map={mapObject} naver={naver} features={features} />
                     {/* <NaverMapSearch map={mapObject} naver={naver} /> */}
                     {/* <SensorZone map={mapObject} naver={naver} /> */}

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

@@ -87,28 +87,6 @@ export const DronMarker = props => {
 
     useEffect(() => {
         markerInit();
-
-        if (controlGpList) {
-            controlGpList.forEach(gps => {
-                if (gps.controlWarnCd && gps.controlWarnNotyCd) {                                        
-                    toast.info(                            
-                        <DronToast
-                            title={`${gps.objectId} 비정상 상황 알림`}
-                            message={'경로 상에 비행 구역을 이탈했습니다.'}
-                        />,
-                        {
-                            // autoClose: 3000, 
-                            hideProgressBar: true,
-                            position: toast.POSITION.BOTTOM_RIGHT,
-                            onClick: props => {                         
-                                handlerDronClick(gps.controlId, gps.objectId);
-                            }
-                        }
-                    )                    
-                }                
-            })
-        }
-
     }, [controlGpList]);
 
     useEffect(() => {

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

@@ -4,40 +4,73 @@ import { Fragment } from 'react';
 import { toast } from 'react-toastify';
 import Avatar from '../../../../@core/components/avatar';
 import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'
-import {
+
-    Card,
+const DronToast = () => {
-    CardHeader,
+    const { controlGpList } = useSelector(state => state.controlGpState);
-    CardBody,
+
-    CardTitle,
+    useEffect(() => {
-    Button,
+        if (controlGpList) {
-    Toast,
+            controlGpList.forEach(gps => {
-    ToastBody,
+                if (gps.controlWarnCd && gps.controlWarnNotyCd) {                                        
-    ToastHeader,
+                    toast.info(                                                    
-    Row,
+                        toastRender(
-    Col,
+                            `${gps.objectId} 비정상 상황 알림`,
-} from 'reactstrap';
+                            '경로 상에 비행 구역을 이탈했습니다.'
-import log from '../../../../assets/images/logo/logo.png';
+                        ),
-
+                        {
-
+                            autoClose: 3000, 
-const DronToast = ({ title, message }) => {
+                            hideProgressBar: true,
+                            position: toast.POSITION.BOTTOM_RIGHT,
+                            onClick: props => {                         
+                                handlerDronClick(gps.controlId, gps.objectId);
+                            }
+                        }
+                    )                    
+                }                
+            })
+        }
+    }, [controlGpList]);
+
+    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 (
-        <Fragment>
+        // <Fragment>
-            <div className='toastify-header'>
+        //     <div className='toastify-header'>
-                <div className='title-wrapper'>
+        //         <div className='title-wrapper'>
-                    <Avatar size='sm' color='info' icon={<Info size={12} />} />
+        //             <Avatar size='sm' color='info' icon={<Info size={12} />} />
-                    <h6 className='text-info ml-50 mb-0'>
+        //             <h6 className='text-info ml-50 mb-0'>
-                        {title}
+        //                 {/* {title} */}
-                    </h6>                                        
+        //             </h6>                                        
-                </div>                
+        //         </div>                
-            </div>
+        //     </div>
-
+
-            <div className='toastify-body'>
+        //     <div className='toastify-body'>
-                <span>
+        //         <span>
-                    {message}
+        //             {/* {message} */}
-                </span>
+        //         </span>
-            </div>                            
+        //     </div>                            
-        </Fragment>
+        // </Fragment>
+        null
     )
     
 }