안녕하세요 카카오맵 기능 구현 중에 인포윈도우를 추가하면 지도가 하얀화면으로만 렌더링되서 문의드립니다.
"use client";
import {
Map,
MapInfoWindow,
MapMarker,
useKakaoLoader,
} from "react-kakao-maps-sdk";
import { useEffect, useState } from "react";
interface MemberLocation {
memberEmail: string;
lat: number;
lng: number;
scheduleId?: string;
}
interface MapLoaderProps {
lat: number;
lng: number;
height: string;
membersLocation?: MemberLocation[];
}
const MapLoader: React.FC<MapLoaderProps> = ({
lat,
lng,
height,
membersLocation,
}) => {
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (lat && lng) {
setIsLoading(true);
}
}, [lat, lng]);
useKakaoLoader({
appkey: `${process.env.NEXT_PUBLIC_KAKAO_MAPS_JS_KEY}`,
});
return isLoading ? (
<Map
center={{
lat: lat || (membersLocation && membersLocation[0]?.lat) || 0,
lng: lng || (membersLocation && membersLocation[0]?.lng) || 0,
}}
style={{
width: "100%",
height: height,
}}
level={3}
>
{membersLocation ? (
membersLocation.map((member, index) => (
<MapMarker
key={index}
position={{ lat: member.lat, lng: member.lng }}
>
<div className="p-1 text-black">
{member.memberEmail} <br />
</div>
</MapMarker>
))
) : (
<MapMarker position={{ lat: lat, lng: lng }} />
)}
<MapMarker position={{ lat: lat, lng: lng }}></MapMarker>
</Map>
) : null;
};
export default MapLoader;
이렇게 구현해서 사용중인데 인포윈도우 부분 코드를 추가하면
이렇게 white.png 가 마지막에 덮어지는게 원인인 것 같은데 해결 방안을 못 찾고있습니다.