[FE][Refactor] QA : 마커에 따른 줌 공통 함수로 분리

boostcampwm-2024 · Dec 3, 2024 · 7e64d5f · 7e64d5f
1 parent b42f644
commit 7e64d5f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 34 deletions.
diff --git a/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx b/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx
@@ -12,6 +12,7 @@ import { SearchBox } from '@/component/searchbox/SearchBox';
 import { useCanvasInteraction } from '@/hooks/useCanvasInteraction';
 import { ZoomSlider } from '@/component/zoomslider/ZoomSlider';
 import { useRedrawCanvas } from '@/hooks/useRedraw';
+import { zoomMapView } from '@/utils/map/mapUtils';
 
 export const MapCanvasForDraw = ({
   width,
@@ -236,44 +237,14 @@ export const MapCanvasForDraw = ({
     updateCanvasSize();
   }, [map]);
 
-  const calculateZoomLevel = (latDiff: number, lngDiff: number) => {
-    const maxDiff = Math.max(latDiff, lngDiff);
-    if (maxDiff < 0.0005) return 19;
-    if (maxDiff < 0.001) return 18;
-    if (maxDiff < 0.004) return 17;
-    if (maxDiff < 0.01) return 15;
-    if (maxDiff < 0.03) return 14;
-    if (maxDiff < 0.05) return 13;
-    if (maxDiff < 0.1) return 12;
-    if (maxDiff < 0.2) return 11;
-    if (maxDiff < 0.5) return 10;
-    if (maxDiff < 1) return 9;
-    if (maxDiff < 2) return 8;
-    if (maxDiff < 5) return 7;
-    if (maxDiff < 10) return 6;
-    return 5;
-  };
-
   useEffect(() => {
     if (startMarker && endMarker) {
-      const latitudes = [startMarker.lat, endMarker.lat];
-      const longitudes = [startMarker.lng, endMarker.lng];
-
-      const maxLat = Math.max(...latitudes);
-      const minLat = Math.min(...latitudes);
-      const maxLng = Math.max(...longitudes);
-      const minLng = Math.min(...longitudes);
-
-      const centerLat = (maxLat + minLat) / 2;
-      const centerLng = (maxLng + minLng) / 2;
-
-      map?.setCenter(new window.naver.maps.LatLng(centerLat, centerLng));
+      const markers = [];
 
-      const latDiff = maxLat - minLat;
-      const lngDiff = maxLng - minLng;
-      const zoomLevel = calculateZoomLevel(latDiff, lngDiff);
+      if (startMarker) markers.push(startMarker);
+      if (endMarker) markers.push(endMarker);
 
-      map?.setZoom(zoomLevel);
+      zoomMapView(map, markers);
     } else {
       if (startMarker) {
         map?.setCenter({ lat: startMarker.lat, lng: startMarker.lng });

diff --git a/frontend/src/utils/map/mapUtils.ts b/frontend/src/utils/map/mapUtils.ts
@@ -0,0 +1,42 @@
+import { IPoint } from '@/types/channel.types';
+
+const calculateZoomLevel = (latDiff: number, lngDiff: number) => {
+  const maxDiff = Math.max(latDiff, lngDiff);
+  if (maxDiff < 0.0005) return 19;
+  if (maxDiff < 0.001) return 18;
+  if (maxDiff < 0.004) return 17;
+  if (maxDiff < 0.01) return 15;
+  if (maxDiff < 0.03) return 14;
+  if (maxDiff < 0.05) return 13;
+  if (maxDiff < 0.1) return 12;
+  if (maxDiff < 0.2) return 11;
+  if (maxDiff < 0.5) return 10;
+  if (maxDiff < 1) return 9;
+  if (maxDiff < 2) return 8;
+  if (maxDiff < 5) return 7;
+  if (maxDiff < 10) return 6;
+  return 5;
+};
+
+export const zoomMapView = (map: any, markers: IPoint[]) => {
+  if (markers.length === 0) return;
+
+  const latitudes = markers.map(marker => marker.lat);
+  const longitudes = markers.map(marker => marker.lng);
+
+  const maxLat = Math.max(...latitudes);
+  const minLat = Math.min(...latitudes);
+  const maxLng = Math.max(...longitudes);
+  const minLng = Math.min(...longitudes);
+
+  const centerLat = (maxLat + minLat) / 2;
+  const centerLng = (maxLng + minLng) / 2;
+
+  const latDiff = maxLat - minLat;
+  const lngDiff = maxLng - minLng;
+  const zoomLevel = calculateZoomLevel(latDiff, lngDiff);
+
+  // 지도 중심과 줌 레벨 설정
+  map?.setCenter(new window.naver.maps.LatLng(centerLat, centerLng));
+  map?.setZoom(zoomLevel);
+};