feat: MapManage 페이지 Map ref 변경

apps/nowait-user/src/pages/waiting/BoothMapManage/MapManagePage.tsx

@@ -5,11 +5,10 @@ import GeoDataForm from "./components/GeoDataForm";
 import MapCanvas from "./components/MapCanvas";
 import { useMapClick } from "./hooks/useMapClick";
 import { useMarkerManager } from "./hooks/useMarkerManager";
-import { useMap } from "react-naver-maps";
+import { useState } from "react";
 
 const MapManagePage = () => {
-  const map = useMap();
-
+  const [map, setMap] = useState<any | null>(null);
   const paths = useGeoPolygon();
   const myLocation = useMyLocation();
 
@@ -36,6 +35,7 @@ const MapManagePage = () => {
         center={myLocation.center}
         paths={paths}
         markers={markers}
+        setMap={setMap}
       />
       <GeoDataForm />
       <MapControls

apps/nowait-user/src/pages/waiting/BoothMapManage/components/MapCanvas.tsx

@@ -6,12 +6,13 @@ interface PropsType {
   center: { lat: number; lng: number };
   paths: any;
   markers: { storeId: string; lat: number; lng: number }[];
+  setMap: (map: any) => void;
 }
 
-const MapCanvas = ({ center, paths, markers }: PropsType) => {
+const MapCanvas = ({ center, paths, markers,setMap }: PropsType) => {
   return (
     <MapDiv style={{ width: "100%", height: "100vh" }}>
-      <NaverMap defaultCenter={center} defaultZoom={16}>
+      <NaverMap defaultCenter={center} defaultZoom={16} ref={setMap}>
         <MapControlButtons center={center} />
 
         <UniversityPolygon paths={paths} />

apps/nowait-user/src/pages/waiting/BoothMapManage/hooks/useMarkerManager.ts

@@ -1,7 +1,9 @@
 import { useCallback, useState } from "react";
 
 export const useMarkerManager = () => {
-  const [markers, setMarkers] = useState<{ storeId: string; lat: number; lng: number }[]>([]);
+  const [markers, setMarkers] = useState<
+    { storeId: string; lat: number; lng: number }[]
+  >([]);
   const [isActive, setIsActive] = useState(false);
 
   //마커 추가
@@ -10,9 +12,7 @@ export const useMarkerManager = () => {
       const storeId = prompt("스토어 아이디를 입력하세요");
       if (!storeId?.trim()) return;
 
-      const isExist = markers.some(
-        (marker) => marker.storeId === storeId
-      );
+      const isExist = markers.some((marker) => marker.storeId === storeId);
 
       if (isExist) {
         alert("이미 존재하는 주점입니다.");
@@ -21,12 +21,11 @@ export const useMarkerManager = () => {
 
       setMarkers((prev) => [...prev, { storeId, lat, lng }]);
     },
-    [markers]
+    [markers, isActive],
   );
 
   //마커 뒤로가기
-  const undoMarker = () =>
-    setMarkers((prev) => prev.slice(0, -1));
+  const undoMarker = () => setMarkers((prev) => prev.slice(0, -1));
 
   //마커 초기화
   const resetMarkers = () => setMarkers([]);
@@ -35,8 +34,7 @@ export const useMarkerManager = () => {
   const copyMarkers = () => {
     const text = markers
       .map(
-        ({ storeId, lat, lng }) =>
-          `${storeId} : { lat: ${lat}, lng: ${lng} }`
+        ({ storeId, lat, lng }) => `${storeId} : { lat: ${lat}, lng: ${lng} }`,
       )
       .join(",\n");
 
@@ -53,4 +51,4 @@ export const useMarkerManager = () => {
     resetMarkers,
     copyMarkers,
   };
-};
+};

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

@@ -58,7 +58,7 @@ const MapPage = () => {
         <MapDiv
           style={{
             width: "100%",
-            height: "600px",
+            height: "100vh",
           }}
         >
           <NaverMap center={myLocation.center} zoom={16}>

apps/nowait-user/src/pages/waiting/boothMap/constants/boothPosition.ts

@@ -1,11 +1,8 @@
 export const BOOTHPOSITION: Record<number, { lat: number; lng: number }> = {
-  16: { lat: 37.454695446317274, lng: 127.13513962199758 },
-  37: { lat: 37.45012, lng: 127.12858 },
-  39: { lat: 37.44895, lng: 127.1293 },
-  1: { lat: 37.4546773, lng: 127.1350487 },
-  2: { lat: 37.4547305, lng: 127.1350393 },
-  3: { lat: 37.4547837, lng: 127.1350393 },
-  4: { lat: 37.454837, lng: 127.1350286 },
-  24: { lat: 37.4548944, lng: 127.1350205 },
+29 : { lat: 37.4550611, lng: 127.1352418 },
+2 : { lat: 37.4550499, lng: 127.1352465 },
+3 : { lat: 37.4550403, lng: 127.1352512 },
+4 : { lat: 37.4550307, lng: 127.1352572 },
+5 : { lat: 37.4550217, lng: 127.1352653 }
 
 };