Feat: Add category search, searchresult

frontend/src/components/SearchMapByKeyword.js

@@ -7,6 +7,7 @@ function SearchMapByKeyword({loc, setLoc}){
   // 아주대학교를 기본 위치로 설정
   const [info, setInfo] = useState()
   const [markers, setMarkers] = useState([])
+  const [pagination, setPagination] = useState()
   const [map, setMap] = useState()
   const [searchKeyword, setSearchKeyword] = useState(); //주소 입력
 
@@ -25,6 +26,8 @@ function SearchMapByKeyword({loc, setLoc}){
         const bounds = new kakao.maps.LatLngBounds()
         let markers = []
 
+        setPagination(_pagination);
+
         for (var i = 0; i < data.length; i++) {
           // @ts-ignore
           markers.push({
@@ -41,9 +44,18 @@ function SearchMapByKeyword({loc, setLoc}){
         setMarkers(markers)
 
         // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
-          //map.setBounds(bounds)
+        map.setBounds(bounds)
       }
-        })
+    }, { category_group_code: 'FD6' })
+  }
+
+  const displayPagination = (pagination) => {
+    const links = [];
+    for(let i = 1; i <= pagination.last; i++) {
+      links.push(<a href="#" onClick={() => pagination.gotoPage(i)}>{i}</a>);
+    }
+
+    return links;
   }
 
   return (
@@ -53,19 +65,21 @@ function SearchMapByKeyword({loc, setLoc}){
       <input readOnly={true} type="text" placeholder="장소 키워드" value={loc.keyword} />
       <input readOnly={true} type="text" placeholder="위도" value={loc.center.lat} />
       <input readOnly={true} type="text" placeholder="경도" value={loc.center.lng} />
+      <div style={{display: 'flex'}}>
         <Map // 지도를 표시할 Container
-                center={markers[0] && markers[0].position || defaultCenter}
+          center={info && info.position || defaultCenter}
           style={{
             // 지도의 크기
             width: "450px",
             height: "450px"
           }}
+          onCreate={setMap}
+          isPanto={true}
           level={3}>
           {markers.map((marker) => (
             <MapMarker
               key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
               position={marker.position}
-
               clickable={true} // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
               // 마커에 마우스오버 이벤트를 등록합니다
               onMouseOver={
@@ -75,20 +89,44 @@ function SearchMapByKeyword({loc, setLoc}){
               // 마커에 마우스아웃 이벤트를 등록합니다
               onMouseOut={
                 // 마커에 마우스아웃 이벤트가 발생하면 인포윈도우를 제거합니다
-                          () => setInfo(null)
+                () => setInfo({position: marker.position})
               }
               onClick={() => {
                 setLoc({
                   keyword: marker.content,
                   center: { lat: marker.position.lat, lng: marker.position.lng }
-                            })
+                });
               }}>
               {info && info.content === marker.content && (
-                            <div style={{color:"#000"}}>{marker.content}</div>
+                <div style={{ width:"100%", color: "#000" }}>
+                  {marker.content}
+                </div>
               )}
             </MapMarker>
           ))}
         </Map>
+        <div>
+          <ul>
+            {markers.map((marker) => (
+              <li key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
+                onMouseOver={() => {setInfo(marker)}}
+                onMouseOut={() => {setInfo({position: marker.position})}}>
+                <a href="#" style={{textDecoration:"none", color:"black"}} onClick={() => {
+                  setLoc({
+                    keyword: marker.content,
+                    center: { lat: marker.position.lat, lng: marker.position.lng }
+                  })
+                }}>{marker.content}</a>
+              </li>
+            ))}
+          </ul>
+          <div style={{display:"flex", justifyContent:"center"}}>
+            { pagination &&
+              displayPagination(pagination)
+            }
+          </div>
+        </div>
+      </div>
     </div>
   )
 }