실시간 비정상 알림 창 아이콘 수정

src/views/control/alarm/ControlAlarmList.js

@@ -3,6 +3,7 @@ import { X } from 'react-feather';
 import { useDispatch, useSelector } from 'react-redux';
 import { controlGpArcrftWarnAction, controlGpLogAction } from '../../../modules/control/gp/actions/controlGpAction';
 import ControlAlarmDetail from './ControlAlarmDetail';
+import { Badge } from 'reactstrap';
 
 const ControlAlarmList = props => {
     const dispatch = useDispatch();
@@ -12,6 +13,8 @@ const ControlAlarmList = props => {
     const { controlGpList } = useSelector(state => state.controlGpState);
     const { controlGpArcrftWarnList } = useSelector(state => state.controlGpLogState);    
     const { controlGpWarnLog } = useSelector(state => state.controlGpLogState);
+    const { objectId, isClickObject } = useSelector(state => state.controlMapReducer);
+
     
     const [total, setTotal] = useState({
         totalDroneCnt: 0,
@@ -25,6 +28,13 @@ const ControlAlarmList = props => {
         dispatch(controlGpLogAction.request({id : cntrlId}));
     }
 
+    useEffect(() => {
+        if(isClickObject) {            
+            props.setOpenAlarmList(false);
+        }
+
+    }, [objectId, isClickObject])
+
     useEffect(() => {
         if(controlGpArcrftWarnList) {
             let totalWarnCnt = 0;
@@ -89,8 +99,22 @@ const ControlAlarmList = props => {
                     <dl className='notice-list'>
                         <dt>
                             <div className='list-ti'>
-                                <div className='list-left-txt'>{total? total.totalDroneCnt: 0}대 비행 중</div>
+                                <div className='list-left-txt'>드론 현황</div>
-                                <div className='list-right-txt'>전체 {total? total.totalWarnCnt : 0}건</div>
+                                <div className='list-right-txt'>                                    
+                                    <Badge color='light-primary'>
+                                        {total? total.totalDroneCnt: 0}대 비행 중
+                                    </Badge>                                    
+                                </div>                                
+                            </div>                            
+                        </dt>
+                        <dt>
+                            <div className='list-ti'>        
+                                <div className='list-left-txt'>비정상 알림 전체</div>
+                                <div className='list-right-txt'>
+                                    <Badge color='light-primary'>
+                                        {total? total.totalWarnCnt : 0}건
+                                    </Badge>
+                                </div>
                             </div>
                         </dt>
                     </dl>

src/views/control/main/ControlMain.js

@@ -5,7 +5,8 @@ import logo from '../../../assets/images/pal_logo.png';
 
 import { Sun, Map, Bell } from 'react-feather';
 
-import { AiOutlinePoweroff } from 'react-icons/ai';
+import { AiOutlinePoweroff, AiOutlineExclamation } from 'react-icons/ai';
+import { IoAlertOutline } from 'react-icons/io5';
 
 import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
 
@@ -19,11 +20,15 @@ import WebsocketClient from '../../../components/websocket/WebsocketClient';
 import { useDispatch, useSelector } from 'react-redux';
 
 import * as Actions from '../../../modules/account/login/actions/authAction';
+import { objectUnClickAction } from '../../../modules/control/map/actions/controlMapActions';
 
 const ControlMain = () => {
   const dispatch = useDispatch();
 
   const { isClickObject } = useSelector(state => state.controlMapReducer);
+  const { controlGpList } = useSelector(state => state.controlGpState);
+
+  const [alarm, setAlarm] = useState(false);
 
   const [oepnReportList, setOpenReportList] = useState(false);
   const [openReportDetail, setOpenReportDetail] = useState(false);
@@ -45,10 +50,14 @@ const ControlMain = () => {
       setOpenWeatherList(true);
       setOpenAlarmList(false);
     } else if (val === 'alarmList') {
+      dispatch(objectUnClickAction());
+
       setOpenReportList(false);
       setOpenReportDetail(false);
       setOpenWeatherList(false);
       setOpenAlarmList(true);
+
+      setAlarm(false);
     }
   };
 
@@ -61,6 +70,20 @@ const ControlMain = () => {
     dispatch(Actions.logout.request());
   };
 
+  useEffect(() => {
+
+    if(controlGpList) {
+      const warnGps = controlGpList.find(gps => {
+        return gps.controlWarnNotyCd === true
+      })
+
+      if(warnGps) {
+        setAlarm(true);
+      }
+    }
+
+  }, [controlGpList]);
+
   return (
     <>
       <ControlAlarmNotice />
@@ -88,7 +111,7 @@ const ControlMain = () => {
           </li> */}
           <li>
             <button onClick={() => openMenu('alarmList')}>
-              <Bell width='20' height='20' />
+              {alarm ? <IoAlertOutline size={25} /> : <Bell width='20' height='20' />}
             </button>
           </li>
         </ul>