⚠️ Kakao Map 트러블슈팅 요약 – 지도는 떴지만, 정보는 없었다

🛠️ 1. InfoWindow는 떴는데, 편의점 정보는 안 보임

 

❓ 현상
마커 클릭 시 InfoWindow는 열리지만, 편의점 이름과 주소가 비어 있거나 undefined로 표시됨

⁉️ 원인
카카오 장소 검색 결과에서 road_address_name이 없는 경우가 있어, undefined로 표시됨
또한 place.y, place.x의 좌표 값을 kakao.maps.LatLng에 넘기지 않고 바로 출력하는 실수도 있었음

✅ 해결
주소 출력 시 road_address_name || address_name 방식으로 처리
좌표 변환 시 new kakao.maps.LatLng(place.y, place.x)로 명확히 객체 생성 후 사용

---

🛠️ 2. 가장 가까운 편의점이 아닌, 배열 첫 번째만 표시됨

 

❓ 현상
검색된 편의점 중 사용자 위치와의 거리와 무관하게 항상 배열의 첫 번째 편의점이 지도에 표시됨

⁉️ 원인
초기 closestPlace를 배열의 첫 번째로 설정한 후, 나머지 편의점들과의 거리 비교 로직이 제대로 작동하지 않아 항상 첫 번째 편의점만 선택됨

✅ 해결
getDistance() 함수에서 하버사인(Haversine) 공식을 사용하여 사용자 위치와 각 편의점 간의 실제 거리(지구 곡률 반영)를 계산
→ 이 거리 값을 기준으로 minDistance를 갱신하며 가장 가까운 편의점을 추적
→ 최종적으로 closestPlace를 실제 거리 기준으로 정확히 선택하고, 해당 위치에 마커 및 InfoWindow 출력

📌 보완 설명
하버사인 공식은 두 위경도 좌표 간의 대원거리(Great Circle Distance)를 계산할 수 있는 공식으로, Math.sin, Math.cos, Math.atan2 등을 활용하여 거리 오차를 최소화함.

---

🛠️ 3. GS 페이지에서 CU 검색 가능 – 브랜드 구분 실패

❓ 현상
현재 브랜드가 GS25인 페이지에서 검색창에 CU를 입력하면 CU 편의점도 검색되어 지도에 표시됨

⁉️ 원인
searchStore() 함수에서 currentBrand와 무관하게 keyword만 포함되면 모든 브랜드가 검색 대상이 되었음

✅ 해결
currentBrand 값과 검색된 place_name의 브랜드명을 비교하는 정규식 유효성 검사 추가
예: new RegExp("^" + currentBrand + "\\b")를 이용해 브랜드가 일치하는 경우만 필터링