2024. 09. 19.(팀 프로젝트 - 아웃소싱02)

내 담당은 아니였지만 다 같이 해결하기 위해 고민하고 해결했던 과정이 가장 인상깊게 남아 오늘의 트러블 슈팅으로 기록을 남기게 되었다.

추후에 나도 아래 방법을 사용하여 지도 마커를 표시하는데 도움이 되었다.

1. 문제점

이번에 서치페이지에서 카카오맵 api를 이용하여 지도를 불러오게 되었는데 아래 사진처럼 자세히 보기를 눌렀을 때 자세히 보기 아래에 하얀박스가 생성되어 보이는 문제점이 발견되어 모든 팀원들과 함께 고민하였다.

개발자 도구를 사용해 해당 코드부분을 확인해보았으나, vscode입력하지 않은 코드임에도 나타나는 것이 확인되었다.

카카오맵 api 공식문서를 보니 저 하얀박스는 "인포윈도우"라는 것인데 원래에는 저 위치에 말하고 싶은 정보를 넣게 하기 위해 쓰이는 박스이다. 입력을 하지 않았는데도 나타나는 이유는 마커를 입력하면서 카카오 맵에서 마커와 인포윈도우가 자동으로 연동되어 생긴 문제라는 것을 알았다.

2. 해결을 위한 방안

1) 정보가 담긴 박스를 제일 위로 올려보기

코드는 z-index = {1}을 사용하여 위로 보내보았으나 아래에 있는 화살표가 그대로 보인다는 문제와 다른 약국을 클릭하였을 때 상자의 위치가 인포윈도위를 딱 가리지 않는 위치에 있는 약국도 있어 미세하게 삐져나오는 문제가 있었다.

 

2) 카카오맵 api에서 사용설명서에서 해결방안 찾아보기

인포윈도우를 삭제하는 코드가 존재하긴 했으나 인포윈도우를 정의하지 않은 상태에서 삭제를 한다는 것을 불가능하였다. 그래서 인포윈도우를 설명에 따라 생성한 후 삭제를 해보았으나 생성만 될 뿐 제거가 되지않았다.

괜히 의미없이 코드길이만 늘리는 것 같아 삭제하였다.

 

3. 해결 코드

해결방안은 의외로 간단하였다. 문제가 되었던 부분은 결국 마커부분이였는데, 수정 전 문제가 되었던 부분은 아래와 같다.

{searchPharmacies.map((pharmacy) => (
  <MapMarker
    key={pharmacy.id}
    position={{ lat: pharmacy.latitude, lng: pharmacy.longitude }}
    onClick={() => setSelectedPharmacy(pharmacy)}
  >
    {selectedPharmacy && selectedPharmacy.id === pharmacy.id && (
      <CustomOverlayMap
        position={{ lat: selectedPharmacy.latitude, lng: selectedPharmacy.longitude }}
        yAnchor={1.3}
        xAnchor={0.5}
      >
        <div className="bg-white rounded-lg shadow-lg p-3 w-64 text-pretty">
          {/* 커스텀 오버레이 내용 */}
        </div>
      </CustomOverlayMap>
    )}
  </MapMarker>
))}

위 코드는 MapMarker를 렌더링할 때, 선택된 약국이 현재의 약국과 동일한 경우에만 CustomOverlayMap이 렌더링이 되도록 설정하였다. 즉, MapMarker에 CustomOverlayMap을 조건부로 자식으로 포함시키고 있었다.

{searchPharmacies.map((pharmacy) => (
  <MapMarker
    key={pharmacy.id}
    position={{ lat: pharmacy.latitude, lng: pharmacy.longitude }}
    onClick={() => setSelectedPharmacy(pharmacy)}
  />
))}
{selectedPharmacy && (
  <CustomOverlayMap
    position={{ lat: selectedPharmacy.latitude, lng: selectedPharmacy.longitude }}
    yAnchor={1.3}
    xAnchor={0.5}
  >
    <div className="bg-white rounded-lg shadow-lg p-3 w-64 text-pretty">
      {/* 커스텀 오버레이 내용 */}
    </div>
  </CustomOverlayMap>
)}

하지만 위 코드와 같이 그 MapMarker와 CustomOverlayMap은 별도로 렌더링이 되도록 분리를 시켰더니 인포 윈도우가 삭제되었다.

 

문제 해결을 위해 api 공식문서를 검색해 찾아보고 다양한 방법으로 해결하려고 했던 부분이 시간은 많이 걸리긴 했지만 오랫동안 기억에 남을 것 같다.