SearchMapByKeyword.js

import { Map, MapMarker } from "react-kakao-maps-sdk";
import React, { useRef, useState, useEffect, useContext } from 'react';

const { kakao } = window;

function SearchMapByKeyword({ loc, setLoc }) {
  const [info, setInfo] = useState()
  const [markers, setMarkers] = useState([])
  const [pagination, setPagination] = useState()
  const [map, setMap] = useState()
  const [searchKeyword, setSearchKeyword] = useState();

  // 아주대학교를 기본 위치로 설정
  const defaultCenter = { lat: 37.28238488648025, lng: 127.04350967609274 }
  const ps = new kakao.maps.services.Places()

  const handleInput = (e) => {
    setSearchKeyword(e.target.value);
  }

  const handleSearch = () => {
    ps.keywordSearch(searchKeyword, (data, status, _pagination) => {
      if (status === kakao.maps.services.Status.OK) {
        const bounds = new kakao.maps.LatLngBounds()
        let markers = []

        setPagination(_pagination);

        for (var i = 0; i < data.length; i++) {
          markers.push({
            position: {
              lat: data[i].y,
              lng: data[i].x,
            },
            content: data[i].place_name,
          })
          bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x))
        }

        setMarkers(markers);

        map.setBounds(bounds);
      }
    }, { category_group_code: 'FD6' })
  }

  const displayPagination = (pagination) => {
    const links = [];
    for (let i = 1; i <= pagination.last; i++) {
      links.push(<a href="#" key={i}
        style={{ textDecoration: "none", color: "black" }}
        onClick={() => pagination.gotoPage(i)}>{i}</a>);
    }

    return links;
  }

  return (
    <div className="UserInput">
      <input onChange={handleInput} />
      <button onClick={() => handleSearch()} style={{ width: '50px' }}>검색</button><br></br>
      <div style={{ display: 'flex' }}>
        <Map // 지도를 표시할 Container
          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={
                () => setInfo(marker)
              }
              onMouseOut={
                () => 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={{ width: "100%", color: "#000" }}>
                  {marker.content}
                </div>
              )}
            </MapMarker>
          ))}
        </Map>
        <div>
          <ul>
            {markers.map((marker, index) => (
              <li key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
                onMouseOver={() => { setInfo(marker) }}
                onMouseOut={() => { setInfo({ position: marker.position }) }}>
                <a href="#"
                  key={index}
                  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>
  )
}

export default SearchMapByKeyword;