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(null); + + const handleTouchStart = (e: React.TouchEvent) => { + // 터치 시작 지점 저장 + setTouchStartY(e.touches[0].clientY); + }; + + const handleTouchMove = (e: React.TouchEvent) => { + 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 (
{ - e.stopPropagation(); - e.preventDefault(); - }} + onTouchStart={e => e.stopPropagation()} + onTouchMove={e => e.stopPropagation()} + onTouchEnd={e => e.stopPropagation()} > {/* 검색 입력 */}
@@ -172,7 +198,15 @@ export const SearchBox = (props: ISearchBoxProps) => { {/* 검색 결과 리스트 */} {searchResults.length > 0 && ( -
+
{loading &&

로딩 중...

} {error &&

{error}

} {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) => { - 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 (
{ - e.stopPropagation(); - e.preventDefault(); - }} + onTouchStart={handleTouchStart} + onTouchMove={handleTouchMove} + onTouchEnd={handleTouchEnd} > } onClick={() => handleZoomChange(1)} />