From 029bb90584864c6fdda176581ca16394d333a966 Mon Sep 17 00:00:00 2001 From: Daehee Date: Mon, 16 Dec 2024 03:52:50 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A7=80=EB=8F=84=20=EC=97=AC=ED=96=89?= =?UTF-8?q?=EC=A7=80=20=EC=A0=95=EB=B3=B4=20=EB=8D=94=EB=B8=94=20=ED=84=B0?= =?UTF-8?q?=EC=B9=98=20=EC=9D=B4=EB=B2=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CourseMap/index.tsx | 34 ++++++------- src/components/PlaceMap/MapBox/index.tsx | 22 ++++---- .../PlaceMap/NewPlaceModal/index.tsx | 50 ++++++++----------- .../Management/Place/NewPlaceModal/index.tsx | 40 +++++++-------- .../Management/Place/PlaceMap/index.tsx | 22 ++++---- 5 files changed, 75 insertions(+), 93 deletions(-) diff --git a/src/components/CourseMap/index.tsx b/src/components/CourseMap/index.tsx index f0edb485..91c51bb8 100644 --- a/src/components/CourseMap/index.tsx +++ b/src/components/CourseMap/index.tsx @@ -36,7 +36,7 @@ interface Props { function CourseMap({ mapName, reload, markerData }: Props) { const Tmapv2 = window.Tmapv2; const mapRef = useRef(null); - const isPanning = useRef(false); + const lastTouchTime = useRef(0); const [isDrawMap, setIsDrawMap] = useState(false); const [showDestinationModal, setShowDestinationModal] = useState(false); const [courseData, setCourseData] = useState([]); @@ -81,20 +81,22 @@ function CourseMap({ mapName, reload, markerData }: Props) { lon: 0, }); }); - tmapMarker.addListener("touchstart", () => { - isPanning.current = false; - }); - tmapMarker.addListener("touchend", () => { - if (isPanning.current) return; - setShowDestinationModal(true); - setClickedData({ - destinationId: destinationId, - name: name, - address: "", - lat: 0, - lon: 0, - }); + const currentTime = Date.now(); + const timeDifference = currentTime - lastTouchTime.current; + + if (timeDifference < 300) { + setShowDestinationModal(true); + setClickedData({ + destinationId: destinationId, + name: name, + address: "", + lat: 0, + lon: 0, + }); + } + + lastTouchTime.current = currentTime; }); }, [Tmapv2, startMarker, endMarker, pointMarker] @@ -167,10 +169,6 @@ function CourseMap({ mapName, reload, markerData }: Props) { scrollwheel: true, }); - map.addListener("drag", () => { - isPanning.current = true; - }); - // 마커 markerData.forEach((marker, index) => { setTimeout( diff --git a/src/components/PlaceMap/MapBox/index.tsx b/src/components/PlaceMap/MapBox/index.tsx index e36ff93d..14a110de 100644 --- a/src/components/PlaceMap/MapBox/index.tsx +++ b/src/components/PlaceMap/MapBox/index.tsx @@ -32,7 +32,7 @@ function MapBox({ }: Props) { const Tmapv2 = window.Tmapv2; const mapRef = useRef(null); - const isPanning = useRef(false); + const lastTouchTime = useRef(0); const [recentMap, setRecentMap] = useState(); const [marker, setMarker] = useState([]); @@ -87,10 +87,6 @@ function MapBox({ const map = recentMap || makeNewMap(); const PTbounds = new Tmapv2.LatLngBounds(); - map.addListener("drag", () => { - isPanning.current = true; - }); - setMarker( markerData.map((marker) => { const tmapMarker = new Tmapv2.Marker({ @@ -110,14 +106,16 @@ function MapBox({ setShowDestinationModal(true); setClickedData(marker); }); - tmapMarker.addListener("touchstart", () => { - isPanning.current = false; - }); - tmapMarker.addListener("touchend", () => { - if (isPanning.current) return; - setShowDestinationModal(true); - setClickedData(marker); + const currentTime = Date.now(); + const timeDifference = currentTime - lastTouchTime.current; + + if (timeDifference < 300) { + setShowDestinationModal(true); + setClickedData(marker); + } + + lastTouchTime.current = currentTime; }); return tmapMarker; diff --git a/src/components/PlaceMap/NewPlaceModal/index.tsx b/src/components/PlaceMap/NewPlaceModal/index.tsx index 0fb88b5a..15bc1ac1 100644 --- a/src/components/PlaceMap/NewPlaceModal/index.tsx +++ b/src/components/PlaceMap/NewPlaceModal/index.tsx @@ -40,7 +40,7 @@ function NewPlaceModal({ const Tmapv2 = window.Tmapv2; const modalRef = useRef(null); const mapRef = useRef(null); - const isPanning = useRef(false); + const lastTouchTime = useRef(0); const [keyword, setKeyword] = useState(""); const [showFormModal, setShowFormModal] = useState(false); const [loading, setLoading] = useState(false); @@ -119,10 +119,6 @@ function NewPlaceModal({ scrollwheel: true, }); - map.addListener("drag", () => { - isPanning.current = true; - }); - const PTbounds = new Tmapv2.LatLngBounds(); markerData.forEach((marker) => { @@ -179,10 +175,6 @@ function NewPlaceModal({ scrollwheel: true, }); - map.addListener("drag", () => { - isPanning.current = true; - }); - const positionBounds = new Tmapv2.LatLngBounds(); for (let k in resultpoisData) { @@ -231,26 +223,28 @@ function NewPlaceModal({ }); setShowFormModal(true); }); - tmapMarker.addListener("touchstart", () => { - isPanning.current = false; - }); - tmapMarker.addListener("touchend", () => { - if (isPanning.current) return; - setNewPlaceInfo({ - address: `${address} (${telNo})`, - content: "", - images: [], - lat: lat, - lon: lon, - name: name, - destinationId: 0, - views: 0, - avgRate: null, - reviews: [], - dibs: false, - }); - setShowFormModal(true); + const currentTime = Date.now(); + const timeDifference = currentTime - lastTouchTime.current; + + if (timeDifference < 300) { + setNewPlaceInfo({ + address: `${address} (${telNo})`, + content: "", + images: [], + lat: lat, + lon: lon, + name: name, + destinationId: 0, + views: 0, + avgRate: null, + reviews: [], + dibs: false, + }); + setShowFormModal(true); + } + + lastTouchTime.current = currentTime; }); } map.fitBounds(positionBounds, margin); diff --git a/src/pages/AdminPage/Management/Place/NewPlaceModal/index.tsx b/src/pages/AdminPage/Management/Place/NewPlaceModal/index.tsx index f732f24e..a7f66735 100644 --- a/src/pages/AdminPage/Management/Place/NewPlaceModal/index.tsx +++ b/src/pages/AdminPage/Management/Place/NewPlaceModal/index.tsx @@ -45,7 +45,7 @@ function NewPlaceModal({ const Tmapv2 = window.Tmapv2; const modalRef = useRef(null); const mapRef = useRef(null); - const isPanning = useRef(false); + const lastTouchTime = useRef(0); const [keyword, setKeyword] = useState(""); const [showFormModal, setShowFormModal] = useState(false); const [loading, setLoading] = useState(false); @@ -115,10 +115,6 @@ function NewPlaceModal({ scrollwheel: true, }); - map.addListener("drag", () => { - isPanning.current = true; - }); - const PTbounds = new Tmapv2.LatLngBounds(); placeData.forEach((marker) => { @@ -174,10 +170,6 @@ function NewPlaceModal({ scrollwheel: true, }); - map.addListener("drag", () => { - isPanning.current = true; - }); - const positionBounds = new Tmapv2.LatLngBounds(); for (let k in resultpoisData) { @@ -221,21 +213,23 @@ function NewPlaceModal({ }); setShowFormModal(true); }); - tmapMarker.addListener("touchstart", () => { - isPanning.current = false; - }); - tmapMarker.addListener("touchend", () => { - if (isPanning.current) return; - setNewPlaceInfo({ - address: `${address} (${telNo})`, - content: "", - images: [], - lat: lat, - lon: lon, - name: name, - }); - setShowFormModal(true); + const currentTime = Date.now(); + const timeDifference = currentTime - lastTouchTime.current; + + if (timeDifference < 300) { + setNewPlaceInfo({ + address: `${address} (${telNo})`, + content: "", + images: [], + lat: lat, + lon: lon, + name: name, + }); + setShowFormModal(true); + } + + lastTouchTime.current = currentTime; }); } map.fitBounds(positionBounds, margin); diff --git a/src/pages/AdminPage/Management/Place/PlaceMap/index.tsx b/src/pages/AdminPage/Management/Place/PlaceMap/index.tsx index a4b8782d..6d82a16e 100644 --- a/src/pages/AdminPage/Management/Place/PlaceMap/index.tsx +++ b/src/pages/AdminPage/Management/Place/PlaceMap/index.tsx @@ -26,7 +26,7 @@ function PlaceMap({ }: Props) { const Tmapv2 = window.Tmapv2; const mapRef = useRef(null); - const isPanning = useRef(false); + const lastTouchTime = useRef(0); const [recentMap, setRecentMap] = useState(); const [marker, setMarker] = useState([]); const [isInitialMap, setIsInitialMap] = useState(true); @@ -58,10 +58,6 @@ function PlaceMap({ scrollwheel: true, }); - map.addListener("drag", () => { - isPanning.current = true; - }); - setRecentMap(map); return map; @@ -91,14 +87,16 @@ function PlaceMap({ setDestinationId(marker.destinationId); setShowDestinationModal(true); }); - tmapMarker.addListener("touchstart", () => { - isPanning.current = false; - }); - tmapMarker.addListener("touchend", () => { - if (isPanning.current) return; - setDestinationId(marker.destinationId); - setShowDestinationModal(true); + const currentTime = Date.now(); + const timeDifference = currentTime - lastTouchTime.current; + + if (timeDifference < 300) { + setDestinationId(marker.destinationId); + setShowDestinationModal(true); + } + + lastTouchTime.current = currentTime; }); return tmapMarker;