refactor: 축제 맵 코드 정리

apps/nowait-user/src/pages/waiting/boothMap/MapPage.tsx

@@ -1,5 +1,5 @@
 import BoothList from "./components/BoothList";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useState } from "react";
 import BoothDetail from "./components/BoothDetail";
 import MapHeader from "./components/MapHeader";
 import UniversityPolygon from "./components/UniversityPolygon";
@@ -9,78 +9,30 @@ import { useBooths } from "./hooks/useBooths";
 import { useMyLocation } from "./hooks/useMyLocation";
 import MapControlButtons from "./components/mapControls/MapControls";
 import { Container as MapDiv, NaverMap, Marker } from "react-naver-maps";
+import { useMapZoom } from "./hooks/useMapZoom";
+import { useMapEvents } from "./hooks/useMapEvents";
+
 declare global {
   interface Window {
     naver: any;
   }
 }
+
 const MapPage = () => {
   const [selectedBooth, setSelectedBooth] = useState<number | null>(null);
   const [map, setMap] = useState<any | null>(null);
-  const [zoomLevel, setZoomLevel] = useState(14);
-  console.log(zoomLevel);
+
   // const { setIsCompassMode } = isCompassModeStore();
-  const isDraggingRef = useRef(false);
   //대학교 폴리곤(영역) 설정
   const paths = useGeoPolygon();
   //좌표를 포함한 부스들 가져오기
   const booths = useBooths();
   //내 위치 좌표 가져오기
   const myLocation = useMyLocation();
-
-  //줌 레벨 가져오기
-  useEffect(() => {
-    if (!map) return;
-
-    const listener = window.naver.maps.Event.addListener(
-      map,
-      "zoom_changed",
-      () => {
-        const currentZoom = map.getZoom();
-        setZoomLevel(currentZoom);
-      }
-    );
-
-    return () => {
-      window.naver.maps.Event.removeListener(listener);
-    };
-  }, [map]);
-
+  //줌레벨 가져오기
+  const zoom = useMapZoom(map);
   //맵 드래그, 클릭 컨트롤
-  useEffect(() => {
-    if (!map) return;
-
-    const dragStartListener = window.naver.maps.Event.addListener(
-      map,
-      "dragstart",
-      () => {
-        isDraggingRef.current = true;
-      }
-    );
-
-    const dragEndListener = window.naver.maps.Event.addListener(
-      map,
-      "dragend",
-      () => {
-        isDraggingRef.current = false;
-      }
-    );
-
-    const clickListener = window.naver.maps.Event.addListener(
-      map,
-      "click",
-      () => {
-        if (isDraggingRef.current) return; // 드래그 중이면 무시
-        setSelectedBooth(null);
-      }
-    );
-
-    return () => {
-      window.naver.maps.Event.removeListener(dragStartListener);
-      window.naver.maps.Event.removeListener(dragEndListener);
-      window.naver.maps.Event.removeListener(clickListener);
-    };
-  }, [map]);
+  useMapEvents(map, () => setSelectedBooth(null));
 
   const openBooth = useCallback(
     (id: number) => {
@@ -115,7 +67,7 @@ const MapPage = () => {
             <BoothMarkers
               booths={booths}
               openBooth={openBooth}
-              zoomLevel={zoomLevel}
+              zoomLevel={zoom}
             />
           </NaverMap>
         </MapDiv>

apps/nowait-user/src/pages/waiting/boothMap/hooks/useMapEvents.ts

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from "react";
+
+export const useMapEvents = (
+  map: any,
+  onMapClick: () => void
+) => {
+  const isDraggingRef = useRef(false);
+
+  useEffect(() => {
+    if (!map) return;
+
+    const dragStart = window.naver.maps.Event.addListener(
+      map,
+      "dragstart",
+      () => (isDraggingRef.current = true)
+    );
+
+    const dragEnd = window.naver.maps.Event.addListener(
+      map,
+      "dragend",
+      () => (isDraggingRef.current = false)
+    );
+
+    const click = window.naver.maps.Event.addListener(map, "click", () => {
+      if (!isDraggingRef.current) onMapClick();
+    });
+
+    return () => {
+      window.naver.maps.Event.removeListener(dragStart);
+      window.naver.maps.Event.removeListener(dragEnd);
+      window.naver.maps.Event.removeListener(click);
+    };
+  }, [map, onMapClick]);
+};

apps/nowait-user/src/pages/waiting/boothMap/hooks/useMapZoom.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+export const useMapZoom = (map: any) => {
+  const [zoom, setZoom] = useState(14);
+
+  useEffect(() => {
+    if (!map) return;
+
+    const listener = window.naver.maps.Event.addListener(
+      map,
+      "zoom_changed",
+      () => setZoom(map.getZoom())
+    );
+
+    return () => window.naver.maps.Event.removeListener(listener);
+  }, [map]);
+
+  return zoom;
+};