From d0500fd60f83db9597f8f7c83779e9bfa6454b07 Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Thu, 3 Mar 2022 19:24:31 +0900
Subject: [PATCH] =?UTF-8?q?Feat=20:=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4.=20state=20->=20let?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Network/ArticleService.js                 |  3 +-
 .../CategoryPage/Components/CategoryBody.jsx  | 59 ++++++++++---------
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/Network/ArticleService.js b/src/Network/ArticleService.js
index 8dc863a..595ac2c 100644
--- a/src/Network/ArticleService.js
+++ b/src/Network/ArticleService.js
@@ -94,7 +94,8 @@ const ArticleService = {
   getArticles: async (categoryId, page) => {
     const method = 'GET';
     const url = articleUrl('');
-    const take = 1000;
+    // const take = 1000;
+    const take = 3;
     const params = { categoryId, page, take };
 
     let response;
diff --git a/src/Pages/CategoryPage/Components/CategoryBody.jsx b/src/Pages/CategoryPage/Components/CategoryBody.jsx
index e6b7bdc..d572319 100644
--- a/src/Pages/CategoryPage/Components/CategoryBody.jsx
+++ b/src/Pages/CategoryPage/Components/CategoryBody.jsx
@@ -14,9 +14,11 @@ import Styled from './Body.styled';
 
 const CategoryBody = () => {
   const [articles, setArticles] = useState([]);
-  const [isLoaded, setIsLoaded] = useState(true);
-  const [page, setPage] = useState(1);
-  const [hasNextPage, setHasNextPage] = useState(true);
+  const [isLoaded, setIsLoaded] = useState(false);
+  // const [page, setPage] = useState(1);
+  let page = 1;
+  // const [hasNextPage, setHasNextPage] = useState(true);
+  let hasNextPage = true;
   const [target, setTarget] = useState(null);
   const [curCate, setCurCate] = useState('');
   const loca = useLocation();
@@ -31,40 +33,35 @@ const CategoryBody = () => {
     navi(`/article/${id}`);
   };
 
-  const setInitalArticles = async () => {
-    setIsLoaded(true);
-    const result = await ArticleService.getArticles(categoryId);
-    const meta = result.meta;
+  // const setInitalArticles = async () => {
+  //   setIsLoaded(true);
+  //   const result = await ArticleService.getArticles(categoryId);
+  //   console.log('result ,', result);
+  //   const meta = result.meta;
 
-    setArticles(result.data);
-    setIsLoaded(false);
-    setHasNextPage(meta.hasNextPage);
-  };
+  //   setArticles(result.data);
+  //   setIsLoaded(false);
+  //   setHasNextPage(meta.hasNextPage);
+  //   hasNextPage = meta.hasNextPage;
 
-  useEffect(() => {
-    if (categoryId > 3) {
-      alert('준비 중입니다!');
-      navi('/');
-    }
-    setCurCate(getCategoryByUrl(loca));
-    setInitalArticles();
-  }, []);
+  // };
 
-  // 무한 스크롤 임시 정지
+  // 동기적으로 sleep하는 함수
+  // const sleep = delay => {
+  //   let start = new Date().getTime();
+  //   while (new Date().getTime() < start + delay);
+  // };
 
   const getMoreItem = async () => {
     if (!hasNextPage) return;
-
     setIsLoaded(true);
-    // 실제 API 통신처럼 비동기로 받아오는 것을 구현하기 위해 1.5 초 뒤에 데이터를 갱신한다.
-    // resolve, reject는 각각 성공 시, 실패 시의 동작을 의미. reject를 생략하니 reslove의 경우만 익명함수로 처리해주었다.
-    // (categoryId);
     const result = await ArticleService.getArticles(categoryId, page);
     const newData = result.data;
     const meta = result.meta;
-
-    setPage(prevPage => prevPage + 1);
-    setHasNextPage(meta.hasNextPage);
+    // setPage(prevPage => prevPage + 1);
+    page += 1;
+    // setHasNextPage(meta.hasNextPage);
+    hasNextPage = meta.hasNextPage;
     setArticles(prevList => prevList.concat(newData));
     setIsLoaded(false);
   };
@@ -77,6 +74,14 @@ const CategoryBody = () => {
     }
   };
 
+  useEffect(() => {
+    if (categoryId > 3) {
+      alert('준비 중입니다!');
+      navi('/');
+    }
+    setCurCate(getCategoryByUrl(loca));
+  }, []);
+
   useEffect(() => {
     let observer;
     if (target) {