Merge pull request #431 from boostcampwm-2024/feature/fe/#430-mapRend…

…erError [FE][Fix] #430 : 지도가 주기적으로 재렌더링되는 문제 해결, 기본 줌 레벨 값 변경
boostcampwm-2024 · Dec 5, 2024 · d1272e4 · d1272e4
2 parents 565efcf + c918879
commit d1272e4
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 20 deletions.
diff --git a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx
@@ -4,6 +4,7 @@ import { useCanvasInteraction } from '@/hooks/useCanvasInteraction';
 import { useRedrawCanvas } from '@/hooks/useRedraw';
 import { ZoomSlider } from '@/component/zoomslider/ZoomSlider';
 import { ICluster, useCluster } from '@/hooks/useCluster';
+import { DEFAULT_ZOOM, MIN_ZOOM } from '@/lib/constants/mapConstants.ts';
 
 export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasViewProps>(
   ({ lat, lng, alpha, otherLocations, guests, width, height }: IMapCanvasViewProps, ref) => {
@@ -21,8 +22,8 @@ export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasView
 
       const mapInstance = new naver.maps.Map(mapRef.current, {
         center: new naver.maps.LatLng(lat, lng),
-        zoom: 10,
-        minZoom: 7,
+        zoom: DEFAULT_ZOOM,
+        minZoom: MIN_ZOOM,
         maxBounds: new naver.maps.LatLngBounds(
           new naver.maps.LatLng(33.0, 124.5),
           new naver.maps.LatLng(38.9, 131.9),
@@ -36,7 +37,7 @@ export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasView
       return () => {
         mapInstance.destroy();
       };
-    }, [lat, lng]);
+    }, []);
 
     const latLngToCanvasPoint = (latLng: IPoint): ICanvasPoint | null => {
       if (!map || !projection || !canvasRef.current) return null;

diff --git a/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx b/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx
@@ -14,6 +14,7 @@ import { ZoomSlider } from '@/component/zoomslider/ZoomSlider';
 import { useRedrawCanvas } from '@/hooks/useRedraw';
 import { zoomMapView } from '@/utils/map/mapUtils';
 import { ICluster, useCluster } from '@/hooks/useCluster';
+import { MIN_ZOOM } from '@/lib/constants/mapConstants.ts';
 
 export const MapCanvasForDraw = ({
   width,
@@ -69,7 +70,7 @@ export const MapCanvasForDraw = ({
     const mapInstance = new naver.maps.Map(mapRef.current, {
       center: new naver.maps.LatLng(initialCenter.lat, initialCenter.lng),
       zoom: initialZoom,
-      minZoom: 7,
+      minZoom: MIN_ZOOM,
       maxBounds: new naver.maps.LatLngBounds(
         new naver.maps.LatLng(33.0, 124.5),
         new naver.maps.LatLng(38.9, 131.9),
@@ -80,18 +81,6 @@ export const MapCanvasForDraw = ({
     setMap(mapInstance);
     setProjection(mapInstance.getProjection());
 
-    // TODO: 필요 없을 것으로 예상, 혹시나해서 남겨둔 것이니 필요 없다 판단되면 제거 필요
-    // naver.maps.Event.addListener(mapInstance, 'zoom_changed', () => {
-    //   setProjection(mapInstance.getProjection());
-    //   updateCanvasSize();
-    //   redrawCanvas();
-    // });
-    //
-    // naver.maps.Event.addListener(mapInstance, 'center_changed', () => {
-    //   setProjection(mapInstance.getProjection());
-    //   redrawCanvas();
-    // });
-
     return () => {
       mapInstance.destroy();
     };

diff --git a/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapProviderForDraw.tsx b/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapProviderForDraw.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { MapCanvasForDraw } from '@/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx';
-import { DEFAULT_CENTER } from '@/lib/constants/mapConstants.ts';
+import { DEFAULT_CENTER, DEFAULT_ZOOM } from '@/lib/constants/mapConstants.ts';
 import { ICanvasScreenProps } from '@/lib/types/canvasInterface.ts';
 
 export const MapProviderForDraw = ({ width, height }: ICanvasScreenProps) => {
@@ -48,7 +48,7 @@ export const MapProviderForDraw = ({ width, height }: ICanvasScreenProps) => {
       width={windowSize.width}
       height={windowSize.height}
       initialCenter={DEFAULT_CENTER}
-      initialZoom={7}
+      initialZoom={DEFAULT_ZOOM}
     />
   );
 };
diff --git a/frontend/src/component/zoomslider/ZoomSlider.tsx b/frontend/src/component/zoomslider/ZoomSlider.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { MdOutlineAdd, MdRemove } from 'react-icons/md';
 import './ZoomSlider.css';
+import { DEFAULT_ZOOM } from '@/lib/constants/mapConstants.ts';
 
 interface IZoomSliderProps {
   /** Naver 지도 객체 */
@@ -66,7 +67,7 @@ const ZoomSliderInput = ({ zoomLevel, onSliderChange }: IZoomSliderInputProps) =
 };
 
 export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => {
-  const [zoomLevel, setZoomLevel] = useState(map?.getZoom() ?? 10);
+  const [zoomLevel, setZoomLevel] = useState(map?.getZoom() ?? DEFAULT_ZOOM);
 
   useEffect(() => {
     if (!map) return undefined;
@@ -87,7 +88,7 @@ export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => {
   };
 
   const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newZoom = parseInt(event.target.value, 10);
+    const newZoom = parseInt(event.target.value, DEFAULT_ZOOM);
     if (map) {
       map.setZoom(newZoom);
       setZoomLevel(newZoom);

diff --git a/frontend/src/lib/constants/mapConstants.ts b/frontend/src/lib/constants/mapConstants.ts
@@ -12,3 +12,5 @@ export const DEFAULT_CENTER = {
 
 export const MIN_ZOOM = 7; // 대한민국 전체가 보이는 최소 줌 레벨
 export const MAX_ZOOM = 19; // 네이버 지도 최대 줌 레벨
+
+export const DEFAULT_ZOOM = 18;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,3 +12,5 @@ export const DEFAULT_CENTER = {

		export const MIN_ZOOM = 7; // 대한민국 전체가 보이는 최소 줌 레벨
		export const MAX_ZOOM = 19; // 네이버 지도 최대 줌 레벨

		export const DEFAULT_ZOOM = 18;