Merge pull request #432 from boostcampwm-2024/feature/fe/#258-qa

[FE][Feat] : 검색창,zoomslider에서 이벤트 버블링 방지
boostcampwm-2024 · Dec 5, 2024 · b169429 · b169429
2 parents d1272e4 + 5f3b04b
commit b169429
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 17 deletions.
diff --git a/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapProviderForDraw.tsx b/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapProviderForDraw.tsx
@@ -29,20 +29,6 @@ export const MapProviderForDraw = ({ width, height }: ICanvasScreenProps) => {
     };
   }, []);
 
-  useEffect(() => {
-    const preventDefault = (e: TouchEvent) => {
-      e.preventDefault();
-    };
-
-    document.body.style.overflow = 'hidden';
-    document.addEventListener('touchmove', preventDefault, { passive: false });
-
-    return () => {
-      document.body.style.overflow = 'auto';
-      document.removeEventListener('touchmove', preventDefault);
-    };
-  }, []);
-
   return (
     <MapCanvasForDraw
       width={windowSize.width}

diff --git a/frontend/src/component/searchbox/SearchBox.tsx b/frontend/src/component/searchbox/SearchBox.tsx
@@ -147,7 +147,13 @@ export const SearchBox = (props: ISearchBoxProps) => {
   };
 
   return (
-    <div className="absolute top-2 z-[6000] w-full px-2">
+    <div
+      className="absolute top-2 z-[6000] w-full px-2"
+      onTouchMove={e => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+    >
       {/* 검색 입력 */}
       <div className="border-grayscale-75 text-grayscale-400 flex h-11 w-full rounded border bg-white px-3">
         <input

diff --git a/frontend/src/component/zoomslider/ZoomSlider.tsx b/frontend/src/component/zoomslider/ZoomSlider.tsx
@@ -97,7 +97,13 @@ export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => {
   };
 
   return (
-    <div className="flex h-48 w-9 flex-col items-center rounded bg-white shadow">
+    <div
+      className="flex h-48 w-9 flex-col items-center rounded bg-white shadow"
+      onTouchMove={e => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+    >
       <ZoomButton label={<MdOutlineAdd />} onClick={() => handleZoomChange(1)} />
       <ZoomSliderInput zoomLevel={zoomLevel} onSliderChange={handleSliderChange} />
       <ZoomButton label={<MdRemove />} onClick={() => handleZoomChange(-1)} />

diff --git a/frontend/src/pages/DrawRoute.tsx b/frontend/src/pages/DrawRoute.tsx
@@ -130,7 +130,7 @@ export const DrawRoute = () => {
   return (
     <ToolTypeProvider>
       <div className="flex h-full w-full flex-col py-[75px]">
-        <div style={{ position: 'relative', padding: '1rem' }}>
+        <div className="relative px-4">
           <MapProviderForDraw width={window.innerWidth - 32} height={window.innerHeight - 180} />
         </div>
       </div>