From d6a15a0c5e724020f7b3324a46176c6daa1c3762 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Tue, 30 Jan 2024 14:15:22 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20=EC=9D=B8=ED=8F=AC=EC=B0=BD=20?= =?UTF-8?q?=EB=9D=84=EC=9B=8C=EC=A7=84=20=EC=B1=84=EB=A1=9C=20=EB=B0=94?= =?UTF-8?q?=EA=B9=A5=EC=AA=BD=20=EB=88=84=EB=A5=B4=EB=A9=B4=20=EC=9D=B8?= =?UTF-8?q?=ED=8F=AC=EC=B0=BD=20=EC=97=86=EC=96=B4=EC=A7=80=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - infoWindows 배열 형태 변경 - removeInfoWindow에 infoWindow 변수 Null로 만드는 로직 추가 --- src/utils/tmap.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/utils/tmap.tsx b/src/utils/tmap.tsx index 82facf56..a282c038 100644 --- a/src/utils/tmap.tsx +++ b/src/utils/tmap.tsx @@ -29,7 +29,7 @@ export class TMapModule { #isPathVisible: boolean = true; - #infoWindows: (typeof window.Tmapv3.InfoWindow)[] = []; + #infoWindow: typeof window.Tmapv3.InfoWindow = null; #zoomInLevel: number = 17; // TODO: 임시 #maxMarkerCount: number = 15; @@ -62,6 +62,11 @@ export class TMapModule { }); const handleMapClick = async (e: typeof Tmapv3.maps.MouseEvent) => { + if (this.#infoWindow) { + this.removeInfoWindow(); + return; + } + const { _lat: lat, _lng: lng } = e._data.lngLat; const { fullAddress } = await TmapRepository.getAddressFromLatLng({ @@ -305,7 +310,7 @@ export class TMapModule { address: string; isPinned: boolean; }) { - this.removeInfoWindow(); + if (this.#infoWindow) this.removeInfoWindow(); const infoWindowLatLng = new Tmapv3.LatLng(lat, lng); const content = renderToString( @@ -322,7 +327,7 @@ export class TMapModule { }); infoWindow.setMap(this.#mapInstance); - this.#infoWindows.push(infoWindow); + this.#infoWindow = infoWindow; this.#mapInstance.setCenter(infoWindowLatLng); this.#mapInstance.setZoom(this.#zoomInLevel); @@ -372,6 +377,7 @@ export class TMapModule { // 인포창 전체 삭제 removeInfoWindow() { - this.#infoWindows.forEach((infoWindow) => infoWindow.setMap(null)); + this.#infoWindow.setMap(null); + this.#infoWindow = null; } } From c0774b1afb192e7686f34fc77fb120e4c0ed58d2 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Tue, 30 Jan 2024 14:18:33 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=A9=B9=20Marker=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=9D=98=20number=20=ED=8C=8C=EB=9D=BC?= =?UTF-8?q?=EB=AF=B8=ED=84=B0=EB=A5=BC=20order=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/map/marker/Marker.tsx | 6 +++--- src/utils/tmap.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/features/map/marker/Marker.tsx b/src/features/map/marker/Marker.tsx index 3e90f094..e5d9500b 100644 --- a/src/features/map/marker/Marker.tsx +++ b/src/features/map/marker/Marker.tsx @@ -3,14 +3,14 @@ import MarkerImage from '@/assets/icons/marker.svg?react'; import * as S from './Marker.css'; interface PropsType { - number: number; + order: number; } -const Marker = ({ number }: PropsType) => { +const Marker = ({ order }: PropsType) => { return (
-

{number}

+

{order}

); }; diff --git a/src/utils/tmap.tsx b/src/utils/tmap.tsx index a282c038..048fec89 100644 --- a/src/utils/tmap.tsx +++ b/src/utils/tmap.tsx @@ -166,7 +166,7 @@ export class TMapModule { ({ marker, lat, lng, ...rest }, index) => { marker.setMap(null); const updatedIconHTML = renderToString( - , + , ); const updatedMarker = new Tmapv3.Marker({ position: new Tmapv3.LatLng(lat, lng), @@ -336,7 +336,7 @@ export class TMapModule { if (this.#markers.length >= this.#maxMarkerCount) return; const iconHTML = renderToString( - , + , ); this.createMarker({ From af201a56fea5b2cf84c68522d697900b07cef7c2 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Tue, 30 Jan 2024 14:20:10 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20TmapModule=EC=9D=98=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=EC=B6=94=EB=A1=A0=20=EA=B0=80=EB=8A=A5?= =?UTF-8?q?=ED=95=9C=20=EB=B3=80=EC=88=98=EC=9D=98=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EB=AA=85=EC=8B=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/tmap.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils/tmap.tsx b/src/utils/tmap.tsx index 048fec89..0b701016 100644 --- a/src/utils/tmap.tsx +++ b/src/utils/tmap.tsx @@ -27,12 +27,12 @@ export class TMapModule { #markers: MarkersType[] = []; #polylines: (typeof Tmapv3.Polyline)[] = []; - #isPathVisible: boolean = true; + #isPathVisible = true; #infoWindow: typeof window.Tmapv3.InfoWindow = null; - #zoomInLevel: number = 17; // TODO: 임시 - #maxMarkerCount: number = 15; + #zoomInLevel = 17; // TODO: 임시 + #maxMarkerCount = 15; constructor({ mapId = 'tmap', From d267a9bad29e67f5697a4492a10c696dfbd05125 Mon Sep 17 00:00:00 2001 From: KimGaeun Date: Tue, 30 Jan 2024 14:21:18 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=ED=8C=8C=EB=9D=BC?= =?UTF-8?q?=EB=AF=B8=ED=84=B0=EB=A1=9C=20=EB=B0=9B=EB=8A=94=20event?= =?UTF-8?q?=EA=B0=9D=EC=B2=B4=EB=A5=BC=20e=EC=97=90=EC=84=9C=20event?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/tmap.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils/tmap.tsx b/src/utils/tmap.tsx index 0b701016..25d2271c 100644 --- a/src/utils/tmap.tsx +++ b/src/utils/tmap.tsx @@ -61,13 +61,13 @@ export class TMapModule { zoom, }); - const handleMapClick = async (e: typeof Tmapv3.maps.MouseEvent) => { + const handleMapClick = async (event: typeof Tmapv3.maps.MouseEvent) => { if (this.#infoWindow) { this.removeInfoWindow(); return; } - const { _lat: lat, _lng: lng } = e._data.lngLat; + const { _lat: lat, _lng: lng } = event._data.lngLat; const { fullAddress } = await TmapRepository.getAddressFromLatLng({ lat, @@ -368,7 +368,7 @@ export class TMapModule { document .querySelector('#infoWindow') - ?.addEventListener('click', (e) => e.stopPropagation()); + ?.addEventListener('click', (event) => event.stopPropagation()); document .querySelector('#pinButton')