Merge pull request #45 from coconut-thisABLE/feat/#38

FEAT: async props
coconut-thisABLE · Mar 25, 2022 · 2baf6d4 · 2baf6d4
2 parents 6a02103 + 3c38f59
commit 2baf6d4
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 8 deletions.
diff --git a/thisable/src/components/DetailPage/DetailPage.js b/thisable/src/components/DetailPage/DetailPage.js
@@ -18,7 +18,7 @@ function DetailPage() {
   useEffect(async () => {
     const detail = await getPlaceDetail(id);
     setPlace(detail.response);
-  }, []);
+  }, [id]);
 
   return (
     <div className="maincontainer">

diff --git a/thisable/src/components/DetailPage/ReviewPage.js b/thisable/src/components/DetailPage/ReviewPage.js
@@ -20,7 +20,7 @@ function ReviewPage({ locationId }) {
     const reviewList = await getReview(locationId);
     setReviews(reviewList);
     console.log(reviewList.response);
-  }, []);
+  }, [locationId]);
 
   const [inputValue, setInputValue] = useState("");
   console.log("input: ", inputValue);

diff --git a/thisable/src/components/DetailPage/ToggleView.js b/thisable/src/components/DetailPage/ToggleView.js
@@ -32,7 +32,7 @@ function ToggleView() {
   useEffect(async () => {
     const chargerInfo = await getPlaceDetailCharger(id);
     setCharger(chargerInfo.data);
-  }, []);
+  }, [id]);
 
   return (
     <div>

diff --git a/thisable/src/components/MainPage/MainPage.css b/thisable/src/components/MainPage/MainPage.css
@@ -4,7 +4,7 @@
 }
 
 .MainPageList {
-  overflow: initial;
+  overflow: auto;
   height: 94vh;
   min-width: 380px;
 }

diff --git a/thisable/src/components/MainPage/MainPageList.js b/thisable/src/components/MainPage/MainPageList.js
@@ -6,11 +6,12 @@ import "./MainPage.css";
 
 function MainPageList() {
   const [places, setPlaces] = useState("");
+  const [page, setPage] = useState(1);
 
   useEffect(async () => {
-    const list = await getPlaceList();
+    const list = await getPlaceList(page);
     setPlaces(list);
-  }, []);
+  }, [page]);
 
   const renderPlaces =
     places &&
@@ -24,6 +25,7 @@ function MainPageList() {
 
   const handleCallback = (changedPage) => {
     console.log("넘어온 페이지네이션 페이지", changedPage);
+    setPage(changedPage);
   };
 
   return (

diff --git a/thisable/src/services/user.service.js b/thisable/src/services/user.service.js
@@ -2,9 +2,9 @@ import axios from "axios";
 
 const baseUrl = process.env.REACT_APP_BASE_URL;
 
-export const getPlaceList = () => {
+export const getPlaceList = (page) => {
   return axios
-    .get(baseUrl + "/?latitude=37.5441270&longitude=126.9667812&page=1")
+    .get(baseUrl + "/?latitude=37.5441270&longitude=126.9667812&page=" + page)
     .then((response) => {
       return response.data;
     });