From 2adfa18812f82e1d5208f17ef9fae5aa09139873 Mon Sep 17 00:00:00 2001
From: jeonghee <grighth12@gmail.com>
Date: Mon, 20 Dec 2021 04:40:22 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feat:=20=EC=BF=BC=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=EB=A7=81=20=EC=97=AC=EB=B6=80=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=A5=B8=20=EC=A7=80=EB=8F=84=20center=20restore?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/courts/index.tsx | 55 ++++++++++++++++++++++++++------------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/pages/courts/index.tsx b/src/pages/courts/index.tsx
index 083141cb..14a22000 100644
--- 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) => (