Refactor: 리뷰 인피니트 쿼리 리팩토링

frontend/src/api/reviewApi.ts

@@ -53,6 +53,7 @@ export async function updateReviewStatus(projectId: number, reviewId: number, me
 export async function getReviewByStatus(
   projectId: number,
   memberId: number,
+  sortDirection: number,
   reviewStatus?: 'REQUESTED' | 'APPROVED' | 'REJECTED',
   lastReviewId?: number,
   limitPage: number = 10
@@ -62,6 +63,7 @@ export async function getReviewByStatus(
       params: {
         memberId,
         limitPage,
+        sortDirection, // 정렬방향 추가
         ...(reviewStatus ? { reviewStatus } : {}),
         ...(lastReviewId ? { lastReviewId } : {}),
       },

frontend/src/api/workspaceApi.ts

@@ -58,21 +58,24 @@ export async function addWorkspaceMember(workspaceId: number, memberId: number,
 export async function getWorkspaceReviews(
   workspaceId: number,
   memberId: number,
+  sortDirection: number,
   reviewStatus?: 'REQUESTED' | 'APPROVED' | 'REJECTED',
   lastReviewId?: number,
-  limitPage: number = 50
+  limitPage: number = 10
 ) {
   return api
     .get<ReviewResponse[]>(`/workspaces/${workspaceId}/reviews`, {
       params: {
         memberId,
         limitPage,
+        sortDirection,
         ...(reviewStatus ? { reviewStatus } : {}),
         ...(lastReviewId ? { lastReviewId } : {}),
       },
     })
     .then(({ data }) => data);
 }
+
 export async function removeWorkspaceMember(workspaceId: number, memberId: number, targetMemberId: number) {
   return api
     .delete(`/workspaces/${workspaceId}/members/${targetMemberId}`, {

frontend/src/mocks/folderHandler.ts

@@ -21,7 +21,7 @@ export const folderHandlers = [
           imageTitle: 'image1.jpg',
           imagePath: 'https://example.com/image1.jpg',
           dataPath: 'https://example.com/data1.json',
-          status: 'PENDING',
+          status: 'SAVE',
         },
       ],
       children: [

frontend/src/pages/ProjectReviewList.tsx

@@ -14,10 +14,13 @@ export default function ProjectReviewList() {
   const [, setSearchQuery] = useState('');
   const [sortValue, setSortValue] = useState('latest');
 
+  const sortDirection = sortValue === 'latest' ? 0 : 1;
+
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useReviewByStatusQuery(
     Number(projectId),
     memberId,
-    activeTab !== 'all' ? activeTab : undefined
+    activeTab !== 'all' ? activeTab : undefined,
+    sortDirection
   );
 
   const projectReviews = data?.pages.flat() || [];
@@ -60,10 +63,6 @@ export default function ProjectReviewList() {
             <Button variant="outlinePrimary">리뷰 요청</Button>
           </Link>
         </header>
-        <div
-          ref={loadMoreRef}
-          className="h-1"
-        />
         <ReviewList
           reviews={projectReviews}
           activeTab={activeTab}
@@ -73,8 +72,11 @@ export default function ProjectReviewList() {
           setSortValue={setSortValue}
           workspaceId={Number(workspaceId)}
         />
-
         {isFetchingNextPage}
+        <div
+          ref={loadMoreRef}
+          className="h-1"
+        />
       </div>
     </Suspense>
   );

frontend/src/pages/WorkspaceReviewList.tsx

@@ -1,10 +1,10 @@
-import { useState, useEffect, useRef } from 'react';
+import { Suspense, useState, useEffect, useRef } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import useWorkspaceReviewsQuery from '@/queries/workspaces/useWorkspaceReviewsQuery';
 import useAuthStore from '@/stores/useAuthStore';
 import ReviewList from '@/components/ReviewList';
 import { Button } from '@/components/ui/button';
-import { Suspense } from 'react';
+
 export default function WorkspaceReviewList() {
   const { workspaceId } = useParams<{ workspaceId: string }>();
   const profile = useAuthStore((state) => state.profile);
@@ -14,9 +14,12 @@ export default function WorkspaceReviewList() {
   const [, setSearchQuery] = useState('');
   const [sortValue, setSortValue] = useState('latest');
 
+  const sortDirection = sortValue === 'latest' ? 0 : 1;
+
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useWorkspaceReviewsQuery(
     Number(workspaceId),
     memberId,
+    sortDirection,
     activeTab !== 'all' ? activeTab : undefined
   );
 
@@ -60,10 +63,6 @@ export default function WorkspaceReviewList() {
             <Button variant="outlinePrimary">리뷰 요청</Button>
           </Link>
         </header>
-        <div
-          ref={loadMoreRef}
-          className="h-1"
-        />
 
         <ReviewList
           reviews={workspaceReviews}
@@ -76,6 +75,11 @@ export default function WorkspaceReviewList() {
         />
 
         {isFetchingNextPage}
+
+        <div
+          ref={loadMoreRef}
+          className="h-1"
+        />
       </div>
     </Suspense>
   );

frontend/src/queries/reviews/useReviewByStatusQuery.ts

@@ -5,17 +5,35 @@ import { ReviewResponse } from '@/types';
 export default function useReviewByStatusQuery(
   projectId: number,
   memberId: number,
-  reviewStatus: 'REQUESTED' | 'APPROVED' | 'REJECTED' | undefined
+  reviewStatus: 'REQUESTED' | 'APPROVED' | 'REJECTED' | undefined,
+  sortDirection: number
 ) {
   return useSuspenseInfiniteQuery<ReviewResponse[]>({
-    queryKey: ['reviewByStatus', projectId, reviewStatus],
+    queryKey: ['reviewByStatus', projectId, reviewStatus, sortDirection],
     queryFn: ({ pageParam = undefined }) => {
-      return getReviewByStatus(projectId, memberId, reviewStatus, pageParam as number | undefined);
+      return getReviewByStatus(projectId, memberId, sortDirection, reviewStatus, pageParam as number | undefined, 10);
     },
     getNextPageParam: (lastPage) => {
       if (lastPage.length === 0) return undefined;
-      const lastReview = lastPage[lastPage.length - 1];
-      return lastReview.reviewId;
+
+      if (sortDirection === 0) {
+        const lastReview = lastPage[lastPage.length - 1];
+        return lastReview.reviewId;
+      } else {
+        const firstReview = lastPage[0];
+        return firstReview.reviewId;
+      }
+    },
+    getPreviousPageParam: (firstPage) => {
+      if (firstPage.length === 0) return undefined;
+
+      if (sortDirection === 0) {
+        const firstReview = firstPage[0];
+        return firstReview.reviewId;
+      } else {
+        const lastReview = firstPage[firstPage.length - 1];
+        return lastReview.reviewId;
+      }
     },
     initialPageParam: undefined,
   });

frontend/src/queries/workspaces/useWorkspaceReviewsQuery.tsx

@@ -5,18 +5,44 @@ import { ReviewResponse } from '@/types';
 export default function useWorkspaceReviewsQuery(
   workspaceId: number,
   memberId: number,
+  sortDirection: number,
   reviewStatus?: 'REQUESTED' | 'APPROVED' | 'REJECTED',
   limitPage: number = 10
 ) {
   return useSuspenseInfiniteQuery<ReviewResponse[]>({
-    queryKey: ['workspaceReviews', workspaceId, reviewStatus],
+    queryKey: ['workspaceReviews', workspaceId, reviewStatus, sortDirection],
     queryFn: ({ pageParam = undefined }) =>
-      getWorkspaceReviews(workspaceId, memberId, reviewStatus, pageParam as number | undefined, limitPage),
+      getWorkspaceReviews(
+        workspaceId,
+        memberId,
+        sortDirection,
+        reviewStatus,
+        pageParam as number | undefined,
+        limitPage
+      ),
 
     getNextPageParam: (lastPage) => {
       if (lastPage.length === 0) return undefined;
-      const lastReview = lastPage[lastPage.length - 1];
-      return lastReview.reviewId;
+
+      if (sortDirection === 0) {
+        const lastReview = lastPage[lastPage.length - 1];
+        return lastReview.reviewId;
+      } else {
+        const firstReview = lastPage[0];
+        return firstReview.reviewId;
+      }
+    },
+
+    getPreviousPageParam: (firstPage) => {
+      if (firstPage.length === 0) return undefined;
+
+      if (sortDirection === 0) {
+        const firstReview = firstPage[0];
+        return firstReview.reviewId;
+      } else {
+        const lastReview = firstPage[firstPage.length - 1];
+        return lastReview.reviewId;
+      }
     },
 
     initialPageParam: undefined,