학습내용

• 검색결과 클릭시 해당 인포윈도우 반환
• 인포윈도우 클릭시 상세페이지 이동

검색결과 클릭시 해당 인포 윈도우 반환

• Main
  • Searchbar
  • Markers

컴포넌트 구조가 위와 같은 형식이기 때문에 Main에서 두 컴포넌트로 info, isOpen 컴포넌트를 넘겨주는 방법으로 관리했다.

Main.jsx

const Main = () => {

  const [info, setInfo] = useState();
  const [isOpen, setIsOpen] = useState(false);
  
  useEffect(() => {
	ps.keywordSearch(place, (data, status, _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,
            address: data[i].address_name,
          });
          bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
        }
    }
  }
}

Searchbar.jsx

const Searchbar = ({ setInfo, isOpen, setIsOpen, setPlace }) => {

  const onFilteredMarker = (item) => {
    const filteredData = {
      position: {
        lat: item.y,
        lng: item.x,
      },
      content: item.place_name,
    };
    setInfo(filteredData);
    setIsOpen(!isOpen);
  };
  .
  .
  .
  return <PlaceList key={i} onClick={() => onFilteredMarker(item)} />
  }
}  

Markers.jsx

const Markers = ({ info, setInfo, isOpen, setIsOpen, markers }) => {

        <MapMarker>
          {info &&
            info.contenet === marker.content &&
            info.address === marker.address &&
            (isOpen ? (
              <InfoWindow onClick={() => onNavigate(marker)}>
                {marker.content}
              </InfoWindow>
            ) : null)}
        </MapMarker>
}

트러블 슈팅

에러
원래는 Markers 컴포넌트에서 인포 윈도우를 반환하는 조건이 info.contenet === marker.content 뿐이었다. 이 경우 업체명이 중복됐을 때 그 중 하나를 클릭하면 나머지 중복 업체들의 인포 윈도우도 같이 반환되는 에러가 발생한다.

해결
Main의 useEffect에서 검색시 키워드 address 값을 추가한 다음 해당 데이터를 추가 조건으로 활용해서 업체명과 주소가 모두 일치하는 업체만 반환하도록 설정

---

인포 윈도우 클릭시 상세페이지 이동

검색 결과에서 상세페이지로 이동하는 경우, 검색 결과 컴포넌트가 카카오맵 API를 직접 제공하고 있기 때문에 API 정보를 즉각적으로 전달하는 것이 가능했다.

그러나 인포 윈도우를 클릭해서 상세페이지로 이동하는 경우엔 그 방법이 불가능 하다. 인포 윈도우 자체는 카카오맵 API를 제공하는 게 아니라 검색 결과를 기반으로 지도에 반환할 뿐이기 때문이다.

그래서 검색을 실행하면 상세 페이지에 필요한 정보를 인포 윈도우에 저장하는 방법으로 해결했다.

Main.jsx

const Main = () => {

	  useEffect(() => {

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

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

Markers.jsx

const Markers = ({ info, setInfo, isOpen, setIsOpen, markers }) => {

	  const onNavigate = (item) => {
    navigate(`/detail/${item.id}`, { state: item });
  };
  
    return (
    <>
      {markers.map((marker) => (
      .
      .
      .
         <InfoWindow onClick={() => onNavigate(marker)}>
           {marker.place_name}
         </InfoWindow>
      ))
      }
    </>

DetailMap.tsx

const DetailMap = () => {

  const location = useLocation();
  const location_x = location.state.x;
  const location_y = location.state.y;
  
  useEffect(() => {
  	  const options = {
      	center: new window.kakao.maps.LatLng(location_y, location_x), 
      	level: 3,
    };
    .
    .
    .
	},[location_y, location_x]}
  }

원래 content와 address로 저장했었던 기존의 이름을 인포 윈도우의 양식에 맞춰서 재설정하고 상세 페이지에 필요한 정보들을 추가로 저장했다.

---

어제 개발일지 한 시간 넘게 걸려서 썼는데 지금 보니까 왜 이상하게 수정되어 있는 거야 개짜증나네 하... 결국 다시 씀 가뜩이나 시간 없는데 진짜 개열받는다