[FE] Hotfix/map panto 오류 수정 (#611)

* fix: 지도 조회 시 핀 바운더리 경계면에 맞게 줌인 되지 않던 오류 수정 * design: 풀핀 여백이 보이는 오류 수정
woowacourse-teams · Oct 20, 2023 · da2c754 · da2c754
1 parent a8f64a4
commit da2c754
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 25 deletions.
diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
@@ -2,6 +2,7 @@ import { useContext, useEffect } from 'react';
 import { css, styled } from 'styled-components';
 
 import CoordinatesProvider from '../../context/CoordinatesContext';
+import ImageModalContext from '../../context/ImageModalContext';
 import { LayoutWidthContext } from '../../context/LayoutWidthContext';
 import MarkerProvider from '../../context/MarkerContext';
 import ModalProvider from '../../context/ModalContext';
@@ -16,7 +17,6 @@ import Map from '../Map';
 import Toast from '../Toast';
 import Logo from './Logo';
 import Navbar from './Navbar';
-import ImageModalContext from '../../context/ImageModalContext';
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -70,7 +70,6 @@ function Layout({ children }: LayoutProps) {
                         $flexDirection="column"
                         height="inherit"
                         overflow="auto"
-                        padding="0"
                       >
                         {children}
                       </Flex>

diff --git a/frontend/src/components/PullPin/index.tsx b/frontend/src/components/PullPin/index.tsx
@@ -101,11 +101,11 @@ const Wrapper = styled.section`
   border-bottom: 4px solid ${({ theme }) => theme.color.black};
 
   @media (max-width: 1076px) {
-    width: calc(50vw - 40px);
+    width: 50vw;
   }
 
   @media (max-width: 744px) {
-    width: calc(100vw - 40px);
+    width: 100vw;
   }
 
   @media (max-width: 372px) {

diff --git a/frontend/src/hooks/useFocusToMarkers.ts b/frontend/src/hooks/useFocusToMarkers.ts
@@ -1,38 +1,31 @@
-import { useEffect, useRef } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useEffect, useRef, useState } from 'react';
 
 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');
+  const [markersLength, setMarkersLength] = useState<Number>(0);
+
   useEffect(() => {
     if (map && markers && markers.length === 1) {
       map.panTo(markers[0].getPosition());
     }
-    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
-    ) {
+    if (map && markers && markers.length > 1) {
       bounds.current = new Tmapv3.LatLngBounds();
       markers.forEach((marker: Marker) => {
         bounds.current.extend(marker.getPosition());
       });
 
-      map.fitBounds(bounds.current);
+      if (markersLength === 0) {
+        setMarkersLength(markers.length);
+        map.fitBounds(bounds.current);
+        return;
+      }
+
+      if (markersLength !== markers.length) map.fitBounds(bounds.current);
     }
+    return () => {
+      setMarkersLength(0);
+    };
   }, [markers]);
 };
-
 export default useFocusToMarker;