Refactor: browse 페이지와 리뷰 페이지와 멤버 페이지 헤더 여백 수정, WorkspaceBrowseDetail 리팩토링

This commit is contained in:
홍창기 2024-10-04 13:08:18 +09:00
parent 1d3c9c4a69
commit fc1a371f6a
5 changed files with 57 additions and 80 deletions

View File

@ -89,13 +89,13 @@ export default function ProjectMemberManage() {
return ( return (
<div className="grid w-full"> <div className="grid w-full">
<div className="flex flex-col"> <div className="flex flex-col gap-4 p-4">
<header className="bg-background flex h-16 items-center gap-4 px-4"> <header className="bg-background flex items-center">
<h1 className="heading flex-1"> </h1> <h1 className="heading flex-1"> </h1>
{isAdminOrManager && <MemberAddModal projectId={projectId ? Number(projectId) : 0} />} {isAdminOrManager && <MemberAddModal projectId={projectId ? Number(projectId) : 0} />}
</header> </header>
<main className="grid flex-1 gap-4 overflow-auto px-4 pb-4"> <main className="grid flex-1 gap-4 overflow-auto">
{sortedMembers.length === 0 ? ( {sortedMembers.length === 0 ? (
<div className="py-4 text-center"> .</div> <div className="py-4 text-center"> .</div>
) : ( ) : (

View File

@ -60,7 +60,7 @@ export default function ProjectReviewList() {
return ( return (
<Suspense fallback={<div></div>}> <Suspense fallback={<div></div>}>
<div> <div>
<header className="sticky top-0 z-10 flex h-16 items-center gap-1 border-b border-gray-200 bg-white px-4"> <header className="flex items-center border-b border-gray-200 bg-white p-4">
<h1 className="heading"> </h1> <h1 className="heading"> </h1>
<Link <Link
to={`/review/${workspaceId}/request`} to={`/review/${workspaceId}/request`}

View File

@ -29,81 +29,58 @@ export default function WorkspaceBrowseDetail() {
}; };
return ( return (
<div className="flex h-full w-full flex-col"> <div className="flex h-full w-full flex-col gap-4 p-4">
<HeaderSection <div className="flex w-full flex-col gap-2">
workspaceName={workspaceData?.title ?? `Workspace-${workspaceId}`} <div className="flex items-center justify-center">
onCreateProject={handleCreateProject} <h1 className="heading flex grow">{workspaceData?.title ?? `Workspace-${workspaceId}`}</h1>
/> <div className="flex flex-col">
<ProjectCreateModal
buttonClass="flex items-center gap-2 h-10 px-4 py-2"
onSubmit={handleCreateProject}
/>
</div>
</div>
{workspaceData && (
<div className="flex items-center">
<p className="body">{workspaceData.content ?? '프로젝트에 대한 설명이 없습니다.'}</p>
</div>
)}
</div>
{isNaN(workspaceId) || isError || !workspaceId ? ( {isNaN(workspaceId) || isError || !workspaceId ? (
<EmptyStateMessage workspaceId={workspaceId} /> <div className="flex h-full w-full flex-col items-center justify-center">
<Smile
size={48}
className="mb-2 text-gray-300"
/>
<div className="body-strong text-gray-400">
{!workspaceId ? '작업할 워크스페이스를 선택하세요.' : '작업할 프로젝트가 없습니다.'}
</div>
</div>
) : ( ) : (
<ProjectList <>
projects={projects} {projects.length === 0 ? (
workspaceId={workspaceId} <div className="flex h-full w-full flex-col items-center justify-center">
/> <Smile
size={48}
className="mb-2 text-gray-300"
/>
<div className="body-strong text-gray-400"> .</div>
</div>
) : (
<div className="flex flex-wrap gap-6">
{projects.map((project: ProjectResponse) => (
<ProjectCard
key={project.id}
title={project.title}
to={`${webPath.workspace()}/${workspaceId}/${project.id}`}
description={project.projectType}
imageUrl={project.thumbnail}
/>
))}
</div>
)}
</>
)} )}
</div> </div>
); );
} }
function HeaderSection({
workspaceName,
onCreateProject,
}: {
workspaceName: string;
onCreateProject: (data: ProjectRequest) => void;
}) {
return (
<div className="flex h-16 items-center justify-center px-4">
<h1 className="heading flex grow">{workspaceName}</h1>
<div className="flex flex-col">
<ProjectCreateModal
buttonClass="flex items-center gap-2 h-10 px-4 py-2"
onSubmit={onCreateProject}
/>
</div>
</div>
);
}
function EmptyStateMessage({ workspaceId }: { workspaceId: number }) {
return (
<div className="flex h-full w-full flex-col items-center justify-center">
<Smile
size={48}
className="mb-2 text-gray-300"
/>
<div className="body-strong text-gray-400">
{!workspaceId ? '작업할 워크스페이스를 선택하세요.' : '작업할 프로젝트가 없습니다.'}
</div>
</div>
);
}
function ProjectList({ projects, workspaceId }: { projects: ProjectResponse[]; workspaceId: number }) {
if (projects.length === 0) {
return (
<div className="flex h-full w-full flex-col items-center justify-center">
<Smile
size={48}
className="mb-2 text-gray-300"
/>
<div className="body-strong text-gray-400"> .</div>
</div>
);
}
return (
<div className="flex flex-wrap gap-6 px-4 pb-4">
{projects.map((project: ProjectResponse) => (
<ProjectCard
key={project.id}
title={project.title}
to={`${webPath.workspace()}/${workspaceId}/${project.id}`}
description={project.projectType}
imageUrl={project.thumbnail}
/>
))}
</div>
);
}

View File

@ -12,8 +12,8 @@ export default function WorkspaceMemberManage() {
return ( return (
<div className="grid w-full"> <div className="grid w-full">
<div className="flex flex-col"> <div className="flex flex-col gap-4 p-4">
<header className="bg-background flex h-16 items-center gap-4 px-4"> <header className="bg-background flex items-center">
<h1 className="heading flex-1"> </h1> <h1 className="heading flex-1"> </h1>
<WorkspaceMemberAddModal <WorkspaceMemberAddModal
@ -22,7 +22,7 @@ export default function WorkspaceMemberManage() {
/> />
</header> </header>
<main className="flex-1 overflow-auto px-4 pb-4"> <main className="flex-1 overflow-auto">
{members.length === 0 ? ( {members.length === 0 ? (
<div className="py-4 text-center"> .</div> <div className="py-4 text-center"> .</div>
) : ( ) : (

View File

@ -60,7 +60,7 @@ export default function WorkspaceReviewList() {
return ( return (
<Suspense fallback={<div></div>}> <Suspense fallback={<div></div>}>
<div> <div>
<header className="sticky top-0 z-10 flex h-16 items-center gap-1 border-b border-gray-200 bg-white px-4"> <header className="flex items-center border-b border-gray-200 bg-white p-4">
<h1 className="heading"> </h1> <h1 className="heading"> </h1>
<Link <Link
to={`/review/${workspaceId}/request`} to={`/review/${workspaceId}/request`}