[Release] 리뷰미 v1.1.1 배포

woowacourse-teams · Oct 2, 2024 · 983a97d · 983a97d
2 parents 00c11b9 + 2f90128
commit 983a97d
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 17 deletions.
diff --git a/frontend/src/hooks/review/useGetReviewList/index.ts b/frontend/src/hooks/review/useGetReviewList/index.ts
@@ -19,7 +19,7 @@ const useGetReviewList = () => {
     staleTime: 1 * 60 * 1000,
   });
 
-  return result;
+  return { ...result };
 };
 
 export default useGetReviewList;
diff --git a/frontend/src/mocks/handlers/review.ts b/frontend/src/mocks/handlers/review.ts
@@ -78,7 +78,7 @@ const getReviewList = (lastReviewId: number | null, size: number) => {
     return HttpResponse.json({
       revieweeName: REVIEW_LIST.revieweeName,
       projectName: REVIEW_LIST.projectName,
-      lastReviewId: !isLastPage && lastReviewId !== null ? lastReviewId + size : null,
+      lastReviewId: paginatedReviews.length > 0 ? paginatedReviews[paginatedReviews.length - 1].reviewId : 0,
       isLastPage: isLastPage,
       reviews: paginatedReviews,
     });

diff --git a/frontend/src/mocks/mockData/reviewListMockData.ts b/frontend/src/mocks/mockData/reviewListMockData.ts
@@ -2,7 +2,7 @@ import { ReviewList } from '@/types';
 export const REVIEW_LIST: ReviewList = {
   revieweeName: '쑤쑤',
   projectName: 'review-me',
-  lastReviewId: 12,
+  lastReviewId: 24,
   isLastPage: false,
   reviews: [
     {

diff --git a/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx b/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx
@@ -14,26 +14,26 @@ import * as S from './styles';
 const PageContents = () => {
   const navigate = useNavigate();
 
-  const { data, fetchNextPage, hasNextPage, isLoading, isSuccess } = useGetReviewList();
+  const { data, fetchNextPage, isLoading, isSuccess } = useGetReviewList();
 
   const { param: reviewRequestCode } = useSearchParamAndQuery({
     paramKey: 'reviewRequestCode',
   });
 
-  const lastReviewElementRef = useInfiniteScroll({
-    fetchNextPage,
-    hasNextPage,
-    isLoading,
-    isLastPage: data.pages[0].isLastPage,
-  });
-
   const handleReviewClick = (id: number) => {
     navigate(`/${ROUTE.detailedReview}/${reviewRequestCode}/${id}`);
   };
 
   const { projectName, revieweeName } = data.pages[0];
+  const isLastPage = data.pages[data.pages.length - 1].isLastPage;
   const reviews = data.pages.flatMap((page) => page.reviews);
 
+  const lastReviewElementRef = useInfiniteScroll({
+    fetchNextPage,
+    isLoading,
+    isLastPage,
+  });
+
   return (
     isSuccess && (
       <S.Layout>

diff --git a/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts b/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts
@@ -2,28 +2,27 @@ import { useCallback, useRef } from 'react';
 
 export interface InfiniteScrollProps {
   fetchNextPage: () => void;
-  hasNextPage: boolean;
   isLoading: boolean;
   isLastPage: boolean;
 }
 
-const useInfiniteScroll = ({ fetchNextPage, hasNextPage, isLoading, isLastPage }: InfiniteScrollProps) => {
+const useInfiniteScroll = ({ fetchNextPage, isLoading, isLastPage }: InfiniteScrollProps) => {
   const observer = useRef<IntersectionObserver | null>(null);
 
   const lastElementRef = useCallback(
     (node: HTMLElement | null) => {
-      if (isLoading || isLastPage) return;
+      if (isLoading) return;
       if (observer.current) observer.current.disconnect();
 
       observer.current = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting && hasNextPage) {
+        if (entries[0].isIntersecting && !isLastPage) {
           fetchNextPage();
         }
       });
 
       if (node) observer.current.observe(node);
     },
-    [isLoading, fetchNextPage, hasNextPage, isLastPage],
+    [isLoading, fetchNextPage, isLastPage],
   );
 
   return lastElementRef;

diff --git a/frontend/src/pages/ReviewWritingPage/form/components/CardForm/styles.ts b/frontend/src/pages/ReviewWritingPage/form/components/CardForm/styles.ts
@@ -4,14 +4,19 @@ import media from '@/utils/media';
 
 export const CardFormContainer = styled.div`
   position: relative;
+
+  display: flex;
+  align-items: start;
+
   width: fit-content;
   min-width: ${({ theme }) => theme.formWidth};
   max-width: 90rem;
+  min-height: inherit;
+  padding-top: 3rem;
 
   ${media.medium} {
     width: 80vw;
     min-width: initial;
-    margin-top: 2.4rem;
   }
 
   @media screen and (max-width: 500px) {