From c97e7c20177892b24ccd63e6cbca158f2a1611b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= <dy9623@naver.com>
Date: Thu, 5 Dec 2024 21:48:53 +0900
Subject: [PATCH] =?UTF-8?q?[FE][Feat]=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?=
 =?UTF-8?q?=EB=A7=88=EC=BB=A4=20=EB=B0=8F=20=ED=8C=A8=EC=8A=A4=20=EC=9C=84?=
 =?UTF-8?q?=EB=A1=9C=20=EC=98=AC=EB=A6=BC,=20=EB=B0=A9=ED=96=A5=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useRedraw.ts | 79 +++++++++++++++++----------------
 1 file changed, 40 insertions(+), 39 deletions(-)

diff --git a/frontend/src/hooks/useRedraw.ts b/frontend/src/hooks/useRedraw.ts
index 7369cb0..1a851e2 100644
--- a/frontend/src/hooks/useRedraw.ts
+++ b/frontend/src/hooks/useRedraw.ts
@@ -324,8 +324,45 @@ export const useRedrawCanvas = ({
         clusteredMarkerSet.add(`${marker.lat.toFixed(6)}_${marker.lng.toFixed(6)}`),
       );
     });
-
     const zoom = map.getZoom();
+
+    if (guests) {
+      guests.forEach(({ startPoint, endPoint, paths, markerStyle }) => {
+        const startLocationKey = `${startPoint.lat.toFixed(6)}_${startPoint.lng.toFixed(6)}`;
+        const endLocationKey = `${endPoint.lat.toFixed(6)}_${endPoint.lng.toFixed(6)}`;
+        if (!clusteredMarkerSet.has(startLocationKey)) {
+          const startLocation = latLngToCanvasPoint(startPoint);
+          drawMarker(
+            ctx,
+            startLocation,
+            startImageRef.current,
+            zoom,
+            0,
+            markerStyle.color,
+            MARKER_TYPE.START_MARKER,
+          );
+        }
+
+        if (!clusteredMarkerSet.has(endLocationKey)) {
+          const endLocation = latLngToCanvasPoint(endPoint);
+          drawMarker(
+            ctx,
+            endLocation,
+            endImageRef.current,
+            zoom,
+            0,
+            markerStyle.color,
+            MARKER_TYPE.END_MARKER,
+          );
+        }
+
+        // 경로는 두 포인트 중 하나라도 클러스터에 포함되지 않으면 그리기
+        if (!clusteredMarkerSet.has(startLocationKey) || !clusteredMarkerSet.has(endLocationKey)) {
+          drawPath(ctx, paths, markerStyle.color);
+        }
+      });
+    }
+
     if (startMarker) {
       const startPoint = latLngToCanvasPoint(startMarker);
       const markerKey = `${startMarker.lat.toFixed(6)}_${startMarker.lng.toFixed(6)}`;
@@ -366,7 +403,7 @@ export const useRedrawCanvas = ({
       const currentLocation = latLngToCanvasPoint({ lat, lng });
       if (alpha) {
         const normalizedAlpha = (alpha + 360) % 360;
-        const correctedAlpha = ((normalizedAlpha - 90 + 180) % 360) * (Math.PI / 180);
+        const correctedAlpha = ((90 - normalizedAlpha + 360) % 360) * (Math.PI / 180);
         drawMarker(
           ctx,
           currentLocation,
@@ -396,7 +433,7 @@ export const useRedrawCanvas = ({
           lng: location.lng ? location.lng : 0,
         });
         const normalizedAlpha = (location.alpha + 360) % 360;
-        const correctedAlpha = ((normalizedAlpha - 90 + 180) % 360) * (Math.PI / 180);
+        const correctedAlpha = ((90 - normalizedAlpha + 360) % 360) * (Math.PI / 180);
 
         drawNeonCircleAndDirection(ctx, locationPoint, zoom, color);
         drawMarker(
@@ -411,42 +448,6 @@ export const useRedrawCanvas = ({
       });
     }
 
-    if (guests) {
-      guests.forEach(({ startPoint, endPoint, paths, markerStyle }) => {
-        const startLocationKey = `${startPoint.lat.toFixed(6)}_${startPoint.lng.toFixed(6)}`;
-        const endLocationKey = `${endPoint.lat.toFixed(6)}_${endPoint.lng.toFixed(6)}`;
-        if (!clusteredMarkerSet.has(startLocationKey)) {
-          const startLocation = latLngToCanvasPoint(startPoint);
-          drawMarker(
-            ctx,
-            startLocation,
-            startImageRef.current,
-            zoom,
-            0,
-            markerStyle.color,
-            MARKER_TYPE.START_MARKER,
-          );
-        }
-
-        if (!clusteredMarkerSet.has(endLocationKey)) {
-          const endLocation = latLngToCanvasPoint(endPoint);
-          drawMarker(
-            ctx,
-            endLocation,
-            endImageRef.current,
-            zoom,
-            0,
-            markerStyle.color,
-            MARKER_TYPE.END_MARKER,
-          );
-        }
-
-        // 경로는 두 포인트 중 하나라도 클러스터에 포함되지 않으면 그리기
-        if (!clusteredMarkerSet.has(startLocationKey) || !clusteredMarkerSet.has(endLocationKey)) {
-          drawPath(ctx, paths, markerStyle.color);
-        }
-      });
-    }
     if (clusters) {
       clusters.forEach(cluster => {
         drawCluster(ctx, cluster, startImageRef.current, zoom, cluster.color.color);