Merge pull request #151 from prgrms-web-devcourse/feat/courts/query-s…

…tring-restore ✨feat: 쿼리스트링 여부에 따른 지도 center restore
prgrms-web-devcourse · Dec 19, 2021 · 4ef7ea7 · 4ef7ea7
2 parents ac6fc0a + 2adfa18
commit 4ef7ea7
Showing 1 changed file with 38 additions and 17 deletions.
diff --git a/src/pages/courts/index.tsx b/src/pages/courts/index.tsx
@@ -151,7 +151,7 @@ const Courts: NextPage = () => {
     (geocoder as Geocoder).coord2Address(longitude, latitude, callback);
   };
 
-  const handleChangedMapBounds = useCallback(
+  const fetchCourtsByBoundsAndDatetime = useCallback(
     async (map: kakao.maps.Map) => {
       const bounds = map.getBounds();
       const swLatlng = bounds.getSouthWest();
@@ -212,11 +212,17 @@ const Courts: NextPage = () => {
     [currentDate, selectedSlot]
   );
 
-  const handleMarkerClick = useCallback((court: any) => {
-    setIsOpen(true);
-    searchAddrFromCoords(court.latitude, court.longitude);
-    setSelectedCourt(court);
-  }, []);
+  const handleMarkerClick = useCallback(
+    (court: any) => {
+      setIsOpen(true);
+      searchAddrFromCoords(court.latitude, court.longitude);
+      setSelectedCourt(court);
+      router.push(`/courts?courtId=${court.courtId}`, undefined, {
+        shallow: true,
+      });
+    },
+    [router]
+  );
 
   const handleChangeSnap = useCallback((snap: number) => {
     setSnap(snap);
@@ -229,21 +235,37 @@ const Courts: NextPage = () => {
   }, []);
 
   useEffect(() => {
-    const fetchCourts = async () => {
-      if (map) {
-        await handleChangedMapBounds(map);
+    const restoreCourts = async (courtId: number) => {
+      try {
+        const court: any = await courtApi.getCourtDetail(courtId);
+
+        const { latitude, longitude } = court;
+
+        if (court) {
+          setCenter([latitude, longitude]);
+          setIsOpen(true);
+          searchAddrFromCoords(latitude, longitude);
+          setSelectedCourt(court);
+        }
+      } catch (error) {
+        console.error(error);
       }
     };
 
-    handleGetCurrentLocation();
-    fetchCourts();
-  }, [handleGetCurrentLocation, map]);
+    const { courtId } = router.query;
+
+    if (courtId) {
+      restoreCourts(+courtId);
+    } else {
+      handleGetCurrentLocation();
+    }
+  }, [map]);
 
   useEffect(() => {
-    if (map) {
-      handleChangedMapBounds(map);
+    if (map && map?.getLevel() <= 4) {
+      fetchCourtsByBoundsAndDatetime(map);
     }
-  }, [map, handleChangedMapBounds]);
+  }, [map, fetchCourtsByBoundsAndDatetime, level, center]);
 
   return (
     <>
@@ -261,7 +283,7 @@ const Courts: NextPage = () => {
         <Map.KakaoMap
           level={level}
           center={center}
-          onDragEnd={handleChangedMapBounds}
+          onDragEnd={fetchCourtsByBoundsAndDatetime}
         >
           <Map.ZoomButton onZoomIn={handleZoomIn} onZoomOut={handleZoomOut} />
           <Map.CurrentLocationButton
@@ -276,7 +298,6 @@ const Courts: NextPage = () => {
             selectedSlot={selectedSlot}
             onChange={handleChangeSlot}
           />
-
           {map &&
             courts &&
             courts.map((court: any) => (