날씨검색 - style 추가

src/views/weather/WeatherView.js

@@ -1,19 +1,17 @@
 import { WINDY_KEY } from '../../configs/constants';
 import React, { useEffect, useState } from 'react';
-import { Search } from 'react-feather'
-import { Card, CardBody, Button, Input, Row, Col, InputGroup, InputGroupAddon, InputGroupText, FormGroup } from 'reactstrap';
+import { Search } from 'react-feather';
+import '../../assets/css/custom.css';
+import { Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
 import { useDispatch, useSelector } from 'react-redux';
 import { flightPlanAPI } from '../../modules/basis/flight/apis/basisFlightApi';
 
-
 const WeatherView = () => {
-
   const [query, setQuery] = useState('');
   const [searchRes, setSearchRes] = useState([]);
   const [isSearch, setIsSearch] = useState(false);
   const dispatch = useDispatch();
   const [map, setMap] = useState();
-  
 
   const options = {
     // Required: API key
@@ -24,7 +22,6 @@ const WeatherView = () => {
     // Optional: Initial state of the map
   };
 
-
   const handleSearch = async () => {
     const res = await flightPlanAPI.searchArea({ query: query });
     setIsSearch(true);
@@ -39,19 +36,20 @@ const WeatherView = () => {
     }
   };
   const handleCoord = (mapx, mapy) => {
-    let utmk = naver.maps.TransCoord.fromTM128ToUTMK(naver.maps.Point(mapx, mapy));
+    let utmk = naver.maps.TransCoord.fromTM128ToUTMK(
+      naver.maps.Point(mapx, mapy)
+    );
     let latlng = naver.maps.TransCoord.fromUTMKToLatLng(utmk);
     setIsSearch(false);
-    
+
     setMap(latlng);
     let options = {
       duration: 800,
       easing: 'easeOutCubic'
-    }
+    };
     // map.morph(latlng, 16, options)
     console.log(map);
-
-  }
+  };
   const handleEnter = e => {
     if (e.key == 'Enter') {
       handleSearch();
@@ -59,7 +57,7 @@ const WeatherView = () => {
   };
   return (
     <>
-      <div className='search-comp'>
+      <div className='d-flex search-comp' style={{ position: 'absolute' }}>
         <div className=''>
           <InputGroup className='search-feather'>
             <InputGroupAddon addonType='prepend'>
@@ -98,7 +96,6 @@ const WeatherView = () => {
                             </span>
                           </div>
                           <div className='address'>
-                            {/* <span>{prev.address}</span> */}
                             <span>{prev.roadAddress}</span>
                           </div>
                         </div>
@@ -113,18 +110,17 @@ const WeatherView = () => {
           </div>
         </div>
       </div>
-      {!map ?
-
+      {!map ? (
         <iframe
-          style={{ width: '100%', height: '99vh' }}
+          style={{ width: '100%', height: '100vh' }}
           src='https://embed.windy.com/embed2.html?lat=37.549&lon=126.658&detailLat=37.549&detailLon=126.658&zoom=7&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=default&radarRange=-1'
-        /> :
+        />
+      ) : (
         <iframe
-          style={{ width: '100%', height: '99vh' }}
+          style={{ width: '100%', height: '100vh' }}
           src={`https://embed.windy.com/embed2.html?lat=${map._lat}&lon=${map._lng}&detailLat=37.549&detailLon=126.658&zoom=10&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=default&radarRange=-1`}
         />
-
-      }
+      )}
     </>
   );
 };