Skip to content

Commit

Permalink
fix: 지도 여행지 정보 더블 터치 이벤트
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaeHee99
DaeHee99 committed Dec 15, 2024
1 parent a843826 commit 029bb90
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 93 deletions.
34 changes: 16 additions & 18 deletions src/components/CourseMap/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ interface Props {
function CourseMap({ mapName, reload, markerData }: Props) {
const Tmapv2 = window.Tmapv2;
const mapRef = useRef<HTMLDivElement | null>(null);
const isPanning = useRef<boolean>(false);
const lastTouchTime = useRef<number>(0);
const [isDrawMap, setIsDrawMap] = useState(false);
const [showDestinationModal, setShowDestinationModal] = useState(false);
const [courseData, setCourseData] = useState<Destination[]>([]);
Expand Down Expand Up @@ -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]
Expand Down Expand Up @@ -167,10 +169,6 @@ function CourseMap({ mapName, reload, markerData }: Props) {
scrollwheel: true,
});

map.addListener("drag", () => {
isPanning.current = true;
});

// 마커
markerData.forEach((marker, index) => {
setTimeout(
Expand Down
22 changes: 10 additions & 12 deletions src/components/PlaceMap/MapBox/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function MapBox({
}: Props) {
const Tmapv2 = window.Tmapv2;
const mapRef = useRef<HTMLDivElement | null>(null);
const isPanning = useRef<boolean>(false);
const lastTouchTime = useRef<number>(0);
const [recentMap, setRecentMap] = useState();
const [marker, setMarker] = useState<Marker[]>([]);

Expand Down Expand Up @@ -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({
Expand All @@ -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;
Expand Down
50 changes: 22 additions & 28 deletions src/components/PlaceMap/NewPlaceModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function NewPlaceModal({
const Tmapv2 = window.Tmapv2;
const modalRef = useRef<HTMLDivElement | null>(null);
const mapRef = useRef<HTMLDivElement | null>(null);
const isPanning = useRef<boolean>(false);
const lastTouchTime = useRef<number>(0);
const [keyword, setKeyword] = useState("");
const [showFormModal, setShowFormModal] = useState(false);
const [loading, setLoading] = useState(false);
Expand Down Expand Up @@ -119,10 +119,6 @@ function NewPlaceModal({
scrollwheel: true,
});

map.addListener("drag", () => {
isPanning.current = true;
});

const PTbounds = new Tmapv2.LatLngBounds();

markerData.forEach((marker) => {
Expand Down Expand Up @@ -179,10 +175,6 @@ function NewPlaceModal({
scrollwheel: true,
});

map.addListener("drag", () => {
isPanning.current = true;
});

const positionBounds = new Tmapv2.LatLngBounds();

for (let k in resultpoisData) {
Expand Down Expand Up @@ -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);
Expand Down
40 changes: 17 additions & 23 deletions src/pages/AdminPage/Management/Place/NewPlaceModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function NewPlaceModal({
const Tmapv2 = window.Tmapv2;
const modalRef = useRef<HTMLDivElement | null>(null);
const mapRef = useRef<HTMLDivElement | null>(null);
const isPanning = useRef<boolean>(false);
const lastTouchTime = useRef<number>(0);
const [keyword, setKeyword] = useState("");
const [showFormModal, setShowFormModal] = useState(false);
const [loading, setLoading] = useState(false);
Expand Down Expand Up @@ -115,10 +115,6 @@ function NewPlaceModal({
scrollwheel: true,
});

map.addListener("drag", () => {
isPanning.current = true;
});

const PTbounds = new Tmapv2.LatLngBounds();

placeData.forEach((marker) => {
Expand Down Expand Up @@ -174,10 +170,6 @@ function NewPlaceModal({
scrollwheel: true,
});

map.addListener("drag", () => {
isPanning.current = true;
});

const positionBounds = new Tmapv2.LatLngBounds();

for (let k in resultpoisData) {
Expand Down Expand Up @@ -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);
Expand Down
22 changes: 10 additions & 12 deletions src/pages/AdminPage/Management/Place/PlaceMap/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function PlaceMap({
}: Props) {
const Tmapv2 = window.Tmapv2;
const mapRef = useRef<HTMLDivElement | null>(null);
const isPanning = useRef<boolean>(false);
const lastTouchTime = useRef<number>(0);
const [recentMap, setRecentMap] = useState();
const [marker, setMarker] = useState<any>([]);
const [isInitialMap, setIsInitialMap] = useState(true);
Expand Down Expand Up @@ -58,10 +58,6 @@ function PlaceMap({
scrollwheel: true,
});

map.addListener("drag", () => {
isPanning.current = true;
});

setRecentMap(map);

return map;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 029bb90

Please sign in to comment.