메인 페이지 게시글 get 요청, Toast 에러 수정 (#411)

* feat: 마이페이지, 메인페이지 pageInfo 추가 * fix: msw 오류 수정
woowacourse-teams · Aug 17, 2023 · cf172bc · cf172bc
1 parent 0b65780
commit cf172bc
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 15 deletions.
diff --git a/frontend/src/components/common/Toast/Toast.tsx b/frontend/src/components/common/Toast/Toast.tsx
@@ -13,7 +13,7 @@ interface Props {
 
 const Toast = ({ colorTheme, description, title, ms }: Props) => {
   return createPortal(
-    <S.ToastWrapper key={crypto.randomUUID()} $colorTheme={colorTheme} ms={ms}>
+    <S.ToastWrapper key={Date.now()} $colorTheme={colorTheme} ms={ms}>
       <S.Icon src={colorTheme === 'COMPLETION' ? completeIcon : errorIcon} />
       <S.MessageContainer>
         <S.Title>{title}</S.Title>

diff --git a/frontend/src/mocks/data/myPagePost/done.json b/frontend/src/mocks/data/myPagePost/done.json
@@ -10,5 +10,14 @@
       "watchedCount": 125,
       "supporterId": 1
     }
-  ]
+  ],
+  "pageInfo": {
+    "isFirst": true,
+    "isLast": false,
+    "hasNext": true,
+    "totalPages": 4,
+    "totalElements": 48,
+    "currentPage": 1,
+    "currentSize": 12
+  }
 }
diff --git a/frontend/src/mocks/data/myPagePost/inProgress.json b/frontend/src/mocks/data/myPagePost/inProgress.json
@@ -38,5 +38,14 @@
       "watchedCount": 125,
       "supporterId": 2
     }
-  ]
+  ],
+  "pageInfo": {
+    "isFirst": true,
+    "isLast": false,
+    "hasNext": true,
+    "totalPages": 4,
+    "totalElements": 48,
+    "currentPage": 1,
+    "currentSize": 12
+  }
 }
diff --git a/frontend/src/mocks/data/myPagePost/notStarted.json b/frontend/src/mocks/data/myPagePost/notStarted.json
@@ -28,5 +28,14 @@
       "applicantCount": 4,
       "watchedCount": 125
     }
-  ]
+  ],
+  "pageInfo": {
+    "isFirst": true,
+    "isLast": false,
+    "hasNext": true,
+    "totalPages": 4,
+    "totalElements": 48,
+    "currentPage": 1,
+    "currentSize": 12
+  }
 }
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
@@ -54,7 +54,7 @@ export const handlers = [
     return res(ctx.status(200), ctx.set('Content-Type', 'application/json'), ctx.json(myPageSupporterProfile));
   }),
 
-  rest.get('*/posts/runner/me/runner?reviewStatus', async (req, res, ctx) => {
+  rest.get('*/posts/runner/me/runner?size&page&reviewStatus', async (req, res, ctx) => {
     const reviewStatus = req.url.searchParams.get('reviewStatus');
 
     switch (reviewStatus) {
@@ -72,7 +72,7 @@ export const handlers = [
     }
   }),
 
-  rest.get('*/posts/runner/me/supporter?reviewStatus', async (req, res, ctx) => {
+  rest.get('*/posts/runner/me/supporter?size&page&reviewStatus', async (req, res, ctx) => {
     const reviewStatus = req.url.searchParams.get('reviewStatus');
 
     switch (reviewStatus) {

diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
@@ -19,6 +19,13 @@ const MainPage = () => {
 
   const [runnerPostList, setRunnerPostList] = useState<RunnerPost[]>([]);
   const [isLast, setIsLast] = useState<boolean>(true);
+  const [page, setPage] = useState<number>(1);
+
+  const handleClickMoreButton = () => {
+    setPage(page + 1);
+
+    getRunnerPost();
+  };
 
   useEffect(() => {
     getRunnerPost();
@@ -34,7 +41,7 @@ const MainPage = () => {
   };
 
   const getRunnerPost = () => {
-    getRequest('/posts/runner')
+    getRequest(`/posts/runner?size=10&page=${page}`)
       .then(async (response) => {
         const data: GetRunnerPostResponse = await response.json();
         setRunnerPostList([...runnerPostList, ...data.data]);
@@ -68,7 +75,7 @@ const MainPage = () => {
       <S.RunnerPostContainer>
         <RunnerPostList posts={runnerPostList} />
         {!isLast && (
-          <Button colorTheme="RED" width="720px" onClick={getRunnerPost}>
+          <Button colorTheme="RED" width="1200px" height="55px" onClick={handleClickMoreButton}>
             더보기
           </Button>
         )}

diff --git a/frontend/src/pages/MyPage.tsx b/frontend/src/pages/MyPage.tsx
@@ -19,18 +19,23 @@ const MyPage = () => {
   const [myPageProfile, setMyPageProfile] = useState<GetMyPageProfileResponse | null>(null);
   const [myPagePostList, setMyPagePostList] = useState<MyPagePost[]>([]);
   const [postOptions, setPostOptions] = useState<PostOptions>(runnerPostOptions);
-  const [isRunner, setIsRunner] = useState(true);
+  const [page, setPage] = useState<number>(1);
+  const [isLast, setIsLast] = useState<boolean>(false);
+  const [isRunner, setIsRunner] = useState<boolean>(true);
 
   const { getToken } = useToken();
   const { goToProfileEditPage } = usePageRouter();
   const { showErrorToast } = useContext(ToastContext);
 
-  useEffect(() => {
-    setPostOptions(isRunner ? runnerPostOptions : supporterPostOptions);
-  }, [isRunner]);
+  // useEffect(() => {
+  //   setPostOptions(isRunner ? runnerPostOptions : supporterPostOptions);
+  // }, []); 오류 수정 해야함
 
   useEffect(() => {
     const fetchMyPageData = async (role: 'runner' | 'supporter') => {
+      setMyPagePostList([]);
+      setPage(1);
+
       getProfile(role);
       getPostList(role);
     };
@@ -59,14 +64,16 @@ const MyPage = () => {
 
     const rolePath =
       role === 'runner'
-        ? `runner/me/runner?reviewStatus=${selectedPostOption}`
-        : `runner/me/supporter?reviewStatus=${selectedPostOption}`;
+        ? `runner/me/runner?size=10&page=${page}&reviewStatus=${selectedPostOption}`
+        : `runner/me/supporter?size=10&page=${page}&reviewStatus=${selectedPostOption}`;
 
     getRequest(`/posts/${rolePath}`, token)
       .then(async (response) => {
         const data: GetMyPagePostResponse = await response.json();
 
-        setMyPagePostList(data.data);
+        setMyPagePostList((current) => [...current, ...data.data]);
+        setPage(page + 1);
+        setIsLast(data.pageInfo.isLast);
       })
       .catch((error: Error) => showErrorToast({ title: ERROR_TITLE.REQUEST, description: error.message }));
   };
@@ -87,6 +94,12 @@ const MyPage = () => {
     setIsRunner(!isRunner);
   };
 
+  const handleClickMoreButton = () => {
+    const role = isRunner ? 'runner' : 'supporter';
+
+    getPostList(role);
+  };
+
   return (
     <Layout>
       <S.TitleContainer>
@@ -144,6 +157,13 @@ const MyPage = () => {
           <ListFilter options={postOptions} selectOption={selectOptions} />
         </S.FilterWrapper>
         <MyPagePostList filteredPostList={myPagePostList} isRunner={isRunner} />
+        <S.MoreButtonWrapper>
+          {!isLast && (
+            <Button colorTheme="RED" width="1200px" height="55px" onClick={handleClickMoreButton}>
+              더보기
+            </Button>
+          )}
+        </S.MoreButtonWrapper>
       </S.PostsContainer>
     </Layout>
   );
@@ -257,4 +277,8 @@ const S = {
   FilterWrapper: styled.div`
     padding: 70px 20px;
   `,
+
+  MoreButtonWrapper: styled.div`
+    margin-top: 50px;
+  `,
 };