diff --git a/apps/web/src/components/add-location-modal/organisms/SearchResultMap.tsx b/apps/web/src/components/add-location-modal/organisms/SearchResultMap.tsx index 46e1e03..017ee92 100644 --- a/apps/web/src/components/add-location-modal/organisms/SearchResultMap.tsx +++ b/apps/web/src/components/add-location-modal/organisms/SearchResultMap.tsx @@ -2,6 +2,7 @@ import { NaverMap, + NaverMapProvider, useNaverMap, useMarker, getFinalMarkerElement, @@ -12,28 +13,18 @@ import { useEffect, useMemo } from "react"; type SearchResultMapProps = Pick; -const SearchResultMap = ({ station }: SearchResultMapProps) => { +const StationMarker = ({ station }: SearchResultMapProps) => { const { map } = useNaverMap(); const { create, cleanUp } = useMarker({ map: map!, }); - cleanUp(); - - const centerMarker = useMemo( - () => ({ - latitude: station.latitude, - longitude: station.longitude, - center: true, - }), - [station.latitude, station.longitude] - ); useEffect(() => { if (!map) return; create({ - latitude: centerMarker.latitude, - longitude: centerMarker.longitude, + latitude: station.latitude, + longitude: station.longitude, customMarkerData: { marker: getFinalMarkerElement(), width: 46, @@ -41,20 +32,33 @@ const SearchResultMap = ({ station }: SearchResultMapProps) => { }, }); - return () => { - cleanUp(); - }; - }, [map, station, centerMarker, create, cleanUp]); + return () => cleanUp(); + }, [map, station, create, cleanUp]); + + return null; +}; + +const SearchResultMap = ({ station }: SearchResultMapProps) => { + const centerMarker = useMemo( + () => ({ + latitude: station.latitude, + longitude: station.longitude, + center: true, + }), + [station.latitude, station.longitude] + ); return ( - <> + + - + ); }; diff --git a/apps/web/src/components/midpoint-result/templates/FindingMidPoint.tsx b/apps/web/src/components/midpoint-result/templates/FindingMidPoint.tsx index 8e2196f..cf516d9 100644 --- a/apps/web/src/components/midpoint-result/templates/FindingMidPoint.tsx +++ b/apps/web/src/components/midpoint-result/templates/FindingMidPoint.tsx @@ -231,7 +231,7 @@ const FindingMidPoint = ({ const isVoteMode = roomInfo?.data?.roomStatus === "VOTE" ? true : false; const mapCenter = (() => { - if (centerMarkerData && dotMarkers.length > 1) { + if (centerMarkerData) { return { latitude: centerMarkerData.latitude, longitude: centerMarkerData.longitude, @@ -243,8 +243,6 @@ const FindingMidPoint = ({ longitude: locationsData.data.longitude, }; } - - return { latitude: 37.5665, longitude: 126.978 }; })(); useEffect(() => {