[FE][Feat] QA : HostView에서 모든 경로 다 보이도록 설정

boostcampwm-2024 · Dec 3, 2024 · 9e42536 · 9e42536
1 parent 7e64d5f
commit 9e42536
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 119 deletions.
diff --git a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx
@@ -1,139 +1,134 @@
-import { useEffect, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { ICanvasPoint, IMapCanvasViewProps, IPoint } from '@/lib/types/canvasInterface.ts';
 import { useCanvasInteraction } from '@/hooks/useCanvasInteraction';
 import { useRedrawCanvas } from '@/hooks/useRedraw';
 import { ZoomSlider } from '@/component/zoomslider/ZoomSlider';
 
-export const MapCanvasForView = ({
-  lat,
-  lng,
-  alpha,
-  otherLocations,
-  guests,
-  width,
-  height,
-}: IMapCanvasViewProps) => {
-  const mapRef = useRef<HTMLDivElement>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [projection, setProjection] = useState<naver.maps.MapSystemProjection | null>(null);
+export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasViewProps>(
+  ({ lat, lng, alpha, otherLocations, guests, width, height }: IMapCanvasViewProps, ref) => {
+    const mapRef = useRef<HTMLDivElement>(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const [projection, setProjection] = useState<naver.maps.MapSystemProjection | null>(null);
+    const [map, setMap] = useState<naver.maps.Map | null>(null);
 
-  const [map, setMap] = useState<naver.maps.Map | null>(null);
+    useImperativeHandle(ref, () => map as naver.maps.Map);
 
-  useEffect(() => {
-    if (!mapRef.current) return;
+    useEffect(() => {
+      if (!mapRef.current) return;
 
-    const mapInstance = new naver.maps.Map(mapRef.current, {
-      center: new naver.maps.LatLng(lat, lng),
-      zoom: 10,
-      minZoom: 7,
-      maxBounds: new naver.maps.LatLngBounds(
-        new naver.maps.LatLng(33.0, 124.5),
-        new naver.maps.LatLng(38.9, 131.9),
-      ),
-      mapDataControl: false,
-    });
+      const mapInstance = new naver.maps.Map(mapRef.current, {
+        center: new naver.maps.LatLng(lat, lng),
+        zoom: 10,
+        minZoom: 7,
+        maxBounds: new naver.maps.LatLngBounds(
+          new naver.maps.LatLng(33.0, 124.5),
+          new naver.maps.LatLng(38.9, 131.9),
+        ),
+        mapDataControl: false,
+      });
 
-    setMap(mapInstance);
-    setProjection(mapInstance.getProjection());
+      setMap(mapInstance);
+      setProjection(mapInstance.getProjection());
 
-    return () => {
-      mapInstance.destroy();
-    };
-  }, []);
+      return () => {
+        mapInstance.destroy();
+      };
+    }, [lat, lng]);
 
-  const latLngToCanvasPoint = (latLng: IPoint): ICanvasPoint | null => {
-    if (!map || !projection || !canvasRef.current) return null;
-    const coord = projection.fromCoordToOffset(new naver.maps.LatLng(latLng.lat, latLng.lng));
-    const mapSize = map.getSize();
-    const mapCenter = map.getCenter();
-    const centerPoint = projection.fromCoordToOffset(mapCenter);
-    return {
-      x: coord.x - (centerPoint.x - mapSize.width / 2),
-      y: coord.y - (centerPoint.y - mapSize.height / 2),
+    const latLngToCanvasPoint = (latLng: IPoint): ICanvasPoint | null => {
+      if (!map || !projection || !canvasRef.current) return null;
+      const coord = projection.fromCoordToOffset(new naver.maps.LatLng(latLng.lat, latLng.lng));
+      const mapSize = map.getSize();
+      const mapCenter = map.getCenter();
+      const centerPoint = projection.fromCoordToOffset(mapCenter);
+      return {
+        x: coord.x - (centerPoint.x - mapSize.width / 2),
+        y: coord.y - (centerPoint.y - mapSize.height / 2),
+      };
     };
-  };
 
-  const updateCanvasSize = () => {
-    if (!map || !canvasRef.current) return;
-    const mapSize = map.getSize();
-    const canvas = canvasRef.current;
-    canvas.width = mapSize.width;
-    canvas.height = mapSize.height;
-    canvas.style.width = `${mapSize.width}px`;
-    canvas.style.height = `${mapSize.height}px`;
-  };
+    const updateCanvasSize = () => {
+      if (!map || !canvasRef.current) return;
+      const mapSize = map.getSize();
+      const canvas = canvasRef.current;
+      canvas.width = mapSize.width;
+      canvas.height = mapSize.height;
+      canvas.style.width = `${mapSize.width}px`;
+      canvas.style.height = `${mapSize.height}px`;
+    };
 
-  const { redrawCanvas } = useRedrawCanvas({
-    canvasRef,
-    map,
-    latLngToCanvasPoint,
-    otherLocations,
-    guests,
-    lat,
-    lng,
-    alpha,
-  });
+    const { redrawCanvas } = useRedrawCanvas({
+      canvasRef,
+      map,
+      latLngToCanvasPoint,
+      otherLocations,
+      guests,
+      lat,
+      lng,
+      alpha,
+    });
 
-  const {
-    handleMouseDown,
-    handleMouseMove,
-    handleMouseUp,
-    handleWheel,
-    handleTouchStart,
-    handleTouchMove,
-    handleTouchEnd,
-    isDragging,
-  } = useCanvasInteraction(map, canvasRef, redrawCanvas);
+    const {
+      handleMouseDown,
+      handleMouseMove,
+      handleMouseUp,
+      handleWheel,
+      handleTouchStart,
+      handleTouchMove,
+      handleTouchEnd,
+      isDragging,
+    } = useCanvasInteraction(map, canvasRef, redrawCanvas);
 
-  useEffect(() => {
-    if (isDragging) {
-      if (canvasRef.current) {
-        canvasRef.current.style.pointerEvents = 'none';
+    useEffect(() => {
+      if (isDragging) {
+        if (canvasRef.current) {
+          canvasRef.current.style.pointerEvents = 'none';
+        }
+        redrawCanvas();
+      } else if (canvasRef.current) {
+        canvasRef.current.style.pointerEvents = 'auto';
       }
-      redrawCanvas();
-    } else if (canvasRef.current) {
-      canvasRef.current.style.pointerEvents = 'auto';
-    }
-  }, [isDragging]);
+    }, [isDragging]);
 
-  useEffect(() => {
-    if (!canvasRef.current || !map) return;
-    updateCanvasSize();
-  }, [map]);
+    useEffect(() => {
+      if (!canvasRef.current || !map) return;
+      updateCanvasSize();
+    }, [map]);
 
-  useEffect(() => {
-    redrawCanvas();
-  }, [guests, otherLocations, lat, lng, alpha, map]);
+    useEffect(() => {
+      redrawCanvas();
+    }, [guests, otherLocations, lat, lng, alpha, mapRef, handleWheel]);
 
-  return (
-    <div
-      style={{ position: 'relative', width, height }}
-      onWheel={handleWheel}
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onTouchEnd={handleTouchEnd}
-    >
-      <div ref={mapRef} id="map" style={{ width, height }} />
-      <canvas
-        ref={canvasRef}
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          pointerEvents: 'auto',
-        }}
-      />
+    return (
       <div
-        className="absolute right-2 top-1/2 z-10 flex gap-2"
-        style={{
-          transform: 'translateY(-50%)',
-        }}
+        style={{ position: 'relative', width, height }}
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
       >
-        <ZoomSlider map={map} redrawCanvas={redrawCanvas} />
+        <div ref={mapRef} id="map" style={{ width, height }} />
+        <canvas
+          ref={canvasRef}
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            pointerEvents: 'auto',
+          }}
+        />
+        <div
+          className="absolute right-2 top-1/2 z-10 flex gap-2"
+          style={{
+            transform: 'translateY(-50%)',
+          }}
+        >
+          <ZoomSlider map={map} redrawCanvas={redrawCanvas} />
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
diff --git a/frontend/src/pages/HostView.tsx b/frontend/src/pages/HostView.tsx
@@ -1,5 +1,5 @@
 import { HeaderDropdownContext } from '@/component/header/HeaderDropdownProvider.tsx';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import { IGuest, IChannelInfo, IGuestData } from '@/types/channel.types.ts';
 import { getChannelInfo } from '@/api/channel.api.ts';
 import { useLocation } from 'react-router-dom';
@@ -13,6 +13,7 @@ import { loadLocalData, saveLocalData } from '@/utils/common/manageLocalData.ts'
 import { AppConfig } from '@/lib/constants/commonConstants.ts';
 import { v4 as uuidv4 } from 'uuid';
 import { useSocket } from '@/hooks/useSocket.ts';
+import { zoomMapView } from '@/utils/map/mapUtils';
 
 interface IOtherLocationsInHostView {
   guestId: string;
@@ -22,6 +23,7 @@ interface IOtherLocationsInHostView {
 }
 
 export const HostView = () => {
+  const mapRef = useRef<naver.maps.Map>(null);
   const { lat, lng, alpha, error } = getUserLocation();
   const location = useLocation();
 
@@ -159,6 +161,8 @@ export const HostView = () => {
   useEffect(() => {
     headerDropdownContext.setItems(guestsData);
     headerDropdownContext.setOnClickHandler(handleClickDropdown);
+    const allLocations = mapProps.flatMap(guest => [guest.startPoint, guest.endPoint]);
+    zoomMapView(mapRef.current, allLocations);
   }, [guestsData]);
 
   return (
@@ -177,6 +181,7 @@ export const HostView = () => {
               height="100%"
               guests={mapProps}
               otherLocations={otherLocations}
+              ref={mapRef}
             />
           ) : (
             <LoadingSpinner />

diff --git a/frontend/src/utils/map/mapUtils.ts b/frontend/src/utils/map/mapUtils.ts
@@ -13,8 +13,8 @@ const calculateZoomLevel = (latDiff: number, lngDiff: number) => {
   if (maxDiff < 0.5) return 10;
   if (maxDiff < 1) return 9;
   if (maxDiff < 2) return 8;
-  if (maxDiff < 5) return 7;
-  if (maxDiff < 10) return 6;
+  if (maxDiff < 5) return 8;
+  if (maxDiff < 10) return 7;
   return 5;
 };