Merge pull request #262 from boostcampwm-2024/feature/fe/#260-mapInMa…

…inView [FE][Feat] #260 : 홈화면에 지도-캔버스 연동된 화면 노출
boostcampwm-2024 · Nov 25, 2024 · 3629892 · 3629892
2 parents d41adbe + d8c1329
commit 3629892
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 15 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/assets/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>선따라 길따라 - DDara</title>
   </head>
   <body>

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,8 +1,5 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  touch-action: pan-y;
 }
 
 .logo {

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,3 +1,4 @@
 import { IndexRoutes } from '@/routes/IndexRoutes.tsx';
+import 'App.css';
 
 export const App = () => <IndexRoutes />;
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -9,7 +9,10 @@
    License: none (public domain)
 */
 
-*,
+* {
+  overscroll-behavior: none;
+  overscroll-behavior-y: none;
+}
 *::before,
 *::after {
   margin: 0;

diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
@@ -3,13 +3,13 @@ import { MdFormatListBulleted } from 'react-icons/md';
 import { FooterContext } from '@/component/layout/footer/LayoutFooterProvider';
 import { useNavigate } from 'react-router-dom';
 import { buttonActiveType } from '@/component/layout/enumTypes';
-import { MapProviderForDraw } from '@/component/canvasWithMap/MapProviderForDraw.tsx';
 import { BottomSheet } from '@/component/bottomsheet/BottomSheet.tsx';
 import { Content } from '@/component/content/Content.tsx';
 import { loadLocalData, saveLocalData } from '@/utils/common/manageLocalData.ts';
 import { AppConfig } from '@/lib/constants/commonConstants.ts';
 import { v4 as uuidv4 } from 'uuid';
 import { getUserLocation } from '@/hooks/getUserLocation.ts';
+import { MapCanvasForView } from '@/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx';
 
 const contentData = [
   {
@@ -84,23 +84,24 @@ export const Main = () => {
     setFooterActive(buttonActiveType.ACTIVE);
   }, []);
   return (
-    <div className="flex h-screen flex-col">
+    <div className="flex flex-col overflow-hidden">
       <header className="absolute left-0 right-0 top-0 z-10 flex p-4">
         <button type="button" className="text-gray-700">
           <MdFormatListBulleted size={24} />
         </button>
       </header>
 
-      <main
-        className="relative flex-grow"
-        style={{
-          height: `calc(100% - ${MIN_HEIGHT * 100}%)`,
-        }}
-      >
+      <main className="absolute h-full w-screen flex-grow overflow-hidden">
         {/* eslint-disable-next-line no-nested-ternary */}
         {lat && lng ? (
           otherLocations ? (
-            <MapProviderForDraw width={window.innerWidth} height={window.innerHeight} />
+            <MapCanvasForView
+              width="100%"
+              height="100%"
+              lat={lat}
+              lng={lng}
+              otherLocations={otherLocations}
+            />
           ) : (
             <section className="flex h-full items-center justify-center">
               Loading map data...