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

apps/web/src/components/search-place-bottom-sheet/index.tsx

@@ -8,6 +8,8 @@ import SearchListItem from "./search-list-item";
 import { SearchIcon } from "@repo/ui/icons";
 import { useGetPlaceSearchList } from "@/hooks/api/useGetPlaceSearchList";
 import CurrentLocationIcon from "../../assets/icons/CurrentLocationIcon";
+import { useNaverMap } from "@repo/naver-map";
+import { convertWGS84ToLatLng } from "@/utils/location";
 
 // TODO: 선택한 주소에 해당하는 마커 표기, 시트 배경 dimmed 처리, 현재 위치 지정 기능 필요
 
@@ -16,6 +18,7 @@ const SearchPlaceBottomSheet = () => {
   const [query, setQuery] = useState<string>("");
   const [place, setPlace] = useState<Place | null>(null);
   const { data, refetch } = useGetPlaceSearchList(query);
+  const { map } = useNaverMap();
 
   const onChangeInputText = (event: ChangeEvent<HTMLInputElement>) => {
     setQuery(event.target.value);
@@ -32,6 +35,9 @@ const SearchPlaceBottomSheet = () => {
   const onBlurSearchInput = () => {};
 
   const onClickListItem = (place: Place) => {
+    const latLng = convertWGS84ToLatLng({ y: place.mapy, x: place.mapx });
+    map.panTo(latLng);
+
     setPlace(place);
     setIsSearching(false);
   };

apps/web/src/utils/location.ts

@@ -1,3 +1,5 @@
+import { getLatLng } from "@repo/naver-map";
+
 export const convertToMarkerData = (convH: any) => {
   if (!convH) return [];
 
@@ -39,3 +41,7 @@ export const convertToCenterMarkerData = (centroid: any) => {
     longitude: centroid.longitude,
   };
 };
+
+export const convertWGS84ToLatLng = ({ y, x }: { y: string; x: string }) => {
+  return getLatLng({ y: +y / 10000000, x: +x / 10000000 });
+};

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,6 @@
+export const getLatLng = ({ y, x }: { y: number; x: number }) => {
+  if (!window.naver || !window.naver.maps) {
+    throw new Error("네이버 지도 api가 로드되지 않았습니다.");
+  }
+  return new naver.maps.LatLng(y, x);
+};