Merge pull request #610 from woowacourse-teams/hotfix/pinDetail-not-move

Hotfix/pin detail not move

.github/workflows/fe-merge-prod.yml

@@ -35,6 +35,7 @@ jobs:
         working-directory: frontend
         env:
           REACT_APP_GOOGLE_ANALYTICS: ${{ secrets.REACT_APP_GOOGLE_ANALYTICS }}
+          REACT_APP_TMAP_API_KEY: ${{ secrets.REACT_APP_TMAP_API_KEY }}
           APP_URL: "https://mapbefine.com/api"
 
       - name: upload to artifact

frontend/package.json

@@ -17,7 +17,7 @@
   "license": "ISC",
   "dependencies": {
     "history": "^5.3.0",
-    "map-befine-swiper": "^0.8.2",
+    "map-befine-swiper": "^0.8.3",
     "msw-storybook-addon": "^1.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

frontend/src/components/Banner/index.tsx

@@ -7,7 +7,7 @@ import useNavigator from '../../hooks/useNavigator';
 import Box from '../common/Box';
 
 const USAGE_URL =
-  'https://yoondgu.notion.site/3e5b3c98c4814aa1bd5887104fee314e?pvs=4';
+  'https://sites.google.com/woowahan.com/woowacourse-demo-5th/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/%EA%B4%9C%EC%B0%AE%EC%9D%84%EC%A7%80%EB%8F%84';
 
 export default function Banner() {
   const { routePage } = useNavigator();

frontend/src/components/Map/index.tsx

@@ -27,7 +27,7 @@ function Map() {
   const { markers } = useContext(MarkerContext);
   const { width } = useContext(LayoutWidthContext);
   const { mapInstance, setMapInstance } = useMapStore((state) => state);
-
+  const { onFocusClickedPin } = useAnimateClickedPin();
   const mapContainer = useRef(null);
   const { location, requestUserLocation } = useGeoLocation(mapInstance);
   const { showToast } = useToast();
@@ -66,7 +66,7 @@ function Map() {
   useUpdateCoordinates(mapInstance);
 
   useFocusToMarker(mapInstance, markers);
-  useAnimateClickedPin(mapInstance, markers);
+  onFocusClickedPin(mapInstance, markers);
 
   return (
     <MapContainer>
@@ -116,4 +116,4 @@ const CurrentLocationIcon = styled(CurrentLocation)`
   }
 `;
 
-export default Map;
+export default Map;

frontend/src/hooks/useAnimateClickedPin.ts

@@ -1,19 +1,43 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-const useAnimateClickedPin = (map: TMap | null, markers: Marker[]) => {
+const useAnimateClickedPin = () => {
   const queryParams = new URLSearchParams(location.search);
+  const [checkQueryParams, setCheckQueryParams] = useState<any>(queryParams);
 
-  useEffect(() => {
-    if (queryParams.has('pinDetail')) {
-      const pinId = queryParams.get('pinDetail');
-      const marker = markers.find((marker: Marker) => marker.id === pinId);
+  const onFocusClickedPin = (map: TMap | null, markers: Marker[]) => {
+    useEffect(() => {
+      const currentQueryParams = new URLSearchParams(location.search);
+
+      if (checkQueryParams === null) {
+        if (!map) return;
+        const pinId = queryParams.get('pinDetail');
+        const marker = markers.find((marker: Marker) => marker.id === pinId);
+
+        if (!marker) return;
 
-      if (marker && map) {
         map.setCenter(marker.getPosition());
-        map.setZoom(17);
+
+        setCheckQueryParams(currentQueryParams);
+        return;
       }
-    }
-  }, [markers, map, queryParams]);
+
+      if (
+        checkQueryParams.get('pinDetail') !==
+        currentQueryParams.get('pinDetail')
+      ) {
+        const pinId = queryParams.get('pinDetail');
+        const marker = markers.find((marker: Marker) => marker.id === pinId);
+
+        if (marker && map) {
+          map.setCenter(marker.getPosition());
+          map.setZoom(17);
+        }
+        setCheckQueryParams(currentQueryParams);
+      }
+    }, [markers, map, queryParams]);
+  };
+
+  return { checkQueryParams, onFocusClickedPin };
 };
 
 export default useAnimateClickedPin;

frontend/src/hooks/useFocusToMarkers.ts

@@ -1,15 +1,30 @@
 import { useEffect, useRef } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
 
 const useFocusToMarker = (map: TMap | null, markers: Marker[]) => {
   const { Tmapv3 } = window;
   const bounds = useRef(new Tmapv3.LatLngBounds());
-
+  const params = useLocation();
+  const queryParams = new URLSearchParams(window.location.search);
+  const pinDetail = queryParams.get('pinDetail');
   useEffect(() => {
     if (map && markers && markers.length === 1) {
       map.panTo(markers[0].getPosition());
     }
-
-    if (map && markers && markers.length > 1) {
+    if (map && pinDetail) {
+      const marker = markers.find((marker: Marker) => marker.id === pinDetail);
+      if (marker) {
+        map.setCenter(marker.getPosition());
+        map.setZoom(17);
+      }
+    }
+    if (
+      map &&
+      markers &&
+      markers.length > 1 &&
+      params.pathname.includes('see-together') &&
+      !pinDetail
+    ) {
       bounds.current = new Tmapv3.LatLngBounds();
       markers.forEach((marker: Marker) => {
         bounds.current.extend(marker.getPosition());