From 7c3b9485c97b39dd0245988912a0ea81472ffd3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?=
 <kimjh2369@gmail.com>
Date: Mon, 14 Nov 2022 17:11:56 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EA=B3=84=ED=9A=8D?=
 =?UTF-8?q?=EC=84=9C=20=EB=82=A0=EC=94=A8=20=EB=AA=A8=EB=8B=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../basis/flight/plan/FlightPlanAreaMap.js    |   3 -
 .../basis/flight/plan/WeatherContainer.js     | 154 ++++++++++--------
 2 files changed, 83 insertions(+), 74 deletions(-)

diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js
index 27b5465..6cd5ad3 100644
--- a/src/components/basis/flight/plan/FlightPlanAreaMap.js
+++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js
@@ -365,9 +365,6 @@ const FlightPlanAreaMap = props => {
         >
           <ModalHeader toggle={handler}>날씨 정보</ModalHeader>
           <ModalBody>
-            <p className='ti'>
-              오늘 날짜 기준으로 3일 이내 날짜만 조회 가능합니다.
-            </p>
             <WeatherContainer mapAreaCoordList={mapAreaCoordList} />
           </ModalBody>
           <ModalFooter>
diff --git a/src/containers/basis/flight/plan/WeatherContainer.js b/src/containers/basis/flight/plan/WeatherContainer.js
index e83781c..287ea58 100644
--- a/src/containers/basis/flight/plan/WeatherContainer.js
+++ b/src/containers/basis/flight/plan/WeatherContainer.js
@@ -145,83 +145,95 @@ export function WeatherContainer({ mapAreaCoordList }) {
   return (
     <>
       {loading ? (
-        <div className='grid-loading'>
-          <div>
-            <Spinner color='primary' />
-            <span>Loading...</span>
-          </div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}
+        >
+          <Spinner color='primary' />
+          <span>Loading...</span>
         </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>
+        <>
+          <p className='ti'>
+            오늘 날짜 기준으로 3일 이내 날짜만 조회 가능합니다.
+          </p>
+          <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>
 
-                  {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>
-                      ) : (
-                        <></>
-                      )}
-                      {activeTab == 3 ? (
-                        <div className='tab-content active'>
-                          <AfterTomorrowWeahter afterData={dayData.afterData} />
+                    {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>
-                      ) : (
-                        <></>
-                      )}
-                    </>
-                  ) : null}
+                        {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>
+                        ) : (
+                          <></>
+                        )}
+                      </>
+                    ) : null}
+                  </div>
                 </div>
               </div>
-            </div>
-          ) : null}
-        </div>
+            ) : null}
+          </div>
+        </>
       )}
     </>
   );