From 92829c456fd220c1fe3a9bb45d71c4f462bbd70f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junheee@palnet.co.kr>
Date: Fri, 11 Nov 2022 14:02:29 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D=EC=84=9C?=
 =?UTF-8?q?=20=EB=82=A0=EC=94=A8=ED=8F=BC=20=EB=A1=9C=EB=94=A9=EB=B0=94=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../basis/flight/plan/FlightPlanAreaMap.js    |  30 +-
 .../basis/flight/plan/WeatherContainer.js     | 400 +++++++++---------
 2 files changed, 221 insertions(+), 209 deletions(-)

diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js
index 858954d3..27b5465d 100644
--- a/src/components/basis/flight/plan/FlightPlanAreaMap.js
+++ b/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}
-            >
-              날씨
-            </Button.Ripple>) : null
-            : <></>}
+          {areaCoordList ? (
+            areaCoordList[0].coordList[0].lat ? (
+              <Button.Ripple color='primary' onClick={handler}>
+                날씨
+              </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}>
diff --git a/src/containers/basis/flight/plan/WeatherContainer.js b/src/containers/basis/flight/plan/WeatherContainer.js
index 131ef83d..e83781ca 100644
--- a/src/containers/basis/flight/plan/WeatherContainer.js
+++ b/src/containers/basis/flight/plan/WeatherContainer.js
@@ -1,215 +1,229 @@
 import {
-    TodayWeather,
-    TomorrowWeahter,
-    AfterTomorrowWeahter,
-    LastwWeahter
-} from "../../../../components/basis/flight/plan/TodayWeather"
+  TodayWeather,
+  TomorrowWeahter,
+  AfterTomorrowWeahter,
+  LastwWeahter
+} 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 [dayData, setdayData] = useState({});
-
-    const dispatch = useDispatch();
-    const { weather } = useSelector(state => state.flightState);
-    let now = moment();
-    let date = moment().format('YYYYMMDD');
-    let time = moment().format('HHmm');
-    let plus_day1 = moment().add(1, 'day').format('YYYYMMDD');
-    let plus_day2 = moment().add(2, 'day').format('YYYYMMDD');
-    useEffect(() => {
-        if (weather?.response.body.items) {
-            let wheatherobj = {};
-            const weatherData = weather.response.body.items?.item;
-            //오늘 날씨 필터링
-            const todayres = weatherData.filter(
-                weatherData => weatherData.fcstDate == date
-            );
-            const todayData = todayres.filter(todayres => {
-                switch (todayres.category) {
-                    case 'TMP':
-                    case 'SKY':
-                    case 'VEC':
-                    case 'WSD':
-                    case 'PTY':
-                        return { ...todayres };
-                }
-            });
-            //내일 날씨 필터링todayres.category == ("TMP" || "SKY" || "VEC" || "WSD" || "PTY")
-            const tomorrowres = weatherData.filter(
-                weatherData => weatherData.fcstDate == plus_day1
-            );
-            const tomorrowData = tomorrowres.filter(tomorrowres => {
-                switch (tomorrowres.category) {
-                    case 'TMP':
-                    case 'SKY':
-                    case 'VEC':
-                    case 'WSD':
-                    case 'PTY':
-                        return { ...todayres };
-                }
-            });
-            //모레 날씨 필터링
-            const afterres = weatherData.filter(
-                weatherData => weatherData.fcstDate == plus_day2
-            );
-            const afterData = afterres.filter(afterres => {
-                switch (afterres.category) {
-                    case 'TMP':
-                    case 'SKY':
-                    case 'VEC':
-                    case 'WSD':
-                    case 'PTY':
-                        return { ...todayres };
-                }
-            });
-            wheatherobj = {
-                todayData,
-                tomorrowData,
-                afterData
-            };
-            setdayData({ ...wheatherobj });
+  const dispatch = useDispatch();
+  const { weather } = useSelector(state => state.flightState);
+  let now = moment();
+  let date = moment().format('YYYYMMDD');
+  let time = moment().format('HHmm');
+  let plus_day1 = moment().add(1, 'day').format('YYYYMMDD');
+  let plus_day2 = moment().add(2, 'day').format('YYYYMMDD');
+  useEffect(() => {
+    if (weather?.response.body.items) {
+      let wheatherobj = {};
+      const weatherData = weather.response.body.items?.item;
+      //오늘 날씨 필터링
+      const todayres = weatherData.filter(
+        weatherData => weatherData.fcstDate == date
+      );
+      const todayData = todayres.filter(todayres => {
+        switch (todayres.category) {
+          case 'TMP':
+          case 'SKY':
+          case 'VEC':
+          case 'WSD':
+          case 'PTY':
+            return { ...todayres };
         }
-    }, [weather]);
-    useEffect(() => {
-        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);
-
-            let now = new Date();
-            let hours = now.getHours();
-            let minutes = now.getMinutes();
-            let basetime = '2300';
-
-            if (hours >= 2 && minutes > 9 && hours <= 5) {
-                basetime = '0200';
-            } else if (hours >= 5 && minutes > 9 && hours < 8) {
-                basetime = '0500';
-            } else if (hours <= 8 && minutes < 10) {
-                basetime = '0500';
-            } else if (hours >= 8 && minutes > 9 && hours < 11) {
-                basetime = '0800';
-            } else if (hours <= 11 && minutes < 10) {
-                basetime = '0800';
-            } else if (hours >= 11 && minutes > 9 && hours < 14) {
-                basetime = '1100';
-            } else if (hours <= 14 && minutes < 10) {
-                basetime = '1100';
-            } else if (hours >= 14 && minutes > 9 && hours < 17) {
-                basetime = '1400';
-            } else if (hours <= 17 && minutes < 10) {
-                basetime = '1400';
-            } else if (hours >= 17 && minutes > 9 && hours < 20) {
-                basetime = '1700';
-            } else if (hours <= 20 && minutes < 10) {
-                basetime = '1700';
-            } else if (hours >= 20 && minutes > 9 && hours < 23) {
-                basetime = '2000';
-            } else if (hours <= 23 && minutes < 10) {
-                basetime = '2000';
-            } else basetime = '2300';
-
-            const apidata = {
-                serviceKey:
-                    'r6RMUsk3Vtama7D6uq7MiWV9dTC9MwfIIr4%2F45y0uVNw6BaYbgpKmL%2BLUDFVTfIYUmEe4K%2FaniEjdV9mg5t82Q%3D%3D',
-                numOfRows: 1000,
-                pageNo: 1,
-                dataType: 'JSON',
-                base_date: date,
-                base_time: basetime,
-                nx: rs.x,
-                ny: rs.y,
-                nx2: nx,
-                ny2: ny
-            };
-            dispatch(FlightweatherAction.request(apidata));
+      });
+      //내일 날씨 필터링todayres.category == ("TMP" || "SKY" || "VEC" || "WSD" || "PTY")
+      const tomorrowres = weatherData.filter(
+        weatherData => weatherData.fcstDate == plus_day1
+      );
+      const tomorrowData = tomorrowres.filter(tomorrowres => {
+        switch (tomorrowres.category) {
+          case 'TMP':
+          case 'SKY':
+          case 'VEC':
+          case 'WSD':
+          case 'PTY':
+            return { ...todayres };
+        }
+      });
+      //모레 날씨 필터링
+      const afterres = weatherData.filter(
+        weatherData => weatherData.fcstDate == plus_day2
+      );
+      const afterData = afterres.filter(afterres => {
+        switch (afterres.category) {
+          case 'TMP':
+          case 'SKY':
+          case 'VEC':
+          case 'WSD':
+          case 'PTY':
+            return { ...todayres };
         }
-    }, [mapAreaCoordList]);
+      });
+      wheatherobj = {
+        todayData,
+        tomorrowData,
+        afterData
+      };
+      setdayData({ ...wheatherobj });
+    }
+  }, [weather]);
+  useEffect(() => {
+    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);
 
+      let now = new Date();
+      let hours = now.getHours();
+      let minutes = now.getMinutes();
+      let basetime = '2300';
 
-    const [active, setActive] = useState('active');
-    const [activeTab, setActiveTab] = useState('1');
-    const toggle = tab => {
-        return setActiveTab(tab);
-    };
+      if (hours >= 2 && minutes > 9 && hours <= 5) {
+        basetime = '0200';
+      } else if (hours >= 5 && minutes > 9 && hours < 8) {
+        basetime = '0500';
+      } else if (hours <= 8 && minutes < 10) {
+        basetime = '0500';
+      } else if (hours >= 8 && minutes > 9 && hours < 11) {
+        basetime = '0800';
+      } else if (hours <= 11 && minutes < 10) {
+        basetime = '0800';
+      } else if (hours >= 11 && minutes > 9 && hours < 14) {
+        basetime = '1100';
+      } else if (hours <= 14 && minutes < 10) {
+        basetime = '1100';
+      } else if (hours >= 14 && minutes > 9 && hours < 17) {
+        basetime = '1400';
+      } else if (hours <= 17 && minutes < 10) {
+        basetime = '1400';
+      } else if (hours >= 17 && minutes > 9 && hours < 20) {
+        basetime = '1700';
+      } else if (hours <= 20 && minutes < 10) {
+        basetime = '1700';
+      } else if (hours >= 20 && minutes > 9 && hours < 23) {
+        basetime = '2000';
+      } else if (hours <= 23 && minutes < 10) {
+        basetime = '2000';
+      } else basetime = '2300';
 
-    return (
+      const apidata = {
+        serviceKey:
+          'r6RMUsk3Vtama7D6uq7MiWV9dTC9MwfIIr4%2F45y0uVNw6BaYbgpKmL%2BLUDFVTfIYUmEe4K%2FaniEjdV9mg5t82Q%3D%3D',
+        numOfRows: 1000,
+        pageNo: 1,
+        dataType: 'JSON',
+        base_date: date,
+        base_time: basetime,
+        nx: rs.x,
+        ny: rs.y,
+        nx2: nx,
+        ny2: ny
+      };
+      dispatch(FlightweatherAction.request(apidata));
+    }
+  }, [mapAreaCoordList]);
 
+  const [active, setActive] = useState('active');
+  const [activeTab, setActiveTab] = useState('1');
+  const toggle = tab => {
+    return setActiveTab(tab);
+  };
 
+  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 ? (
-                <div className='layer-weather-box'>
-                    <div className='layer-weather-info'>
-                        <div className='layer-weather-table'>
-                            <div className='layer-weather-address'>
-                                검색하신 지역의 날씨 정보입니다.
-                                <span>
-                                    <Compass size={20} /> {weather.area1 != undefined ?
-                                        `${weather.area1} ${weather.area2} ${weather.area3} ${weather.landNum}` : `선택하신 좌표는 없는 주소입니다.`}
-                                </span>
-                            </div>
-                            <div className='tab-menu'>
-                                <ul>
-                                    <li
-                                        className={activeTab == 1 ? `active` : ''}
-                                        onClick={() => toggle('1')}
-                                    >
-                                        오늘
-                                    </li>
-                                    <li
-                                        className={activeTab == 2 ? `active` : ''}
-                                        onClick={() => toggle('2')}
-                                    >
-                                        내일
-                                    </li>
-                                    <li
-                                        className={activeTab == 3 ? `active` : ''}
-                                        onClick={() => toggle('3')}
-                                    >
-                                        모레
-                                    </li>
-                                </ul>
-                            </div>
-                            {activeTab == 1 ? (
-                                <div className='tab-content active'>
-                                    <TodayWeather todayData={dayData.todayData} />
-                                </div>
-                            ) : (
-                                <></>
-                            )}
-                            {activeTab == 2 ? (
-                                <div className='tab-content active'>
-                                    <TomorrowWeahter
-                                        tomorrowData={dayData.tomorrowData}
-                                    />
-                                </div>
-                            ) : (
-                                <></>
-                            )}
-                            {activeTab == 3 ? (
-                                <div className='tab-content active'>
-                                    <AfterTomorrowWeahter
-                                        afterData={dayData.afterData}
-                                    />
-                                </div>
-                            ) : (
-                                <></>
-                            )}
+          {Object.keys(dayData).length != 0 &&
+          mapAreaCoordList[0]?.coordList[0].lat != 0 ? (
+            <div className='layer-weather-box'>
+              <div className='layer-weather-info'>
+                <div className='layer-weather-table'>
+                  <div className='layer-weather-address'>
+                    검색하신 지역의 날씨 정보입니다.
+                    <span>
+                      <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
+                            className={activeTab == 1 ? `active` : ''}
+                            onClick={() => toggle('1')}
+                          >
+                            오늘
+                          </li>
+                          <li
+                            className={activeTab == 2 ? `active` : ''}
+                            onClick={() => toggle('2')}
+                          >
+                            내일
+                          </li>
+                          <li
+                            className={activeTab == 3 ? `active` : ''}
+                            onClick={() => toggle('3')}
+                          >
+                            모레
+                          </li>
+                        </ul>
+                      </div>
+                      {activeTab == 1 ? (
+                        <div className='tab-content active'>
+                          <TodayWeather todayData={dayData.todayData} />
+                        </div>
+                      ) : (
+                        <></>
+                      )}
+                      {activeTab == 2 ? (
+                        <div className='tab-content active'>
+                          <TomorrowWeahter
+                            tomorrowData={dayData.tomorrowData}
+                          />
                         </div>
-                    </div>
+                      ) : (
+                        <></>
+                      )}
+                      {activeTab == 3 ? (
+                        <div className='tab-content active'>
+                          <AfterTomorrowWeahter afterData={dayData.afterData} />
+                        </div>
+                      ) : (
+                        <></>
+                      )}
+                    </>
+                  ) : null}
                 </div>
-            ) : null}
+              </div>
+            </div>
+          ) : null}
         </div>
-
-    )
+      )}
+    </>
+  );
 }
 export default WeatherContainer;