[FE][Fix] #224 : Frontend 버그 수정

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}

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 />;
 };

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'}