Refactor: 페이지 리팩토링

This commit is contained in:
정현조 2024-09-26 03:59:05 +09:00
parent 3d16081a6d
commit 04cb52e79c
2 changed files with 56 additions and 52 deletions

View File

@ -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 { useParams, Link } from 'react-router-dom';
import useReviewByStatusQuery from '@/queries/reviews/useReviewByStatusQuery'; import useReviewByStatusQuery from '@/queries/reviews/useReviewByStatusQuery';
import useAuthStore from '@/stores/useAuthStore'; import useAuthStore from '@/stores/useAuthStore';
@ -49,33 +49,35 @@ export default function ProjectReviewList() {
}, [hasNextPage, isFetchingNextPage, fetchNextPage]); }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
return ( return (
<div> <Suspense fallback={<div></div>}>
<header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b px-4"> <div>
<h1 className="text-xl font-semibold"> </h1> <header className="sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-white px-4">
<Link <h1 className="text-xl font-semibold"> </h1>
to={`/admin/${workspaceId}/reviews/request`} <Link
className="ml-auto" to={`/admin/${workspaceId}/reviews/request`}
> className="ml-auto"
<Button variant="outlinePrimary"> </Button> >
</Link> <Button variant="outlinePrimary"> </Button>
</header> </Link>
</header>
<ReviewList <ReviewList
reviews={projectReviews} reviews={projectReviews}
activeTab={activeTab} activeTab={activeTab}
setActiveTab={setActiveTab} setActiveTab={setActiveTab}
setSearchQuery={setSearchQuery} setSearchQuery={setSearchQuery}
sortValue={sortValue} sortValue={sortValue}
setSortValue={setSortValue} setSortValue={setSortValue}
workspaceId={Number(workspaceId)} workspaceId={Number(workspaceId)}
/> />
{isFetchingNextPage && <div className="py-4 text-center"> ...</div>} {isFetchingNextPage}
<div <div
ref={loadMoreRef} ref={loadMoreRef}
className="h-1" className="h-1"
/> />
</div> </div>
</Suspense>
); );
} }

View File

@ -4,7 +4,7 @@ import useWorkspaceReviewsQuery from '@/queries/workspaces/useWorkspaceReviewsQu
import useAuthStore from '@/stores/useAuthStore'; import useAuthStore from '@/stores/useAuthStore';
import ReviewList from '@/components/ReviewList'; import ReviewList from '@/components/ReviewList';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Suspense } from 'react';
export default function WorkspaceReviewList() { export default function WorkspaceReviewList() {
const { workspaceId } = useParams<{ workspaceId: string }>(); const { workspaceId } = useParams<{ workspaceId: string }>();
const profile = useAuthStore((state) => state.profile); const profile = useAuthStore((state) => state.profile);
@ -49,33 +49,35 @@ export default function WorkspaceReviewList() {
}, [hasNextPage, isFetchingNextPage, fetchNextPage]); }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
return ( return (
<div> <Suspense fallback={<div></div>}>
<header className="bg-background sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b px-4"> <div>
<h1 className="text-xl font-semibold"> </h1> <header className="sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-white px-4">
<Link <h1 className="text-xl font-semibold"> </h1>
to={`/admin/${workspaceId}/reviews/request`} <Link
className="ml-auto" to={`/admin/${workspaceId}/reviews/request`}
> className="ml-auto"
<Button variant="outlinePrimary"> </Button> >
</Link> <Button variant="outlinePrimary"> </Button>
</header> </Link>
</header>
<ReviewList <ReviewList
reviews={workspaceReviews} reviews={workspaceReviews}
activeTab={activeTab} activeTab={activeTab}
setActiveTab={setActiveTab} setActiveTab={setActiveTab}
setSearchQuery={setSearchQuery} setSearchQuery={setSearchQuery}
sortValue={sortValue} sortValue={sortValue}
setSortValue={setSortValue} setSortValue={setSortValue}
workspaceId={Number(workspaceId)} workspaceId={Number(workspaceId)}
/> />
{isFetchingNextPage && <div className="py-4 text-center"> ...</div>} {isFetchingNextPage}
<div <div
ref={loadMoreRef} ref={loadMoreRef}
className="h-1" className="h-1"
/> />
</div> </div>
</Suspense>
); );
} }