From 11eafa3ceaa8ca55fd39b7242f1154bcfdffd9fd Mon Sep 17 00:00:00 2001 From: GC-Park Date: Thu, 19 Oct 2023 22:55:17 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=ED=95=80=20=EB=94=94=ED=85=8C?= =?UTF-8?q?=EC=9D=BC=20=EB=95=8C=20=EB=A7=B5=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=8B=9C=20=EC=9B=80=EC=A7=81=EC=9D=B4=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EB=8D=98=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package-lock.json | 8 ++--- frontend/package.json | 2 +- frontend/src/components/Map/index.tsx | 6 ++-- frontend/src/hooks/useAnimateClickedPin.ts | 41 +++++++++++++++++----- 4 files changed, 40 insertions(+), 17 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 88662ca3a..e3a437bbb 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,7 +10,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", @@ -18308,9 +18308,9 @@ } }, "node_modules/map-befine-swiper": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/map-befine-swiper/-/map-befine-swiper-0.8.2.tgz", - "integrity": "sha512-8Adxs0eHS5bqcAgXsX7+bDWALHH7WMx/agxVEUasGh/ABgJbCF1WzNmBQMwkFJ89JoYIn3E5weDA1LAGF832IA==", + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/map-befine-swiper/-/map-befine-swiper-0.8.3.tgz", + "integrity": "sha512-yWUTckvw6hX/Qu+KwLV26UFKVfZyjje8EbMh6aN16DS4KNttO2vTQXUSTWbI8YarOpGyax1rwK0ImNTIaITdgw==", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/frontend/package.json b/frontend/package.json index 9e6614568..1c883032a 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx index 7dc355ff5..e0471966a 100644 --- a/frontend/src/components/Map/index.tsx +++ b/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 ( @@ -116,4 +116,4 @@ const CurrentLocationIcon = styled(CurrentLocation)` } `; -export default Map; +export default Map; \ No newline at end of file diff --git a/frontend/src/hooks/useAnimateClickedPin.ts b/frontend/src/hooks/useAnimateClickedPin.ts index 1d0d0908f..e13ef1edd 100644 --- a/frontend/src/hooks/useAnimateClickedPin.ts +++ b/frontend/src/hooks/useAnimateClickedPin.ts @@ -1,19 +1,42 @@ -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(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 (marker && map) { + if (checkQueryParams === null) { + if(!map) return; + const pinId = queryParams.get('pinDetail'); + const marker = markers.find((marker: Marker) => marker.id === pinId); + + if(!marker) return; 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; From f9592bed4aea91d3d630d22b64f43be6a739a3a8 Mon Sep 17 00:00:00 2001 From: afds4567 <33995840+afds4567@users.noreply.github.com> Date: Fri, 20 Oct 2023 01:03:02 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EB=88=84=EB=9D=BD=EB=90=9C=20TMAP?= =?UTF-8?q?=5FAPI=5FKEY=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/fe-merge-prod.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/fe-merge-prod.yml b/.github/workflows/fe-merge-prod.yml index 9a824c971..d550779ec 100644 --- a/.github/workflows/fe-merge-prod.yml +++ b/.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 From d6dc4592fa4f4140ec6a3c522fba2495c9bd7b39 Mon Sep 17 00:00:00 2001 From: afds4567 <33995840+afds4567@users.noreply.github.com> Date: Fri, 20 Oct 2023 01:03:15 +0900 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=EB=AA=A8=EC=95=84=EB=B3=B4=EA=B8=B0?= =?UTF-8?q?=20=ED=81=B4=EB=A6=AD=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useAnimateClickedPin.ts | 7 ++++--- frontend/src/hooks/useFocusToMarkers.ts | 13 +++++++++++-- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/frontend/src/hooks/useAnimateClickedPin.ts b/frontend/src/hooks/useAnimateClickedPin.ts index e13ef1edd..1002af841 100644 --- a/frontend/src/hooks/useAnimateClickedPin.ts +++ b/frontend/src/hooks/useAnimateClickedPin.ts @@ -9,13 +9,14 @@ const useAnimateClickedPin = () => { const currentQueryParams = new URLSearchParams(location.search); if (checkQueryParams === null) { - if(!map) return; + if (!map) return; const pinId = queryParams.get('pinDetail'); const marker = markers.find((marker: Marker) => marker.id === pinId); - if(!marker) return; + if (!marker) return; + map.setCenter(marker.getPosition()); - map.setZoom(17); + setCheckQueryParams(currentQueryParams); return; } diff --git a/frontend/src/hooks/useFocusToMarkers.ts b/frontend/src/hooks/useFocusToMarkers.ts index a0aa77042..9519b5b87 100644 --- a/frontend/src/hooks/useFocusToMarkers.ts +++ b/frontend/src/hooks/useFocusToMarkers.ts @@ -1,15 +1,24 @@ 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 && + markers && + markers.length > 1 && + params.pathname.includes('see-together') && + !pinDetail + ) { bounds.current = new Tmapv3.LatLngBounds(); markers.forEach((marker: Marker) => { bounds.current.extend(marker.getPosition()); From 012653b3a9868d9c235daa797d6450259a561d0a Mon Sep 17 00:00:00 2001 From: afds4567 <33995840+afds4567@users.noreply.github.com> Date: Fri, 20 Oct 2023 01:11:09 +0900 Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20pinDetail=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=A4=8C=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useFocusToMarkers.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/hooks/useFocusToMarkers.ts b/frontend/src/hooks/useFocusToMarkers.ts index 9519b5b87..b19c5d455 100644 --- a/frontend/src/hooks/useFocusToMarkers.ts +++ b/frontend/src/hooks/useFocusToMarkers.ts @@ -11,7 +11,13 @@ const useFocusToMarker = (map: TMap | null, markers: Marker[]) => { 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 && From 50a5eaca6331976c6bc8bf634218b6e65bd87150 Mon Sep 17 00:00:00 2001 From: afds4567 <33995840+afds4567@users.noreply.github.com> Date: Fri, 20 Oct 2023 01:18:08 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20banner=20url=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Banner/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Banner/index.tsx b/frontend/src/components/Banner/index.tsx index 1793b0f06..f85549f10 100644 --- a/frontend/src/components/Banner/index.tsx +++ b/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();