From 074b9e1671e2820f979649bcfb50d849933dd8d9 Mon Sep 17 00:00:00 2001
From: effozen <ashgrayblue0@gmail.com>
Date: Thu, 21 Nov 2024 20:12:59 +0900
Subject: [PATCH] =?UTF-8?q?[FE][Fix]=20#224=20:=20Frontend=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/component/canvas/CanvasWithMap.tsx | 3 ++-
 frontend/src/pages/GuestView.tsx                | 2 +-
 frontend/src/pages/Main.tsx                     | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/canvas/CanvasWithMap.tsx b/frontend/src/component/canvas/CanvasWithMap.tsx
index 2b41a5aa..a4718071 100644
--- a/frontend/src/component/canvas/CanvasWithMap.tsx
+++ b/frontend/src/component/canvas/CanvasWithMap.tsx
@@ -11,6 +11,7 @@ interface ICanvasWithMapProps {
   lng: number;
   zoom: number;
   mapType: string;
+  allowCanvas?: boolean;
 }
 
 interface IMouseEventState {
@@ -99,7 +100,7 @@ export const CanvasWithMap = (props: ICanvasWithMapProps) => {
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
     >
-      <Canvas ref={canvasRefMethods} />
+      {props.allowCanvas && <Canvas ref={canvasRefMethods} />}
       <Map
         lat={props.lat}
         lng={props.lng}
diff --git a/frontend/src/pages/GuestView.tsx b/frontend/src/pages/GuestView.tsx
index 99894b15..8ef7517c 100644
--- a/frontend/src/pages/GuestView.tsx
+++ b/frontend/src/pages/GuestView.tsx
@@ -12,5 +12,5 @@ export const GuestView = () => {
   }, []);
 
   // TODO: geoCoding API를 이용해서 현재 위치나 시작위치를 기반으로 자동 좌표 설정 구현 (현재: 하드코딩)
-  return <CanvasWithMap lat={37.3595704} lng={127.105399} zoom={21} mapType="naver" />;
+  return <CanvasWithMap lat={37.3595704} lng={127.105399} zoom={21} mapType="naver" allowCanvas />;
 };
diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
index 4849ac6f..6d86798e 100644
--- a/frontend/src/pages/Main.tsx
+++ b/frontend/src/pages/Main.tsx
@@ -1,11 +1,11 @@
 import { Fragment, useContext, useState } from 'react';
 import { getUserLocation } from '@/hooks/getUserLocation';
-import { Map } from '@/component/maps/Map';
 import { BottomSheet } from '@/component/bottomsheet/BottomSheet';
 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';
 
 const contentData = [
   {
@@ -62,7 +62,7 @@ export const Main = () => {
         }}
       >
         {lat && lng ? (
-          <Map lat={lat} lng={lng} type="naver" />
+          <CanvasWithMap lat={lat} lng={lng} zoom={20} mapType="naver" />
         ) : (
           <section className="flex h-full items-center justify-center">
             {error ? `Error: ${error}` : 'Loading'}