jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/pages/ProjectMemberManage.tsx
View File

@ -89,13 +89,13 @@ export default function ProjectMemberManage() {
return (
<div className="grid w-full">
<div className="flex flex-col">
<header className="bg-background flex h-16 items-center gap-4 px-4">
<div className="flex flex-col gap-4 p-4">
<header className="bg-background flex items-center">
<h1 className="heading flex-1">프로젝트 멤버 관리</h1>
{isAdminOrManager && <MemberAddModal projectId={projectId ? Number(projectId) : 0} />}
</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 ? (
<div className="py-4 text-center">프로젝트에 멤버가 없습니다.</div>
) : (

2
frontend/src/pages/ProjectReviewList.tsx
View File

@ -60,7 +60,7 @@ export default function ProjectReviewList() {
return (
<Suspense fallback={<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>
<Link
to={`/review/${workspaceId}/request`}

121
frontend/src/pages/WorkspaceBrowseDetail.tsx
View File

@ -29,81 +29,58 @@ export default function WorkspaceBrowseDetail() {
};
return (
<div className="flex h-full w-full flex-col">
<HeaderSection
workspaceName={workspaceData?.title ?? `Workspace-${workspaceId}`}
onCreateProject={handleCreateProject}
/>
<div className="flex h-full w-full flex-col gap-4 p-4">
<div className="flex w-full flex-col gap-2">
<div className="flex items-center justify-center">
<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 ? (
<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}
workspaceId={workspaceId}
/>
<>
{projects.length === 0 ? (
<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>
);
}
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>
);
}

6
frontend/src/pages/WorkspaceMemberManage.tsx
View File

@ -12,8 +12,8 @@ export default function WorkspaceMemberManage() {
return (
<div className="grid w-full">
<div className="flex flex-col">
<header className="bg-background flex h-16 items-center gap-4 px-4">
<div className="flex flex-col gap-4 p-4">
<header className="bg-background flex items-center">
<h1 className="heading flex-1">워크스페이스 멤버 관리</h1>
<WorkspaceMemberAddModal
@ -22,7 +22,7 @@ export default function WorkspaceMemberManage() {
/>
</header>
<main className="flex-1 overflow-auto px-4 pb-4">
<main className="flex-1 overflow-auto">
{members.length === 0 ? (
<div className="py-4 text-center">워크스페이스에 멤버가 없습니다.</div>
) : (

2
frontend/src/pages/WorkspaceReviewList.tsx
View File

@ -60,7 +60,7 @@ export default function WorkspaceReviewList() {
return (
<Suspense fallback={<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>
<Link
to={`/review/${workspaceId}/request`}