Merge branch 'fe/develop' of https://lab.ssafy.com/s11-s-project/S11P21S002 into fe/feat/project-structure-seperate

This commit is contained in:
정현조 2024-10-04 13:24:29 +09:00
commit b841e61730
6 changed files with 72 additions and 84 deletions

View File

@ -19,6 +19,7 @@ export default function WorkspaceNavigation() {
const workspaces = workspacesResponse?.workspaceResponses || []; const workspaces = workspacesResponse?.workspaceResponses || [];
const activeWorkspaceId = workspaceId ?? workspaces[0]?.id; const activeWorkspaceId = workspaceId ?? workspaces[0]?.id;
const activeProjectId: number = Number(location.pathname.split('/')[3] || '0');
if (workspaces.length === 0) { if (workspaces.length === 0) {
return <div></div>; return <div></div>;
@ -35,25 +36,35 @@ export default function WorkspaceNavigation() {
{activeWorkspaceId && ( {activeWorkspaceId && (
<> <>
<Link <Link
to={`/workspace/${activeWorkspaceId}`} to={
activeProjectId === 0
? `/workspace/${activeWorkspaceId}`
: `/workspace/${activeWorkspaceId}/${activeProjectId}`
}
className={isWorkspacePage ? 'body-strong' : 'body'} className={isWorkspacePage ? 'body-strong' : 'body'}
> >
labeling labeling
</Link> </Link>
<Link <Link
to={`/review/${activeWorkspaceId}`} to={
activeProjectId === 0 ? `/review/${activeWorkspaceId}` : `/review/${activeWorkspaceId}/${activeProjectId}`
}
className={isReviewPage ? 'body-strong' : 'body'} className={isReviewPage ? 'body-strong' : 'body'}
> >
review review
</Link> </Link>
<Link <Link
to={`/model/${activeWorkspaceId}`} to={
activeProjectId === 0 ? `/model/${activeWorkspaceId}` : `/model/${activeWorkspaceId}/${activeProjectId}`
}
className={isModelPage ? 'body-strong' : 'body'} className={isModelPage ? 'body-strong' : 'body'}
> >
model model
</Link> </Link>
<Link <Link
to={`/member/${activeWorkspaceId}`} to={
activeProjectId === 0 ? `/member/${activeWorkspaceId}` : `/member/${activeWorkspaceId}/${activeProjectId}`
}
className={isMemberPage ? 'body-strong' : 'body'} className={isMemberPage ? 'body-strong' : 'body'}
> >
member member

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`}