비행 계획서 날씨 모달 수정

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>

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>
+        </>
       )}
     </>
   );