Merge pull request #442 from boostcampwm-2024/feature/fe/#258-SearchB…

…oxAndZoomSliderEventSolve

[FE][Fix] #441 : 검색창,zoomslider에서 터치 이벤트 스크롤 문제 해결

frontend/src/component/searchbox/SearchBox.tsx

@@ -146,13 +146,39 @@ export const SearchBox = (props: ISearchBoxProps) => {
     props.deleteMarker();
   };
 
+  const [, setScrollPosition] = useState(0);
+  const [touchStartY, setTouchStartY] = useState<number | null>(null);
+
+  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    // 터치 시작 지점 저장
+    setTouchStartY(e.touches[0].clientY);
+  };
+
+  const handleTouchMove = (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 handleTouchEnd = () => {
+    setTouchStartY(null);
+  };
+
   return (
     <div
       className="absolute top-2 z-[6000] w-full px-2"
-      onTouchMove={e => {
-        e.stopPropagation();
-        e.preventDefault();
-      }}
+      onTouchStart={e => e.stopPropagation()}
+      onTouchMove={e => e.stopPropagation()}
+      onTouchEnd={e => e.stopPropagation()}
     >
       {/* 검색 입력 */}
       <div className="border-grayscale-75 text-grayscale-400 flex h-11 w-full rounded border bg-white px-3">
@@ -172,7 +198,15 @@ export const SearchBox = (props: ISearchBoxProps) => {
 
       {/* 검색 결과 리스트 */}
       {searchResults.length > 0 && (
-        <div className="border-grayscale-75 relative z-[5000] mt-2 max-h-60 w-full overflow-y-auto border-2 bg-white px-2">
+        <div
+          className="border-grayscale-75 relative z-[5000] mt-2 max-h-60 w-full overflow-y-auto border-2 bg-white px-2"
+          style={{
+            WebkitOverflowScrolling: 'touch',
+          }}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+        >
           {loading && <p>로딩 중...</p>}
           {error && <p className="text-red-500">{error}</p>}
           {searchResults.map(result => (

frontend/src/component/zoomslider/ZoomSlider.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { MdOutlineAdd, MdRemove } from 'react-icons/md';
 import './ZoomSlider.css';
-import { DEFAULT_ZOOM } from '@/lib/constants/mapConstants.ts';
 
 interface IZoomSliderProps {
   /** Naver 지도 객체 */
@@ -67,7 +66,7 @@ const ZoomSliderInput = ({ zoomLevel, onSliderChange }: IZoomSliderInputProps) =
 };
 
 export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => {
-  const [zoomLevel, setZoomLevel] = useState(map?.getZoom() ?? DEFAULT_ZOOM);
+  const [zoomLevel, setZoomLevel] = useState(map?.getZoom() ?? 10);
 
   useEffect(() => {
     if (!map) return undefined;
@@ -88,21 +87,32 @@ export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => {
   };
 
   const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newZoom = parseInt(event.target.value, DEFAULT_ZOOM);
+    const newZoom = parseInt(event.target.value, 10);
     if (map) {
       map.setZoom(newZoom);
       setZoomLevel(newZoom);
       redrawCanvas();
     }
   };
 
+  const handleTouchStart = (event: React.TouchEvent) => {
+    event.stopPropagation();
+  };
+
+  const handleTouchMove = (event: React.TouchEvent) => {
+    event.stopPropagation();
+  };
+
+  const handleTouchEnd = (event: React.TouchEvent) => {
+    event.stopPropagation();
+  };
+
   return (
     <div
       className="flex h-48 w-9 flex-col items-center rounded bg-white shadow"
-      onTouchMove={e => {
-        e.stopPropagation();
-        e.preventDefault();
-      }}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
     >
       <ZoomButton label={<MdOutlineAdd />} onClick={() => handleZoomChange(1)} />
       <ZoomSliderInput zoomLevel={zoomLevel} onSliderChange={handleSliderChange} />