[FE][Fix] #441 : BottomSheet 이벤트 스크롤 문제 해결

- BottomSheet 이벤트 스크롤 문제 해결

frontend/src/component/bottomsheet/BottomSheet.tsx

@@ -56,13 +56,42 @@ export const BottomSheet = ({
     setSheetHeight(minHeight);
   };
 
+  const [, setScrollPosition] = useState(0);
+  const [touchStartY, setTouchStartY] = useState<number | null>(null);
+
+  const handleContentTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    setTouchStartY(e.touches[0].clientY);
+  };
+
+  const handleContentTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+    if (touchStartY !== null) {
+      const deltaY = e.touches[0].clientY - touchStartY;
+
+      const scrollableElement = e.currentTarget; // 현재 스크롤이 가능한 요소
+      const newScrollPosition = scrollableElement.scrollTop - deltaY;
+
+      scrollableElement.scrollTop = newScrollPosition;
+
+      setTouchStartY(e.touches[0].clientY);
+
+      setScrollPosition(newScrollPosition);
+    }
+  };
+
+  const handleContentTouchEnd = () => {
+    setTouchStartY(null);
+  };
+
   return (
     <div
       className="transition-height absolute bottom-0 left-0 right-0 overflow-hidden rounded-t-2xl bg-white shadow-lg duration-700 ease-out"
       style={{
         backgroundColor: `${backgroundColor}`,
         height: `${sheetHeight * 100}vh`,
       }}
+      onTouchStart={e => e.stopPropagation()}
+      onTouchMove={e => e.stopPropagation()}
+      onTouchEnd={e => e.stopPropagation()}
     >
       <div
         className="flex items-center justify-center pb-6 pt-2"
@@ -82,7 +111,14 @@ export const BottomSheet = ({
         </button>
       </div>
 
-      <div className="h-[calc(100%-60px)] overflow-auto pb-5">{children}</div>
+      <div
+        className="h-[calc(100%-60px)] overflow-auto pb-5"
+        onTouchStart={handleContentTouchStart}
+        onTouchMove={handleContentTouchMove}
+        onMouseDown={handleContentTouchEnd}
+      >
+        {children}
+      </div>
     </div>
   );
 };

frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx

@@ -4,7 +4,6 @@ import { useCanvasInteraction } from '@/hooks/useCanvasInteraction';
 import { useRedrawCanvas } from '@/hooks/useRedraw';
 import { ZoomSlider } from '@/component/zoomslider/ZoomSlider';
 import { ICluster, useCluster } from '@/hooks/useCluster';
-import { DEFAULT_ZOOM, MIN_ZOOM } from '@/lib/constants/mapConstants.ts';
 
 export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasViewProps>(
   ({ lat, lng, alpha, otherLocations, guests, width, height }: IMapCanvasViewProps, ref) => {
@@ -22,8 +21,8 @@ export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasView
 
       const mapInstance = new naver.maps.Map(mapRef.current, {
         center: new naver.maps.LatLng(lat, lng),
-        zoom: DEFAULT_ZOOM,
-        minZoom: MIN_ZOOM,
+        zoom: 10,
+        minZoom: 7,
         maxBounds: new naver.maps.LatLngBounds(
           new naver.maps.LatLng(33.0, 124.5),
           new naver.maps.LatLng(38.9, 131.9),
@@ -37,7 +36,7 @@ export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasView
       return () => {
         mapInstance.destroy();
       };
-    }, []);
+    }, [lat, lng]);
 
     const latLngToCanvasPoint = (latLng: IPoint): ICanvasPoint | null => {
       if (!map || !projection || !canvasRef.current) return null;
@@ -146,13 +145,14 @@ export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasView
             position: 'absolute',
             top: 0,
             left: 0,
-            pointerEvents: 'auto',
+            pointerEvents: isDragging ? 'none' : 'auto',
           }}
         />
         <div
           className="absolute right-2 top-1/2 flex gap-2"
           style={{
             transform: 'translateY(-50%)',
+            pointerEvents: 'auto',
           }}
         >
           <ZoomSlider map={map} redrawCanvas={redrawCanvas} />