laanc 작성에 따른 관제 레이아웃 변경

src/views/control/main/ControlMain.js

@@ -1,12 +1,5 @@
 import { useEffect, useState } from 'react';
-import {
+import { Map } from 'react-feather';
-  Sun,
-  Map,
-  Navigation2,
-  Cloud,
-  CloudRain,
-  CloudSnow
-} from 'react-feather';
 import { AiOutlinePoweroff } from 'react-icons/ai';
 import { Card } from 'reactstrap';
 import '../../../assets/css/custom.css';
@@ -27,8 +20,8 @@ import {
   laancModeAction
 } from '../../../modules/control/map/actions/controlMapActions';
 import Dddd from '../setting/Dddd';
-
 import ControlMenuLeft from '../menu/ControlMenuLeft';
+import ControlTopPackage from '../menu/ControlTopPackage';
 
 const ControlMain = () => {
   const dispatch = useDispatch();
@@ -39,9 +32,7 @@ const ControlMain = () => {
   const { controlGpList, controlGroupAuthInfo } = useSelector(
     state => state.controlGpState
   );
-  const { controlDetail, controlWheather } = useSelector(
+
-    state => state.controlGpDtlState
-  );
   const { controlGpCountDrone, controlGpCountFlight } = useSelector(
     state => state.controlGpCountState
   );
@@ -134,20 +125,6 @@ const ControlMain = () => {
     ny: 126.793722
   };
 
-  const weathericon = () => {
-    if (controlWheather) {
-      let wheatherDetail = controlWheather.items.item;
-      let skyDetail = wheatherDetail[6].fcstValue;
-      if (skyDetail == 1 || skyDetail == 2 || skyDetail == 4) {
-        return <CloudRain size={20} />;
-      } else if (skyDetail == 3) {
-        return <CloudSnow size={20} />;
-      } else if (wheatherDetail[5].fcstValue == 1) {
-        return <Sun size={20} />;
-      } else return <Cloud size={20} />;
-    }
-  };
-
   const handlerLaanc = () => {
     dispatch(laancModeAction(!isLaanc));
   };
@@ -192,97 +169,16 @@ const ControlMain = () => {
             : 'main-data main-data-test'
         }
       >
-        <div className='main-data-box wather-data'>
+        {/* top components start */}
-          <Card>
+        {isLaanc ? null : (
-            <div className='data-box-header'>
+          <ControlTopPackage
-              <span className='box-ti'>
+            dronCnt={droneCount}
-                {!isClickObject
+            uamCnt={uamCount}
-                  ? '김포공항'
+            flightCnt={controlGpCountFlight ? controlGpCountFlight.length : 0}
-                  : !controlDetail?.stAreaNm
+            handlerLaanc={handlerLaanc}
-                  ? `${controlDetail?.res.area1} ${controlDetail?.res.area2} ${controlDetail?.res.area3} ${controlDetail?.res.landNm} ${controlDetail?.res.landNum} `
+          />
-                  : controlDetail?.stAreaNm}
+        )}
-              </span>
+        {/* top components end */}
-              <span className=''>&nbsp;{weathericon()}</span>
-            </div>
-            <div className='data-list-box'>
-              <div className='data-list'>
-                <span>기온</span>
-                <span>
-                  {!isClickObject
-                    ? controlWheather?.items.item[12].fcstValue
-                    : controlDetail?.items.item[12].fcstValue}
-                  ℃
-                </span>
-              </div>
-              <div className='data-list'>
-                <span>풍향</span>
-                <span>
-                  <Navigation2
-                    className='navigation-icon'
-                    style={{
-                      transform: !isClickObject
-                        ? `rotate(${controlWheather?.items.item[3].fcstValue}deg)`
-                        : `rotate(${controlDetail?.items.item[3].fcstValue}deg)`
-                    }}
-                  />
-                </span>
-              </div>
-              <div className='data-list'>
-                <span>풍속</span>
-                <span>
-                  {!isClickObject
-                    ? controlWheather?.items.item[4].fcstValue
-                    : controlDetail?.items.item[4].fcstValue}{' '}
-                  m/s
-                </span>
-              </div>
-            </div>
-          </Card>
-        </div>
-        <div className='main-data-box flight-data'>
-          <Card>
-            <div className='data-box-header'>
-              <span className='box-ti'>비행중인 기체</span>
-            </div>
-            <div className='data-list-box'>
-              <div className='data-list'>
-                <span>드론</span>
-                {/* <span>{controlGpList ? controlGpList.length : 0}</span> */}
-                {/* <span>
-                  {controlGpCountDrone?.length > 0
-                    ? controlGpCountDrone?.length
-                    : 0}
-                </span> */}
-                <span>{droneCount}</span>
-              </div>
-              <div className='data-list'>
-                <span>UAM</span>
-                <span>{uamCount}</span>
-              </div>
-              <div className='data-list'>
-                <span>항공기</span>
-                {/* <span>2147대</span> */}
-                <span>
-                  {controlGpCountFlight?.length > 0
-                    ? controlGpCountFlight?.length
-                    : 0}
-                </span>
-              </div>
-            </div>
-          </Card>
-        </div>
-        <div className='main-data-box flight-data'>
-          <Card>
-            <div className='data-box-header'>
-              <span className='box-ti'>LAANC 시스템</span>
-            </div>
-            <div className='data-list-box'>
-              <div className='data-list' style={{ cursor: 'pointer' }}>
-                <span onClick={handlerLaanc}>승인요청 바로가기</span>
-              </div>
-            </div>
-          </Card>
-        </div>
       </div>
       {oepnReportList ? (
         <ControlReportList

src/views/control/menu/ControlTopPackage.js

@@ -0,0 +1,111 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { Sun, Navigation2, Cloud, CloudRain, CloudSnow } from 'react-feather';
+import { Card } from 'reactstrap';
+
+function ControlTopPackage({ dronCnt, uamCnt, flightCnt = 0, handlerLaanc }) {
+  const { controlDetail, controlWheather } = useSelector(
+    state => state.controlGpDtlState
+  );
+  const { isClickObject } = useSelector(state => state.controlMapReducer);
+
+  const weatherIcon = () => {
+    if (controlWheather) {
+      let wheatherDetail = controlWheather.items.item;
+      let skyDetail = wheatherDetail[6].fcstValue;
+      if (skyDetail == 1 || skyDetail == 2 || skyDetail == 4) {
+        return <CloudRain size={20} />;
+      } else if (skyDetail == 3) {
+        return <CloudSnow size={20} />;
+      } else if (wheatherDetail[5].fcstValue == 1) {
+        return <Sun size={20} />;
+      } else return <Cloud size={20} />;
+    }
+  };
+
+  return (
+    <>
+      <div className='main-data-box wather-data'>
+        <Card>
+          <div className='data-box-header'>
+            <span className='box-ti'>
+              {!isClickObject
+                ? '김포공항'
+                : !controlDetail?.stAreaNm
+                ? `${controlDetail?.res.area1} ${controlDetail?.res.area2} ${controlDetail?.res.area3} ${controlDetail?.res.landNm} ${controlDetail?.res.landNum} `
+                : controlDetail?.stAreaNm}
+            </span>
+            <span className=''>&nbsp;{weatherIcon()}</span>
+          </div>
+          <div className='data-list-box'>
+            <div className='data-list'>
+              <span>기온</span>
+              <span>
+                {!isClickObject
+                  ? controlWheather?.items.item[12].fcstValue
+                  : controlDetail?.items.item[12].fcstValue}
+                ℃
+              </span>
+            </div>
+            <div className='data-list'>
+              <span>풍향</span>
+              <span>
+                <Navigation2
+                  className='navigation-icon'
+                  style={{
+                    transform: !isClickObject
+                      ? `rotate(${controlWheather?.items.item[3].fcstValue}deg)`
+                      : `rotate(${controlDetail?.items.item[3].fcstValue}deg)`
+                  }}
+                />
+              </span>
+            </div>
+            <div className='data-list'>
+              <span>풍속</span>
+              <span>
+                {!isClickObject
+                  ? controlWheather?.items.item[4].fcstValue
+                  : controlDetail?.items.item[4].fcstValue}{' '}
+                m/s
+              </span>
+            </div>
+          </div>
+        </Card>
+      </div>
+      <div className='main-data-box flight-data'>
+        <Card>
+          <div className='data-box-header'>
+            <span className='box-ti'>비행중인 기체</span>
+          </div>
+          <div className='data-list-box'>
+            <div className='data-list'>
+              <span>드론</span>
+              <span>{dronCnt}</span>
+            </div>
+            <div className='data-list'>
+              <span>UAM</span>
+              <span>{uamCnt}</span>
+            </div>
+            <div className='data-list'>
+              <span>항공기</span>
+              <span>{flightCnt}</span>
+            </div>
+          </div>
+        </Card>
+      </div>
+      <div className='main-data-box flight-data'>
+        <Card>
+          <div className='data-box-header'>
+            <span className='box-ti'>LAANC 시스템</span>
+          </div>
+          <div className='data-list-box'>
+            <div className='data-list' style={{ cursor: 'pointer' }}>
+              <span onClick={handlerLaanc}>승인요청 바로가기</span>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </>
+  );
+}
+
+export default ControlTopPackage;