From 43b85a0381742ae97fd61c573d5c8980ddcc849a Mon Sep 17 00:00:00 2001
From: Hyein Jeong <jhi2359@naver.com>
Date: Thu, 5 Dec 2024 14:53:31 +0900
Subject: [PATCH] =?UTF-8?q?[FE][Fix]=20#258=20:=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=EC=B0=BD,zoomslider=EC=97=90=EC=84=9C=20=ED=84=B0=EC=B9=98=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 검색창에서 터치로 스크롤되지 않는 문제 해결
- zoomslider에서 터치로 슬라이드되지 않는 문제 해결
---
 .../src/component/searchbox/SearchBox.tsx     | 44 ++++++++++++++++---
 .../src/component/zoomslider/ZoomSlider.tsx   | 24 +++++++---
 2 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/searchbox/SearchBox.tsx b/frontend/src/component/searchbox/SearchBox.tsx
index 658a554..d5a338c 100644
--- a/frontend/src/component/searchbox/SearchBox.tsx
+++ b/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 => (
diff --git a/frontend/src/component/zoomslider/ZoomSlider.tsx b/frontend/src/component/zoomslider/ZoomSlider.tsx
index 60bdf07..facf180 100644
--- a/frontend/src/component/zoomslider/ZoomSlider.tsx
+++ b/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,7 +87,7 @@ 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);
@@ -96,13 +95,24 @@ export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => {
     }
   };
 
+  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} />