Merge pull request #244 from boostcampwm-2024/feature/fe/#224-combine…

…-map-and-canvas

[FE][Fix] #224 : 네이버 지도 샘플 코드 작성

frontend/src/component/maps/NaverMapSample.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+import { setNaverMapSync } from '@/component/maps/naverMapUtils';
+
+export interface INaverMapOptions {
+  lat: number;
+  lng: number;
+  zoom?: number;
+}
+
+export const NaverMap = (props: INaverMapOptions) => {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapOptions: INaverMapOptions = {
+    lat: props.lat,
+    lng: props.lng,
+    zoom: props.zoom,
+  };
+
+  useEffect(() => {
+    if (mapRef.current) {
+      setNaverMapSync(mapRef.current, mapOptions);
+    }
+  }, []);
+
+  return <section ref={mapRef} className="h-full w-full" />;
+};

frontend/src/pages/Main.tsx

@@ -5,8 +5,8 @@ import { Content } from '@/component/content/Content';
 import { MdFormatListBulleted } from 'react-icons/md';
 import { FooterContext } from '@/component/layout/footer/LayoutFooterProvider';
 import { useNavigate } from 'react-router-dom';
+import { NaverMap } from '@/component/maps/NaverMapSample.tsx';
 import { buttonActiveType } from '@/component/layout/enumTypes';
-import { CanvasWithMap } from '@/component/canvas/CanvasWithMap.tsx';
 
 const contentData = [
   {
@@ -64,7 +64,7 @@ export const Main = () => {
         }}
       >
         {lat && lng ? (
-          <CanvasWithMap lat={lat} lng={lng} zoom={20} mapType="naver" />
+          <NaverMap lat={lat} lng={lng} zoom={20} />
         ) : (
           <section className="flex h-full items-center justify-center">
             {error ? `Error: ${error}` : 'Loading'}