비행계획서 지도 검색

src/assets/css/custom.css

@@ -252,12 +252,6 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
 
 .measure-control{position:absolute; z-index:100;}
 
-/* 지도 안에 버튼들 관리 */
-.area-input{margin-top:10px; margin-left:10px;width:200px;}
-.area-button{margin-top:10px; margin-left:10px;}
-.map-comp{position:relative; z-index:100;display:flex;}
-
-
 .control-btn{margin-left: 7px; border-bottom: solid 1px #283046; margin-bottom:5px;}
 .buffer-input{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 70px; margin-left: 5px;}
 .buffer-btn{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 30px; margin-left: 5px;}
@@ -779,3 +773,14 @@ background-size: 75% auto;
 .user-search-modal .modal-body{font-size:1.125rem;padding:30px 20px}
 .user-search-modal .modal-body .etc-txt{display:block;font-weight:500;margin-bottom:1rem}
 .user-search-link button{font-size:0.875rem;margin-top:20px}
+
+
+/* 지도 안에 버튼들 관리 */
+.search-comp{position:relative; z-index:100;display:flex;}
+.search-feather{padding-top:10px;margin-left:10px;width:400px;}
+
+.search-result-comp{margin:0 0 0 10px;background-color:#fff;}
+.search-result{padding:10px 0 5px 10px;}
+.search-result:hover{background-color:#e7e7e7}
+.search-result .title{font-size:14px;color:#000}
+.search-result .address{font-size:13px;color:#343D55}

src/components/basis/flight/plan/FlightPlanAreaMap.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Card, CardBody, Button, Input } from 'reactstrap';
+import { Card, CardBody, Button, Input, Row, Col, InputGroup, InputGroupAddon, InputGroupText, FormGroup } from 'reactstrap';
+import { Search } from 'react-feather'
 import { useDispatch, useSelector } from 'react-redux';
 import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone';
 import {
@@ -28,7 +29,9 @@ const FlightPlanAreaMap = props => {
     initFlightBas.initDetail.areaList
   );
 
-  const [query, setQuery] = useState();
+  const [query, setQuery] = useState('');
+  const [searchRes, setSearchRes] = useState([]);
+  const [isSearch, setIsSearch] = useState(false);
 
   useEffect(() => {
     NaverMapInit();
@@ -143,7 +146,9 @@ const FlightPlanAreaMap = props => {
   };
 
   const handleSearch = async () => {
-    const res = await flightPlanAPI.searchArea({ query: query });
+    const res = await flightPlanAPI.searchArea({query: query});
+    setIsSearch(true);
+    setSearchRes(res.data.items);
   };
 
   const handleChange = e => {
@@ -154,6 +159,19 @@ const FlightPlanAreaMap = props => {
     }
   };
 
+  const handleCoord = (mapx, mapy) => {
+    let utmk = naver.maps.TransCoord.fromTM128ToUTMK(naver.maps.Point(mapx, mapy));
+    let latlng = naver.maps.TransCoord.fromUTMKToLatLng(utmk);
+
+    setIsSearch(false);
+    
+    let options = {
+      duration: 800,
+      easing: 'easeOutCubic'
+    }
+    map.morph(latlng, 16, options)
+  }
+
   return (
     <Card className='mb-0'>
       <CardBody>
@@ -180,7 +198,65 @@ const FlightPlanAreaMap = props => {
               />
             ) : null}
 
-            <div className='map-comp'>
+            <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'
+                    placeholder='검색명을 입력하세요.'
+                    onChange={handleChange}
+                    bsSize='sm'
+                    autocomplete='off'
+                  />
+                </InputGroup>
+                <div className='search-result-comp'>
+                  <ul>
+                  {searchRes?.length!=0 && isSearch? (
+
+                    searchRes?.map((prev, idx) => {
+                      let title = prev.title.replace('<b>',' ');
+                      title = title.replace('</b>',' ');
+                      
+                      return (
+                        <>
+                          <li 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>
+
+            {/* <div className='map-comp'>
               <Input
                 type='text'
                 id='searchInput'
@@ -198,21 +274,9 @@ const FlightPlanAreaMap = props => {
               >
                 검색
               </Button.Ripple>
-              {/* <Button.Ripple
+            </div> */}
-                  color='primary'
+
-                  className='area-button'
+
-                  onClick={e => handlerDrawType('RESET')}
-                  // {...props.test? (
-                  //   {}
-                  //   ):(
-                    //   {disabled:false}
-                    // )}
-                    disabled={props.test}
-                  size='sm'
-                  >
-                  초기화
-              </Button.Ripple> */}
-            </div>
           </div>
         </div>