From 2dc741f67350e6d61c8c525949c05bc3954a4e4c Mon Sep 17 00:00:00 2001
From: Hyein Jeong <jhi2359@naver.com>
Date: Fri, 29 Nov 2024 16:53:46 +0900
Subject: [PATCH] =?UTF-8?q?[FE][Feat]=20#338=20:=20=ED=98=B8=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8,=20=EA=B2=8C=EC=8A=A4=ED=8A=B8=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=BA=90=EB=A6=AD=ED=84=B0=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

- UX 고려하여 방향을 표시할 수 있도록 배민의 뚜벅이 같은 이미지 추가
- 게스트 위치 마커 제거
- channel dto 변경, useRedraw에 사용되는 함수 타입 변경
---
 frontend/src/hooks/useRedraw.ts  | 20 ++++++++++----------
 frontend/src/pages/GuestView.tsx | 20 ++++++++++----------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/frontend/src/hooks/useRedraw.ts b/frontend/src/hooks/useRedraw.ts
index 84728cb8..908bb6b5 100644
--- a/frontend/src/hooks/useRedraw.ts
+++ b/frontend/src/hooks/useRedraw.ts
@@ -3,8 +3,8 @@ import { LINE_WIDTH, STROKE_STYLE } from '@/lib/constants/canvasConstants.ts';
 
 import startmarker from '@/assets/startmarker.svg';
 import endmarker from '@/assets/endmarker.svg';
-import mylocation from '@/assets/mylocation.svg';
-import guestlocationmarker from '@/assets/guestlocationmarker.svg';
+import character1 from '@/assets/character1.png';
+import character2 from '@/assets/character2.png';
 
 interface ILatLng {
   lat: number;
@@ -51,8 +51,8 @@ export const useRedrawCanvas = ({
 }: IUseRedrawCanvasProps) => {
   const startImageRef = useRef<HTMLImageElement | null>(null);
   const endImageRef = useRef<HTMLImageElement | null>(null);
-  const mylocationRef = useRef<HTMLImageElement | null>(null);
-  const guestlocationmarkerRef = useRef<HTMLImageElement | null>(null);
+  const character1Ref = useRef<HTMLImageElement | null>(null);
+  const character2Ref = useRef<HTMLImageElement | null>(null);
 
   useEffect(() => {
     startImageRef.current = new Image();
@@ -61,11 +61,11 @@ export const useRedrawCanvas = ({
     endImageRef.current = new Image();
     endImageRef.current.src = endmarker;
 
-    mylocationRef.current = new Image();
-    mylocationRef.current.src = mylocation;
+    character1Ref.current = new Image();
+    character1Ref.current.src = character1;
 
-    guestlocationmarkerRef.current = new Image();
-    guestlocationmarkerRef.current.src = guestlocationmarker;
+    character2Ref.current = new Image();
+    character2Ref.current.src = character2;
   }, []);
 
   const drawMarker = (
@@ -139,14 +139,14 @@ export const useRedrawCanvas = ({
 
     if (lat && lng) {
       const currentLocation = latLngToCanvasPoint({ lat, lng });
-      drawMarker(ctx, currentLocation, mylocationRef.current);
+      drawMarker(ctx, currentLocation, character1Ref.current);
     }
 
     if (otherLocations) {
       otherLocations.forEach(({ location }) => {
         // const markerColor = getMarkerColor(token);
         const locationPoint = latLngToCanvasPoint(location);
-        drawMarker(ctx, locationPoint, guestlocationmarkerRef.current);
+        drawMarker(ctx, locationPoint, character2Ref.current);
       });
     }
 
diff --git a/frontend/src/pages/GuestView.tsx b/frontend/src/pages/GuestView.tsx
index 7a48dbab..1d47b191 100644
--- a/frontend/src/pages/GuestView.tsx
+++ b/frontend/src/pages/GuestView.tsx
@@ -22,22 +22,22 @@ export const GuestView = () => {
 
   const location = useLocation();
 
-  const transformTypeGuestEntityToIGuest = (props: guestEntity): IGuest => {
+  const transformTypeGuestEntityToIGuest = (props: guestEntity | undefined): IGuest => {
     return {
-      id: props.id ?? '',
-      name: props.name ?? '',
+      id: props?.id ?? '',
+      name: props?.name ?? '',
       // name: '현재 내 위치',
       startPoint: {
-        lat: props.start_location?.lat ?? 0,
-        lng: props.start_location?.lng ?? 0,
+        lat: props?.start_location?.lat ?? 0,
+        lng: props?.start_location?.lng ?? 0,
       },
       endPoint: {
-        lat: props.end_location?.lat ?? 0,
-        lng: props.end_location?.lng ?? 0,
+        lat: props?.end_location?.lat ?? 0,
+        lng: props?.end_location?.lng ?? 0,
       },
-      paths: (props.path as IPoint[]) ?? [],
+      paths: (props?.path as IPoint[]) ?? [],
       markerStyle: {
-        color: props.marker_style?.color ?? '',
+        color: props?.marker_style?.color ?? '',
       },
     };
   };
@@ -46,7 +46,7 @@ export const GuestView = () => {
     getGuestInfo(channelId, userId)
       .then(res => {
         if (!res.data) throw new Error('🚀 Fetch Error: responsed undefined');
-        const transfromedData = transformTypeGuestEntityToIGuest(res.data);
+        const transfromedData = transformTypeGuestEntityToIGuest(res.data.guest);
         setGuestInfo(transfromedData);
       })
       .catch((err: any) => {