import React, { useEffect, useState } from ‘react’;
import { useGetAllCafes } from ‘…/…/…/hooks/getAllCafes’;
import { ROUTE } from ‘…/…/…/routes/Routes’;
import { useNavigate } from ‘react-router-dom’;
const { kakao } = window;
const Map = (props) => {
const [markers, setMarkers] = useState([]);
const keyword = props.searchKeyword;
const { mutate: mutateAllCafes, data: allCafesData } = useGetAllCafes();
const [resultCafe, setResultCafe] = useState([]);
const navigate = useNavigate();
useEffect(() => {
if (keyword) {
mutateAllCafes();
} else {
alert(‘검색어를 입력해주세요.’);
}
}, [keyword]);
useEffect(() => {
removeMarker();
removeAllChildNodes(‘places-list’);
if (allCafesData && allCafesData.cafes) {
const nameResults =
allCafesData?.cafes.filter((cafe) => cafe.name.includes(keyword)) || [];
setResultCafe(nameResults.length > 0 ? nameResults : []);
if (nameResults.length === 0) {
const addressResults =
allCafesData?.cafes.filter((cafe) =>
cafe.road_addr.includes(keyword),
) || [];
setResultCafe(addressResults);
}
}
}, [keyword, allCafesData]);
useEffect(() => {
let script;
if (resultCafe.length > 0) {
const existingScript = document.getElementById('kakaoMapScript');
if (existingScript) {
document.head.removeChild(existingScript);
}
script = document.createElement('script');
script.id = 'kakaoMapScript';
script.async = true;
script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=0ed2e6ed111d9ca9a86f82d2bc80a5a7`;
document.head.appendChild(script);
script.onload = () => {
kakao.maps.load(() => {
const mapContainer = document.getElementById('map');
const mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567),
level: 3,
};
const map = new kakao.maps.Map(mapContainer, mapOption);
resultCafe.forEach((cafe, index) => {
const coords = new kakao.maps.LatLng(cafe.latitude, cafe.longitude);
const marker = new kakao.maps.Marker({
map: map,
position: coords,
title: cafe.name,
});
marker.setZIndex(index + 1);
kakao.maps.event.addListener(marker, 'click', function () {
const infowindow = new kakao.maps.InfoWindow({
content: `<div style="width:150px;text-align:center;padding:6px 0;">${cafe.intro}</div>`,
});
infowindow.open(map, marker);
});
const listEl = document.getElementById('places-list');
const itemEl = getListItem(index, cafe);
listEl.appendChild(itemEl);
});
// 기존에 맵을 그릴 때 마커를 중심으로 설정했으므로,
// 새로운 마커가 추가될 때마다 중심을 변경해 줍니다.
// bounds를 새로 만들어서 기존의 bounds에 새로운 마커의 좌표를 확장시킵니다.
const bounds = new kakao.maps.LatLngBounds();
resultCafe.forEach((cafe) => {
bounds.extend(new kakao.maps.LatLng(cafe.latitude, cafe.longitude));
});
map.setBounds(bounds);
});
};
script.onerror = () => {
console.error('Failed to load Kakao maps API.');
};
}
return () => {
if (script) {
document.head.removeChild(script);
}
};
}, [resultCafe]);
const handleItemClick = (postId) => {
navigate(${ROUTE.CAFE_DETAIL_PAGE.link}/${postId});
};
function getListItem(index, places) {
const el = document.createElement(‘li’);
let itemStr = <div class="info"> <span class="marker marker_${index + 1}"> ${index + 1} </span> <a href="${ROUTE.CAFE_DETAIL_PAGE.link}/${places._id}"> <h5 class="info-item place-name">${places.name}</h5> <span class="info-item road-address-name">${places.road_addr}</span> <span class="info-item tel">${places.phone_number}</span> </a> </div> ;
el.innerHTML = itemStr;
el.className = 'item';
return el;
}
function removeMarker() {
for (let i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
setMarkers([]);
}
function removeAllChildNodes(parentId) {
const parent = document.getElementById(parentId);
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}
return (
{/* 지도를 그릴 컨테이너에 height를 설정해 주세요. */}
{props.searchKeyword}
검색 결과
);
};
export default Map;
이런식으로 코드를 작성하여 한참을 노력중인데
마커는 잘 찍히고 리스트도 잘 추가되는데
마커 뒤의 배경 지도가 보여지질 않습니다…
비동기적 처리때문인지 도무지 모르겠네요…