Merge pull request #389 from boostcampwm-2024/frontend

6주차 3차 배포
boostcampwm-2024 · Dec 3, 2024 · 3b40b4f · 3b40b4f
2 parents fd29f60 + ba0ef8c
commit 3b40b4f
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 16 deletions.
diff --git a/frontend/src/hooks/useRedraw.ts b/frontend/src/hooks/useRedraw.ts
@@ -54,6 +54,12 @@ interface IUseRedrawCanvasProps {
   alpha?: number | null;
 }
 
+enum MARKER_TYPE {
+  START_MARKER = 'START_MARKER',
+  END_MARKER = 'END_MARKER',
+  CHARACTER = 'CHARACTER',
+}
+
 export const useRedrawCanvas = ({
   canvasRef,
   map,
@@ -119,32 +125,26 @@ export const useRedrawCanvas = ({
     return tempCanvas;
   };
 
-  const checkMarker = (path: string) => {
-    if (path.includes('startmarker') || path.includes('endmarker') || path.includes('mylocation')) {
-      return true;
-    }
-    return false;
-  };
-
   const drawMarker = (
     ctx: CanvasRenderingContext2D,
     point: { x: number; y: number } | null,
     image: HTMLImageElement | null,
     zoom: number,
     rotate: number,
     color: string,
+    markerType: MARKER_TYPE,
   ) => {
     if (point && image) {
       const markerSize = zoom < 18 ? Math.min(zoom * 5, 50) : (zoom - 15) * (zoom - 16) * 10;
-      ctx.fillStyle = color || '#000';
-      ctx.strokeStyle = color || '#000';
       ctx.save();
       ctx.translate(point.x, point.y);
       ctx.rotate(rotate);
       let filteredImage;
-      if (checkMarker(image.src))
+      if (markerType === MARKER_TYPE.CHARACTER) {
+        filteredImage = image;
+      } else {
         filteredImage = colorizeImage(image, color, markerSize, markerSize);
-      else filteredImage = image;
+      }
       ctx.drawImage(filteredImage, -markerSize / 2, -markerSize / 2, markerSize, markerSize);
       ctx.restore();
     }
@@ -296,12 +296,28 @@ export const useRedrawCanvas = ({
     const zoom = map.getZoom();
     if (startMarker) {
       const startPoint = latLngToCanvasPoint(startMarker);
-      drawMarker(ctx, startPoint, startImageRef.current, zoom, 0, START_MARKER_COLOR);
+      drawMarker(
+        ctx,
+        startPoint,
+        startImageRef.current,
+        zoom,
+        0,
+        START_MARKER_COLOR,
+        MARKER_TYPE.START_MARKER,
+      );
     }
 
     if (endMarker) {
       const endPoint = latLngToCanvasPoint(endMarker);
-      drawMarker(ctx, endPoint, endImageRef.current, zoom, 0, END_MARKER_COLOR);
+      drawMarker(
+        ctx,
+        endPoint,
+        endImageRef.current,
+        zoom,
+        0,
+        END_MARKER_COLOR,
+        MARKER_TYPE.END_MARKER,
+      );
     }
 
     if (pathPoints) {
@@ -318,6 +334,7 @@ export const useRedrawCanvas = ({
           zoom,
           (alpha * Math.PI) / 180,
           guests![0]?.markerStyle.color,
+          MARKER_TYPE.CHARACTER,
         );
       } else {
         drawMarker(
@@ -327,6 +344,7 @@ export const useRedrawCanvas = ({
           zoom,
           0,
           guests![0]?.markerStyle.color,
+          MARKER_TYPE.CHARACTER,
         );
       }
     }
@@ -346,17 +364,34 @@ export const useRedrawCanvas = ({
           zoom,
           (location.alpha * Math.PI) / 180,
           color,
+          MARKER_TYPE.CHARACTER,
         );
       });
     }
 
     if (guests) {
       guests.forEach(({ startPoint, endPoint, paths, markerStyle }) => {
         const startLocation = latLngToCanvasPoint(startPoint);
-        drawMarker(ctx, startLocation, startImageRef.current, zoom, 0, markerStyle.color);
+        drawMarker(
+          ctx,
+          startLocation,
+          startImageRef.current,
+          zoom,
+          0,
+          markerStyle.color,
+          MARKER_TYPE.START_MARKER,
+        );
 
         const endLocation = latLngToCanvasPoint(endPoint);
-        drawMarker(ctx, endLocation, endImageRef.current, zoom, 0, markerStyle.color);
+        drawMarker(
+          ctx,
+          endLocation,
+          endImageRef.current,
+          zoom,
+          0,
+          markerStyle.color,
+          MARKER_TYPE.END_MARKER,
+        );
 
         drawPath(ctx, paths, markerStyle.color);
       });

diff --git a/frontend/src/pages/HostView.tsx b/frontend/src/pages/HostView.tsx
@@ -32,7 +32,11 @@ export const HostView = () => {
   const [guestsData, setGuestsData] = useState<IGuestData[]>([]);
   const [mapProps, setMapProps] = useState<IGuestDataInMapProps[]>([]);
   const [clickedId, setClickedId] = useState<string>('');
+
   const [otherLocations, setOtherLocations] = useState<IOtherLocationsInHostView[]>([]);
+  const [filteredOtherLocations, setFilteredOtherLocations] = useState<IOtherLocationsInHostView[]>(
+    [],
+  );
   const [showErrorAlert, setShowErrorAlert] = useState<boolean>(false); // 오류 알림 상태 추가
 
   const headerDropdownContext = useContext(HeaderDropdownContext);
@@ -194,6 +198,14 @@ export const HostView = () => {
     }
   }, [showErrorAlert, navigate]);
 
+  useEffect(() => {
+    if (clickedId === '') {
+      setFilteredOtherLocations(otherLocations);
+    } else {
+      setFilteredOtherLocations(otherLocations.filter(el => el.guestId === clickedId));
+    }
+  }, [clickedId]);
+
   return (
     <article className="absolute h-full w-screen flex-grow overflow-hidden">
       {showErrorAlert && (
@@ -217,7 +229,7 @@ export const HostView = () => {
               width="100%"
               height="100%"
               guests={mapProps}
-              otherLocations={otherLocations}
+              otherLocations={filteredOtherLocations}
               ref={mapRef}
             />
           ) : (