From febc9ab6fa8ff939c9834a9bd0e755ca12b3878e Mon Sep 17 00:00:00 2001
From: effozen <ashgrayblue0@gmail.com>
Date: Thu, 21 Nov 2024 23:08:51 +0900
Subject: [PATCH] =?UTF-8?q?[FE][Fix]=20#224=20:=20=EB=84=A4=EC=9D=B4?=
 =?UTF-8?q?=EB=B2=84=20=EC=A7=80=EB=8F=84=20=EC=83=98=ED=94=8C=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/maps/NaverMapSample.tsx     | 25 +++++++++++++++++++
 frontend/src/pages/Main.tsx                   |  4 +--
 2 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/component/maps/NaverMapSample.tsx

diff --git a/frontend/src/component/maps/NaverMapSample.tsx b/frontend/src/component/maps/NaverMapSample.tsx
new file mode 100644
index 00000000..b26b2b68
--- /dev/null
+++ b/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" />;
+};
diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
index 6d86798e..c53bf0bf 100644
--- a/frontend/src/pages/Main.tsx
+++ b/frontend/src/pages/Main.tsx
@@ -5,7 +5,7 @@ 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 { CanvasWithMap } from '@/component/canvas/CanvasWithMap.tsx';
+import { NaverMap } from '@/component/maps/NaverMapSample.tsx';
 
 const contentData = [
   {
@@ -62,7 +62,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'}