From c1673f6b228175555af57c9db690bf713e1284ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=B0=BD=EA=B8=B0?= <hckhong@naver.com>
Date: Fri, 4 Oct 2024 20:26:00 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=9B=8C=ED=81=AC=EC=8A=A4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EB=AA=A9=EB=A1=9D=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=ED=95=9C=20=EC=9B=8C=ED=81=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=EC=97=90=20=EB=A9=94=EB=89=B4=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ProjectCreateModal/index.tsx   |  2 +-
 .../WorkspaceBrowseLayout/index.tsx           | 37 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ProjectCreateModal/index.tsx b/frontend/src/components/ProjectCreateModal/index.tsx
index 8408f1c..0694ad9 100644
--- a/frontend/src/components/ProjectCreateModal/index.tsx
+++ b/frontend/src/components/ProjectCreateModal/index.tsx
@@ -31,7 +31,7 @@ export default function ProjectCreateModal({ onSubmit, buttonClass = '' }: Proje
         </Button>
       </DialogTrigger>
       <DialogContent>
-        <DialogHeader title="새 프로젝트" />
+        <DialogHeader title="새 프로젝트 추가" />
         <ProjectCreateForm
           onSubmit={(data: ProjectCreateFormValues) => {
             const formattedData: ProjectRequest = {
diff --git a/frontend/src/components/WorkspaceBrowseLayout/index.tsx b/frontend/src/components/WorkspaceBrowseLayout/index.tsx
index 4cafbb3..a5dfa61 100644
--- a/frontend/src/components/WorkspaceBrowseLayout/index.tsx
+++ b/frontend/src/components/WorkspaceBrowseLayout/index.tsx
@@ -2,7 +2,7 @@ import { useEffect, Suspense, useState } from 'react';
 import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import Header from '../Header';
 import useAuthStore from '@/stores/useAuthStore';
-import { WorkspaceRequest, WorkspaceResponse } from '@/types';
+import { ProjectRequest, WorkspaceRequest, WorkspaceResponse } from '@/types';
 import useWorkspaceListQuery from '@/queries/workspaces/useWorkspaceListQuery';
 import useCreateWorkspaceQuery from '@/queries/workspaces/useCreateWorkspaceQuery';
 import { cn } from '@/lib/utils';
@@ -10,6 +10,8 @@ import { Ellipsis } from 'lucide-react';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
 import WorkSpaceCreateForm, { WorkSpaceCreateFormValues } from '../WorkSpaceCreateModal/WorkSpaceCreateForm';
+import ProjectCreateForm, { ProjectCreateFormValues } from '../ProjectCreateModal/ProjectCreateForm';
+import useCreateProjectQuery from '@/queries/projects/useCreateProjectQuery';
 
 export default function WorkspaceBrowseLayout() {
   const location = useLocation();
@@ -19,6 +21,7 @@ export default function WorkspaceBrowseLayout() {
 
   const [isOpenWorkspaceCreate, setIsOpenWorkspaceCreate] = useState<boolean>(false);
   const [isOpenWorkspaceUpdate, setIsOpenWorkspaceUpdate] = useState<boolean>(false);
+  const [isOpenProjectCreate, setIsOpenProjectCreate] = useState<boolean>(false);
 
   useEffect(() => {
     if (memberId == 0) {
@@ -27,6 +30,7 @@ export default function WorkspaceBrowseLayout() {
   }, [memberId, navigate]);
 
   const createWorkspace = useCreateWorkspaceQuery();
+  const createProject = useCreateProjectQuery();
   const { data: workspacesResponse } = useWorkspaceListQuery(memberId ?? 0);
   const workspaces = workspacesResponse?.workspaceResponses ?? [];
   const activeWorkspaceId: number = Number(location.pathname.split('/')[2] || '-1');
@@ -45,6 +49,22 @@ export default function WorkspaceBrowseLayout() {
     setIsOpenWorkspaceCreate(false);
   };
 
+  const handleCreateProject = (values: ProjectCreateFormValues) => {
+    const data: ProjectRequest = {
+      title: values.projectName,
+      projectType: values.labelType.toLowerCase() as ProjectRequest['projectType'],
+      categories: values.categories,
+    };
+
+    createProject.mutate({
+      workspaceId: activeWorkspaceId,
+      memberId,
+      data,
+    });
+
+    setIsOpenProjectCreate(false);
+  };
+
   return (
     <>
       <Header className="fixed left-0 top-0 w-full" />
@@ -92,7 +112,9 @@ export default function WorkspaceBrowseLayout() {
                             <DropdownMenuItem onClick={() => setIsOpenWorkspaceUpdate(true)}>
                               워크스페이스 이름 변경
                             </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => {}}>워크스페이스에 새 프로젝트 추가</DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => setIsOpenProjectCreate(true)}>
+                              워크스페이스에 새 프로젝트 추가
+                            </DropdownMenuItem>
                           </DropdownMenuContent>
                         </DropdownMenu>
                       )}
@@ -135,6 +157,17 @@ export default function WorkspaceBrowseLayout() {
           <WorkSpaceCreateForm onSubmit={() => console.log('hello')} />
         </DialogContent>
       </Dialog>
+
+      <Dialog
+        open={isOpenProjectCreate}
+        onOpenChange={setIsOpenProjectCreate}
+      >
+        <DialogTrigger asChild></DialogTrigger>
+        <DialogContent>
+          <DialogHeader title="새 프로젝트 추가" />
+          <ProjectCreateForm onSubmit={handleCreateProject} />
+        </DialogContent>
+      </Dialog>
     </>
   );
 }