비행계획서 날씨폼 로딩바 추가

src/components/basis/flight/plan/FlightPlanAreaMap.js

@@ -68,7 +68,6 @@ const FlightPlanAreaMap = props => {
     ModeInit();
   }, [mapControl.drawType]);
 
-
   useEffect(() => {
     if (areaCoordList) {
       if (
@@ -349,28 +348,27 @@ const FlightPlanAreaMap = props => {
           >
             초기화
           </Button.Ripple>
-          {areaCoordList ?
-            areaCoordList[0].coordList[0].lat ? (<Button.Ripple
-              color='primary'
-              onClick={handler}
-            >
+          {areaCoordList ? (
+            areaCoordList[0].coordList[0].lat ? (
+              <Button.Ripple color='primary' onClick={handler}>
                 날씨
-            </Button.Ripple>) : null
-            : <></>}
+              </Button.Ripple>
+            ) : null
+          ) : (
+            <></>
+          )}
         </div>
         <Modal
           isOpen={formModal}
           toggle={handler}
           className='modal-dialog-centered'
         >
-          <ModalHeader toggle={handler}>
-            날씨 정보
-          </ModalHeader>
+          <ModalHeader toggle={handler}>날씨 정보</ModalHeader>
           <ModalBody>
-            <p className='ti'>오늘 날짜 기준으로 3일 이내 날짜만 조회 가능합니다.</p>
-            <WeatherContainer
-              mapAreaCoordList={mapAreaCoordList}
-            />
+            <p className='ti'>
+              오늘 날짜 기준으로 3일 이내 날짜만 조회 가능합니다.
+            </p>
+            <WeatherContainer mapAreaCoordList={mapAreaCoordList} />
           </ModalBody>
           <ModalFooter>
             <Button color='primary' onClick={handler}>

src/containers/basis/flight/plan/WeatherContainer.js

@@ -3,19 +3,18 @@ import {
   TomorrowWeahter,
   AfterTomorrowWeahter,
   LastwWeahter
-} from "../../../../components/basis/flight/plan/TodayWeather"
+} from '../../../../components/basis/flight/plan/TodayWeather';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import dfsxyconv from '../../../../utility/dfsxyconv';
 import moment from 'moment';
-import {
-    Compass
-} from 'react-feather';
+import { Compass } from 'react-feather';
 import { FlightweatherAction } from '../../../../modules/basis/flight/actions/basisFlightAction';
+import { Spinner } from 'reactstrap';
 
 export function WeatherContainer({ mapAreaCoordList }) {
-
   const [dayData, setdayData] = useState({});
+  const { loading } = useSelector(state => state.loadingReducer);
 
   const dispatch = useDispatch();
   const { weather } = useSelector(state => state.flightState);
@@ -79,7 +78,10 @@ export function WeatherContainer({ mapAreaCoordList }) {
     }
   }, [weather]);
   useEffect(() => {
-        if (mapAreaCoordList[0]?.coordList[0].lat != 0 || mapAreaCoordList[0]?.coordList[0].lon != 0) {
+    if (
+      mapAreaCoordList[0]?.coordList[0].lat != 0 ||
+      mapAreaCoordList[0]?.coordList[0].lon != 0
+    ) {
       let nx = mapAreaCoordList[0]?.coordList[0].lat;
       let ny = mapAreaCoordList[0]?.coordList[0].lon;
       const rs = dfsxyconv('toXY', nx, ny);
@@ -134,7 +136,6 @@ export function WeatherContainer({ mapAreaCoordList }) {
     }
   }, [mapAreaCoordList]);
 
-
   const [active, setActive] = useState('active');
   const [activeTab, setActiveTab] = useState('1');
   const toggle = tab => {
@@ -142,8 +143,15 @@ export function WeatherContainer({ mapAreaCoordList }) {
   };
 
   return (
-
-
+    <>
+      {loading ? (
+        <div className='grid-loading'>
+          <div>
+            <Spinner color='primary' />
+            <span>Loading...</span>
+          </div>
+        </div>
+      ) : (
         <div className='layer-content'>
           {Object.keys(dayData).length != 0 &&
           mapAreaCoordList[0]?.coordList[0].lat != 0 ? (
@@ -153,10 +161,15 @@ export function WeatherContainer({ mapAreaCoordList }) {
                   <div className='layer-weather-address'>
                     검색하신 지역의 날씨 정보입니다.
                     <span>
-                                    <Compass size={20} /> {weather.area1 != undefined ?
-                                        `${weather.area1} ${weather.area2} ${weather.area3} ${weather.landNum}` : `선택하신 좌표는 없는 주소입니다.`}
+                      <Compass size={20} />{' '}
+                      {weather.area1 != undefined
+                        ? `${weather.area1} ${weather.area2} ${weather.area3} ${weather.landNum}`
+                        : `선택하신 좌표는 없는 주소입니다.`}
                     </span>
                   </div>
+
+                  {weather.area1 != undefined ? (
+                    <>
                       <div className='tab-menu'>
                         <ul>
                           <li
@@ -197,19 +210,20 @@ export function WeatherContainer({ mapAreaCoordList }) {
                       )}
                       {activeTab == 3 ? (
                         <div className='tab-content active'>
-                                    <AfterTomorrowWeahter
-                                        afterData={dayData.afterData}
-                                    />
+                          <AfterTomorrowWeahter afterData={dayData.afterData} />
                         </div>
                       ) : (
                         <></>
                       )}
+                    </>
+                  ) : null}
                 </div>
               </div>
             </div>
           ) : null}
         </div>
-
-    )
+      )}
+    </>
+  );
 }
 export default WeatherContainer;