Refator: 워크스페이스 , 프로젝트 만들기 디자인 통일

frontend/src/components/ProjectCreateModal/index.tsx

@@ -1,25 +1,47 @@
+import * as React from 'react';
 import ProjectCreateForm, { ProjectCreateFormValues } from './ProjectCreateForm';
-import XIcon from '@/assets/icons/x.svg?react';
+import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
+import { Button } from '@/components/ui/button';
+import { Plus } from 'lucide-react';
 
 export default function ProjectCreateModal({
-  onClose,
   onSubmit,
 }: {
-  onClose: () => void;
-  onSubmit: (data: ProjectCreateFormValues) => void;
+  onSubmit: (data: { title: string; labelType: 'Classification' | 'Detection' | 'Segmentation' }) => void;
 }) {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const handleOpen = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+
   return (
-    <div className="flex w-[610px] flex-col gap-10 rounded-3xl border px-10 py-5 shadow-lg">
-      <header className="flex gap-5">
-        <h1 className="small-title w-full">새 프로젝트</h1>
-        <button
-          className="flex h-8 w-8 items-center justify-center"
-          onClick={onClose}
+    <Dialog
+      open={isOpen}
+      onOpenChange={setIsOpen}
     >
-          <XIcon className="stroke-gray-900" />
-        </button>
-      </header>
-      <ProjectCreateForm onSubmit={onSubmit} />
-    </div>
+      <DialogTrigger asChild>
+        <Button
+          variant="outlinePrimary"
+          className="mt-4 flex items-center gap-2"
+          onClick={handleOpen}
+        >
+          <Plus size={16} />
+          <span>프로젝트 추가</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader title="새 프로젝트" />
+        <ProjectCreateForm
+          onSubmit={(data: ProjectCreateFormValues) => {
+            const formattedData = {
+              title: data.projectName,
+              labelType: data.labelType,
+            };
+            onSubmit(formattedData);
+            handleClose();
+          }}
+        />
+      </DialogContent>
+    </Dialog>
   );
 }

frontend/src/components/WorkSpaceCreateModal/index.stories.tsx

@@ -8,9 +8,6 @@ export default {
 
 export const Default = () => (
   <WorkSpaceCreateModal
-    onClose={() => {
-      console.log('close');
-    }}
     onSubmit={(data) => {
       console.log(data);
     }}

frontend/src/components/WorkSpaceCreateModal/index.tsx

@@ -1,25 +1,44 @@
+import * as React from 'react';
 import WorkSpaceCreateForm, { WorkSpaceCreateFormValues } from './WorkSpaceCreateForm';
-import XIcon from '@/assets/icons/x.svg?react';
+import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
+import { Plus } from 'lucide-react';
 
 export default function WorkSpaceCreateModal({
-  onClose,
   onSubmit,
 }: {
-  onClose: () => void;
-  onSubmit: (data: WorkSpaceCreateFormValues) => void;
+  onSubmit: (data: { title: string; content: string }) => void;
 }) {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const handleOpen = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+
   return (
-    <div className="flex w-[610px] flex-col gap-10 rounded-3xl border px-10 py-5 shadow-lg">
-      <header className="flex gap-5">
-        <h1 className="small-title w-full">새 워크스페이스</h1>
-        <button
-          className="flex h-8 w-8 items-center justify-center"
-          onClick={onClose}
+    <Dialog
+      open={isOpen}
+      onOpenChange={setIsOpen}
     >
-          <XIcon className="stroke-gray-900" />
+      <DialogTrigger asChild>
+        <button
+          className="flex items-center justify-center p-2"
+          onClick={handleOpen}
+        >
+          <Plus size={20} />
         </button>
-      </header>
-      <WorkSpaceCreateForm onSubmit={onSubmit} />
-    </div>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader title="새 워크스페이스" />
+        <WorkSpaceCreateForm
+          onSubmit={(data: WorkSpaceCreateFormValues) => {
+            const formattedData = {
+              title: data.workspaceName,
+              content: data.workspaceDescription || '',
+            };
+            onSubmit(formattedData);
+            handleClose();
+          }}
+        />
+      </DialogContent>
+    </Dialog>
   );
 }