🚀 카카오 지도: 캠핑장 검색 기능 개선하기

Yeonn·2025년 3월 10일

기능 구현하기

목록 보기

6/10

✔️ '사용자 위치 기반' 캠핑장 검색 기능

처음에는 '위치를 기반으로 한 캠핑장 검색' 기능은 단순히 현재 유저의 위치의 정해진 반경, 5KM 내 검색 용도였다.

캠핑장을 검색하는 기능을 개발하면서,
기존의 “반경 5KM 내 캠핑장 검색” 기능이 실제 사용자 입장에서 불편함이 있을 수 있다는 생각이 들었다.
개인적으로 집 주변이나 이동할 때 테스트를 해보았는데, 캠핑장이 별로 없는 지역에서는 지도만 보이고 아무런 결과도 나타나지 않았다.

“이 페이지는 도대체 뭘 하는 페이지지?” 라고 사용자가 이렇게 생각할 수도 있겠다는 생각이 들었다.

❓ 기존 문제점

보통 지도에서 '내 위치를 기반하는 것은 내 위치에서 가까운 곳' 을 보기 위해 탐색하는 것이지, 정확히 어떤 반경 내의 정보만 보고 싶어하는 건 아닐 것이다 라는 생각이 들었다.

즉, 사용자가 지도를 이동하면서 탐색할 수 있도록 개선할 필요가 있다는 생각이 들었다.

❗️ 지도 이동 감지 기능 추가하기

먼저 원래는 정확히 내 위치를 기반으로 하기 때문에 지도를 움직일 수 없도록 설정해두었던 부분을 지워주었다.

	map.setDraggable(false); // 카카오 지도에서 드래그로 이동하는 기능을 비활성화하는 코드

터치/마우스로 지도 이동이 끝날 때마다 새로운 데이터를 요청하기 위해 mouseup 이벤트 리스너를 사용했다.

  useEffect(() => {
    // 카카오 지도 객체가 없을 경우 불필요한 연산 방지
    if (!kakaoMap) return;
    
    // 지역이 선택되지 않았을 때만 이동 감지 실행
    if (!regionQuery) { 
      // mouseup 이벤트가 발생할 경우 실행할 함수
      const onMapCenterChanged = () => {
        // 지도의 중심 좌표를 얻어오는 메서드
        const center = kakaoMap.getCenter();
        
        // 백엔드 API 호출을 위해 중심 좌표에서 위도/경도 추출
        const updatedLat = center.getLat();
        const updatedLon = center.getLng();

        // 위도/경도 상태 업데이트
        setLat(updatedLat);
        setLon(updatedLon);

        // 현재 지도의 중심 위도/경도 정보를 담아서 반경 5KM 내 캠핑장을 검색하는 API 호출
        getNearByCampings(updatedLat, updatedLon);
      };

      // mouseup 이벤트 발생 시 해당 함수 호출
      kakaoMap.addListener('mouseup', onMapCenterChanged);

      // 컴포넌트 언마운트 시 리스너 제거
      return () => {
        kakaoMap.removeListener('mouseup', onMapCenterChanged);
      };
    }
  }, [kakaoMap]); // 지도가 변경될 때 마다 실행

📃 참고 카카오문서: 중심좌표 변경 이벤트 등록하기

지역 검색 시에는 지도를 이동해도 검색 결과를 유지해야 하기 때문에 지역 검색 쿼리가 있을 경우 실행하지 않는다.

지도가 이동될 때마다, 즉 mouseup 이벤트가 발생할 때마다 새로운 중심 좌표를 가져온다.
mouseup 이벤트 리스너를 활용하면 사용자가 드래그 후 마우스를 뗄 때 실행 된다.

  const getNearByCampings = async (updatedLat: number, updatedLon: number) => {
    try {
      const apiUrl = createApiUrl('/campings/map', [
        { name: 'lat', value: updatedLat },
        { name: 'lon', value: updatedLon },
      ]);

      const res = await api.get(apiUrl);

      setCampList(res.data.data);
    } catch (error) {
      console.error(error);
    }
  };