날씨 비행 검색-기능추가(css미수정)

src/views/weather/WeatherView.js

@@ -1,5 +1,20 @@
 import { WINDY_KEY } from '../../configs/constants';
- const WeatherView = () => {
+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 { 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
     key: WINDY_KEY // REPLACE WITH YOUR KEY !!!
@@ -9,12 +24,107 @@ import { WINDY_KEY } from '../../configs/constants';
     // Optional: Initial state of the map
   };
 
+
+  const handleSearch = async () => {
+    const res = await flightPlanAPI.searchArea({ query: query });
+    setIsSearch(true);
+    setSearchRes(res.data.items);
+  };
+
+  const handleChange = e => {
+    const { name, value } = e.target;
+
+    if (name == 'searchInput') {
+      setQuery(value);
+    }
+  };
+  const handleCoord = (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();
+    }
+  };
   return (
     <>
+      <div className='search-comp'>
+        <div className=''>
+          <InputGroup className='search-feather'>
+            <InputGroupAddon addonType='prepend'>
+              <InputGroupText>
+                <Search size={14} onClick={handleSearch} />
+              </InputGroupText>
+            </InputGroupAddon>
+            <Input
+              type='text'
+              id='searchInput'
+              name='searchInput'
+              bsSize='sm'
+              autoComplete='off'
+              placeholder='검색명을 입력하세요.'
+              onChange={handleChange}
+              onKeyPress={handleEnter}
+            />
+          </InputGroup>
+          <div className='search-result-comp'>
+            <ul>
+              {searchRes?.length !== 0 && isSearch ? (
+                searchRes?.map((prev, idx) => {
+                  let title = prev.title.replaceAll('<b>', '');
+                  title = title.replaceAll('</b>', '');
+
+                  return (
+                    <li
+                      key={prev.mapx + prev.mapy}
+                      onClick={() => handleCoord(prev.mapx, prev.mapy)}
+                    >
+                      <a>
+                        <div className='search-result'>
+                          <div className='title'>
+                            <span>
+                              <strong>{title}</strong>
+                            </span>
+                          </div>
+                          <div className='address'>
+                            {/* <span>{prev.address}</span> */}
+                            <span>{prev.roadAddress}</span>
+                          </div>
+                        </div>
+                      </a>
+                    </li>
+                  );
+                })
+              ) : (
+                <></>
+              )}
+            </ul>
+          </div>
+        </div>
+      </div>
+      {!map ?
+
         <iframe
           style={{ width: '100%', height: '99vh' }}
           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>
+        /> :
+        <iframe
+          style={{ width: '100%', height: '99vh' }}
+          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`}
+        />
+
+      }
     </>
   );
 };