From e47f05264e7bd23ac9f7237ed22a75756718e3e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=84=B8=EB=AF=BC?=
 <89172499+semnil5202@users.noreply.github.com>
Date: Fri, 17 Nov 2023 15:26:19 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=EA=B0=80=20=EC=A7=80=EB=8F=84=EB=A5=BC=20=ED=9A=8C=EC=A0=84=20?=
 =?UTF-8?q?=EB=B0=8F=20=EA=B8=B0=EC=9A=B8=EC=9D=B8=20=EB=92=A4=20=EC=A7=80?=
 =?UTF-8?q?=EB=8F=84=20=EC=9D=B4=EB=8F=99=EC=8B=9C=20=EC=9B=90=EB=9E=98?=
 =?UTF-8?q?=EB=8C=80=EB=A1=9C=20=EC=A1=B0=EC=A0=95=20(#623)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

모바일에서 줌인 줌아웃시 지도가 돌아가는 불편함이 있었으며 클러스터링 안정화를 위해 위와 같이 작업한다.
---
 frontend/src/pages/SeeTogether.tsx   | 9 +++++++++
 frontend/src/pages/SelectedTopic.tsx | 9 +++++++++
 frontend/src/types/tmap.d.ts         | 2 ++
 3 files changed, 20 insertions(+)

diff --git a/frontend/src/pages/SeeTogether.tsx b/frontend/src/pages/SeeTogether.tsx
index 9102ef4e..daa27336 100644
--- a/frontend/src/pages/SeeTogether.tsx
+++ b/frontend/src/pages/SeeTogether.tsx
@@ -135,6 +135,13 @@ function SeeTogether() {
     }
   };
 
+  const adjustMapDirection = () => {
+    if (!mapInstance) return;
+
+    mapInstance.setBearing(0);
+    mapInstance.setPitch(0);
+  };
+
   useEffect(() => {
     setClusteredCoordinates();
 
@@ -145,6 +152,7 @@ function SeeTogether() {
 
       dragTimerIdRef.current = setTimeout(() => {
         setPrevCoordinates();
+        adjustMapDirection();
       }, 100);
     };
     const onZoomEnd = (evt: evt) => {
@@ -154,6 +162,7 @@ function SeeTogether() {
 
       zoomTimerIdRef.current = setTimeout(() => {
         setClusteredCoordinates();
+        adjustMapDirection();
       }, 100);
     };
 
diff --git a/frontend/src/pages/SelectedTopic.tsx b/frontend/src/pages/SelectedTopic.tsx
index 8c92cd84..4f19a6ef 100644
--- a/frontend/src/pages/SelectedTopic.tsx
+++ b/frontend/src/pages/SelectedTopic.tsx
@@ -76,6 +76,13 @@ function SelectedTopic() {
     setCoordinates((prev) => [...prev]);
   };
 
+  const adjustMapDirection = () => {
+    if (!mapInstance) return;
+
+    mapInstance.setBearing(0);
+    mapInstance.setPitch(0);
+  };
+
   useEffect(() => {
     getAndSetDataFromServer();
     setTags([]);
@@ -91,6 +98,7 @@ function SelectedTopic() {
 
       dragTimerIdRef.current = setTimeout(() => {
         setPrevCoordinates();
+        adjustMapDirection();
       }, 100);
     };
     const onZoomEnd = (evt: evt) => {
@@ -100,6 +108,7 @@ function SelectedTopic() {
 
       zoomTimerIdRef.current = setTimeout(() => {
         setClusteredCoordinates();
+        adjustMapDirection();
       }, 100);
     };
 
diff --git a/frontend/src/types/tmap.d.ts b/frontend/src/types/tmap.d.ts
index fee0861d..a0b25c43 100644
--- a/frontend/src/types/tmap.d.ts
+++ b/frontend/src/types/tmap.d.ts
@@ -34,6 +34,8 @@ interface TMap {
   getBounds(): LatLngBounds;
   realToScreen(latLng: LatLng): Point;
   off(eventType: string, callback: (event: evt) => void): void;
+  setBearing(value: number): void;
+  setPitch(value: number): void;
 }
 
 interface Marker {