feat: 네이버 지도 객체 컨텍스트 추가 및 프로바이더 구현

apps/web/app/layout.tsx

@@ -4,6 +4,7 @@ import localFont from "next/font/local";
 import QueryProvider from "@repo/shared/QueryProvider";
 
 import "@/styles/global.css";
+import { NaverMapProvider } from "@repo/naver-map";
 
 export const metadata: Metadata = {
   title: "콕 | 중간지점 찾기",
@@ -33,7 +34,9 @@ export default function RootLayout({
         }}
         className={pretendard.className}
       >
-        <QueryProvider>{children}</QueryProvider>
+        <QueryProvider>
+          <NaverMapProvider>{children}</NaverMapProvider>
+        </QueryProvider>
       </body>
 
       <script

packages/naver-map/src/NaverMap.tsx

@@ -7,6 +7,7 @@ import { getCenterMarkerElement } from "./CenterMarkerElement";
 import DotMarker from "./DotMarker";
 import { getFinalMarkerElement } from "./FinalMarker";
 import { Flex } from "@repo/ui/components";
+import { useNaverMap, useSetNaverMap } from "./naver-map-provider";
 
 export const NAVER_MAP_CONFIG = {
   ZOOM_LEVEL: 17, // 확정
@@ -37,6 +38,7 @@ export const NaverMap = ({
   const [showPolygon, setShowPolygon] = useState<boolean>(false);
   const [showPolyline, setShowPolyline] = useState<boolean>(false);
   const centerMarkerRef = useRef<naver.maps.Marker | null>(null);
+  const { setMap } = useNaverMap();
 
   const loadNaverMapScript = () => {
     if (window.naver && window.naver.maps) {
@@ -152,6 +154,7 @@ export const NaverMap = ({
       setMapInstance(map);
       setShowPolygon(true);
       setShowPolyline(true);
+      setMap(map);
     } catch (e) {
       console.error("네이버 지도 생성 실패", e);
     }

packages/naver-map/src/index.ts

@@ -6,3 +6,6 @@ export * from "./types";
 export * from "./Polyline";
 export * from "./CenterMarkerElement";
 export * from "./MapMarkerIcon";
+
+export * from "./naver-map-provider";
+export * from "./utils";

packages/naver-map/src/naver-map-provider/index.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { createContext, ReactNode, useContext, useState } from "react";
+import { NaverMapInstance } from "../types";
+
+export interface NaverMapContext {
+  map: NaverMapInstance | null;
+  setMap: (map: NaverMapInstance) => void;
+}
+
+export const NaverMapContext = createContext<NaverMapContext | undefined>(
+  undefined
+);
+
+export const useNaverMap = (existedMap?: NaverMapInstance) => {
+  const mapContext = useContext(NaverMapContext);
+
+  if (!mapContext)
+    throw new Error("No Naver Map set, use NaverMapProvider to set one");
+
+  return mapContext;
+};
+
+export const useSetNaverMap = () => {
+  const mapContext = useContext(NaverMapContext);
+
+  const { setMap } = mapContext!;
+  return setMap;
+};
+
+export type NaverMapProviderProps = {
+  mapContext?: NaverMapContext;
+  children?: ReactNode;
+};
+
+export const NaverMapProvider = ({
+  children,
+}: NaverMapProviderProps): JSX.Element => {
+  const [map, setMap] = useState<NaverMapInstance | null>(null);
+  return (
+    <NaverMapContext.Provider value={{ map, setMap }}>
+      {children}
+    </NaverMapContext.Provider>
+  );
+};

packages/naver-map/src/utils/index.ts

@@ -0,0 +1,3 @@
+export const getLatLng = ({ y, x }: { y: number; x: number }) => {
+  return new naver.maps.LatLng(y, x);
+};