refactor: 사용자가 지도를 회전 및 기울인 뒤 지도 이동시 원래대로 조정 (#623)

모바일에서 줌인 줌아웃시 지도가 돌아가는 불편함이 있었으며 클러스터링 안정화를 위해 위와 같이 작업한다.

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);
     };
 

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);
     };
 

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 {