[React] Kakao Map Api - customoverlay 클릭 이벤트 오류 수정

오류 내용

(@post)에서 customoverlay로 클릭이벤트를 구현하는 도중 생성한 element에 id값이 정상적으로 등록되지 않는 버그가 있었습니다. 기존 구현했던 코드에서는 customoverlay를 생성하고 클릭 이벤트를 등록하는 방식이였는데, kakao map api의 경우, kakao.maps.customoverlay로 생성된 오버레이는 document.getElementById()로는 즉시 접근할 수 없는 경우가 발생할 수도 있다고 합니다. 

 

해결

무조건 customoverlay가 생성된 이후 클릭 이벤트가 등록되게 하기 위해 기존 customoverlay를 생성하고 클릭 이벤트를 등록하는 과정을 따로따로 하는 방식에서 customoverlay를 생성하는 동시에 클릭 이벤트를 등록하는 방식으로 변경하여 해결해주었습니다.

 

기존 코드

kakao.maps.event.addListener(mark, 'click', function () {
    if (currentInfoWindow) {
      currentInfoWindow.setMap(null);
      currentInfoWindow = null;
    }
    overlay.setMap(map);
    currentInfoWindow = overlay;

});
const element = document.getElementById(data.id);
if (element) {
    element.addEventListener('click', () => {
      console.log('상세보기 클릭');
      MenuControllMenu();
    });
} else {
	console.warn(`Element with ID ${data.id} not found`);
}

변경된 코드

kakao.maps.event.addListener(mark, 'click', function () {
    if (currentInfoWindow) {
      currentInfoWindow.setMap(null);
      currentInfoWindow = null;
    }
    overlay.setMap(map);
    currentInfoWindow = overlay;

    setTimeout(() => {
      const element = document.getElementById(data.id);
      if (element) {
        element.addEventListener('click', () => {
          console.log('상세보기 클릭');
          MenuControllMenu();
        });
      } else {
        console.warn(`Element with ID ${data.id} not found`);
      }
    }, 0);
});