From 04cb52e79c7086ebb4f5cbfed904e81b0eefd7e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Thu, 26 Sep 2024 03:59:05 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ProjectReviewList.tsx   | 54 +++++++++++-----------
 frontend/src/pages/WorkspaceReviewList.tsx | 54 +++++++++++-----------
 2 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/frontend/src/pages/ProjectReviewList.tsx b/frontend/src/pages/ProjectReviewList.tsx
index e4fe4af..4fa219c 100644
--- a/frontend/src/pages/ProjectReviewList.tsx
+++ b/frontend/src/pages/ProjectReviewList.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { Suspense, useState, useEffect, useRef } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import useReviewByStatusQuery from '@/queries/reviews/useReviewByStatusQuery';
 import useAuthStore from '@/stores/useAuthStore';
@@ -49,33 +49,35 @@ export default function ProjectReviewList() {
   }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
 
   return (
-    <div>
-      <header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b px-4">
-        <h1 className="text-xl font-semibold">프로젝트 리뷰</h1>
-        <Link
-          to={`/admin/${workspaceId}/reviews/request`}
-          className="ml-auto"
-        >
-          <Button variant="outlinePrimary">리뷰 요청</Button>
-        </Link>
-      </header>
+    <Suspense fallback={<div></div>}>
+      <div>
+        <header className="sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-white px-4">
+          <h1 className="text-xl font-semibold">프로젝트 리뷰</h1>
+          <Link
+            to={`/admin/${workspaceId}/reviews/request`}
+            className="ml-auto"
+          >
+            <Button variant="outlinePrimary">리뷰 요청</Button>
+          </Link>
+        </header>
 
-      <ReviewList
-        reviews={projectReviews}
-        activeTab={activeTab}
-        setActiveTab={setActiveTab}
-        setSearchQuery={setSearchQuery}
-        sortValue={sortValue}
-        setSortValue={setSortValue}
-        workspaceId={Number(workspaceId)}
-      />
+        <ReviewList
+          reviews={projectReviews}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          setSearchQuery={setSearchQuery}
+          sortValue={sortValue}
+          setSortValue={setSortValue}
+          workspaceId={Number(workspaceId)}
+        />
 
-      {isFetchingNextPage && <div className="py-4 text-center">로딩 중...</div>}
+        {isFetchingNextPage}
 
-      <div
-        ref={loadMoreRef}
-        className="h-1"
-      />
-    </div>
+        <div
+          ref={loadMoreRef}
+          className="h-1"
+        />
+      </div>
+    </Suspense>
   );
 }
diff --git a/frontend/src/pages/WorkspaceReviewList.tsx b/frontend/src/pages/WorkspaceReviewList.tsx
index 3f4edf1..9c01c1c 100644
--- a/frontend/src/pages/WorkspaceReviewList.tsx
+++ b/frontend/src/pages/WorkspaceReviewList.tsx
@@ -4,7 +4,7 @@ import useWorkspaceReviewsQuery from '@/queries/workspaces/useWorkspaceReviewsQu
 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);
@@ -49,33 +49,35 @@ export default function WorkspaceReviewList() {
   }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
 
   return (
-    <div>
-      <header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b px-4">
-        <h1 className="text-xl font-semibold">워크스페이스 리뷰</h1>
-        <Link
-          to={`/admin/${workspaceId}/reviews/request`}
-          className="ml-auto"
-        >
-          <Button variant="outlinePrimary">리뷰 요청</Button>
-        </Link>
-      </header>
+    <Suspense fallback={<div></div>}>
+      <div>
+        <header className="sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-white px-4">
+          <h1 className="text-xl font-semibold">워크스페이스 리뷰</h1>
+          <Link
+            to={`/admin/${workspaceId}/reviews/request`}
+            className="ml-auto"
+          >
+            <Button variant="outlinePrimary">리뷰 요청</Button>
+          </Link>
+        </header>
 
-      <ReviewList
-        reviews={workspaceReviews}
-        activeTab={activeTab}
-        setActiveTab={setActiveTab}
-        setSearchQuery={setSearchQuery}
-        sortValue={sortValue}
-        setSortValue={setSortValue}
-        workspaceId={Number(workspaceId)}
-      />
+        <ReviewList
+          reviews={workspaceReviews}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          setSearchQuery={setSearchQuery}
+          sortValue={sortValue}
+          setSortValue={setSortValue}
+          workspaceId={Number(workspaceId)}
+        />
 
-      {isFetchingNextPage && <div className="py-4 text-center">로딩 중...</div>}
+        {isFetchingNextPage}
 
-      <div
-        ref={loadMoreRef}
-        className="h-1"
-      />
-    </div>
+        <div
+          ref={loadMoreRef}
+          className="h-1"
+        />
+      </div>
+    </Suspense>
   );
 }