UI: #178 ModalFormButton 제거 및 ModalButton으로 대체 (#179)

GU-99 · Sep 30, 2024 · c2d7b94 · c2d7b94
1 parent ada666d
commit c2d7b94
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 43 deletions.
diff --git a/src/components/modal/ModalButton.tsx b/src/components/modal/ModalButton.tsx
@@ -11,7 +11,7 @@ export default function ModalButton({ formId, backgroundColor, onClick, children
     <button
       type={formId ? 'submit' : 'button'}
       form={formId}
-      className={`h-full w-full rounded-md px-10 text-white outline-none ${backgroundColor} hover:brightness-90`}
+      className={`h-25 w-full rounded-md px-10 text-white outline-none ${backgroundColor} hover:brightness-90`}
       onClick={handleClick}
     >
       {children}

diff --git a/src/components/modal/ModalFormButton.tsx b/src/components/modal/ModalFormButton.tsx
diff --git a/src/components/modal/project-status/CreateModalProjectStatus.tsx b/src/components/modal/project-status/CreateModalProjectStatus.tsx
@@ -1,7 +1,7 @@
 import ModalLayout from '@layouts/ModalLayout';
 import ModalPortal from '@components/modal/ModalPortal';
+import ModalButton from '@components/modal/ModalButton';
 import ModalProjectStatusForm from '@components/modal/project-status/ModalProjectStatusForm';
-import ModalFormButton from '@components/modal/ModalFormButton';
 
 import type { SubmitHandler } from 'react-hook-form';
 import type { Project } from '@/types/ProjectType';
@@ -14,6 +14,7 @@ type CreateModalProjectStatusProps = {
 };
 
 export default function CreateModalProjectStatus({ project, onClose: handleClose }: CreateModalProjectStatusProps) {
+  const createStatusFormId = 'createStatusForm';
   const statusMutation = useCreateStatus(project.projectId);
 
   // ToDo: Error 처리 추가할 것
@@ -25,8 +26,10 @@ export default function CreateModalProjectStatus({ project, onClose: handleClose
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <ModalProjectStatusForm formId="createStatusForm" project={project} onSubmit={handleSubmit} />
-        <ModalFormButton formId="createStatusForm" isCreate onClose={handleClose} />
+        <ModalProjectStatusForm formId={createStatusFormId} project={project} onSubmit={handleSubmit} />
+        <ModalButton formId={createStatusFormId} backgroundColor="bg-main">
+          등록
+        </ModalButton>
       </ModalLayout>
     </ModalPortal>
   );

diff --git a/src/components/modal/project-status/UpdateModalProjectStatus.tsx b/src/components/modal/project-status/UpdateModalProjectStatus.tsx
@@ -1,7 +1,7 @@
 import ModalLayout from '@layouts/ModalLayout';
 import ModalPortal from '@components/modal/ModalPortal';
+import ModalButton from '@components/modal/ModalButton';
 import ModalProjectStatusForm from '@components/modal/project-status/ModalProjectStatusForm';
-import ModalFormButton from '@components/modal/ModalFormButton';
 import { useUpdateStatus } from '@hooks/query/useStatusQuery';
 
 import type { SubmitHandler } from 'react-hook-form';
@@ -19,6 +19,7 @@ export default function UpdateModalProjectStatus({
   statusId,
   onClose: handleClose,
 }: UpdateModalProjectStatusProps) {
+  const updateStatusFormId = 'updateStatusForm';
   const updateMutation = useUpdateStatus(project.projectId, statusId);
 
   // ToDo: Error 처리 추가
@@ -28,16 +29,26 @@ export default function UpdateModalProjectStatus({
     handleClose();
   };
 
+  // ToDo: 상태 삭제 작업시 채워둘것
+  const handleDeleteClick = () => {};
+
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
         <ModalProjectStatusForm
-          formId="updateStatusForm"
+          formId={updateStatusFormId}
           project={project}
           statusId={statusId}
           onSubmit={handleSubmit}
         />
-        <ModalFormButton formId="updateStatusForm" isCreate={false} onClose={handleClose} />
+        <div className="flex min-h-25 w-4/5 gap-10">
+          <ModalButton formId={updateStatusFormId} backgroundColor="bg-main">
+            수정
+          </ModalButton>
+          <ModalButton backgroundColor="bg-delete" onClick={handleDeleteClick}>
+            삭제
+          </ModalButton>
+        </div>
       </ModalLayout>
     </ModalPortal>
   );

diff --git a/src/components/modal/project/CreateModalProject.tsx b/src/components/modal/project/CreateModalProject.tsx
@@ -1,7 +1,7 @@
 import ModalPortal from '@components/modal/ModalPortal';
 import ModalLayout from '@layouts/ModalLayout';
+import ModalButton from '@components/modal/ModalButton';
 import ModalProjectForm from '@components/modal/project/ModalProjectForm';
-import ModalFormButton from '@components/modal/ModalFormButton';
 
 import type { SubmitHandler } from 'react-hook-form';
 import type { Project } from '@/types/ProjectType';
@@ -11,6 +11,8 @@ type CreateModalProjectProps = {
 };
 
 export default function CreateModalProject({ onClose: handleClose }: CreateModalProjectProps) {
+  const createProjectFormId = 'createProjectForm';
+
   const handleSubmit: SubmitHandler<Project> = async (data) => {
     console.log('프로젝트 생성 폼 제출');
     console.log(data);
@@ -19,8 +21,10 @@ export default function CreateModalProject({ onClose: handleClose }: CreateModal
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <ModalProjectForm formId="createProjectForm" onSubmit={handleSubmit} />
-        <ModalFormButton formId="createProjectForm" isCreate onClose={handleClose} />
+        <ModalProjectForm formId={createProjectFormId} onSubmit={handleSubmit} />
+        <ModalButton formId={createProjectFormId} backgroundColor="bg-main">
+          등록
+        </ModalButton>
       </ModalLayout>
     </ModalPortal>
   );

diff --git a/src/components/modal/project/UpdateModalProject.tsx b/src/components/modal/project/UpdateModalProject.tsx
@@ -1,7 +1,7 @@
 import ModalPortal from '@components/modal/ModalPortal';
 import ModalLayout from '@layouts/ModalLayout';
+import ModalButton from '@components/modal/ModalButton';
 import ModalProjectForm from '@components/modal/project/ModalProjectForm';
-import ModalFormButton from '@components/modal/ModalFormButton';
 
 import type { SubmitHandler } from 'react-hook-form';
 import type { Project } from '@/types/ProjectType';
@@ -12,16 +12,24 @@ type UpdateModalProjectProps = {
 };
 
 export default function UpdateModalProject({ projectId, onClose: handleClose }: UpdateModalProjectProps) {
+  const updateProjectFormId = 'updateProjectForm';
+
   const handleSubmit: SubmitHandler<Project> = async (data) => {
     console.log('프로젝트 생성 폼 제출');
     console.log(data);
     handleClose();
   };
+
+  // ToDo: 프로젝트 수정 API 작업시 작성할 것
+  const handleUpdateClick = () => {};
+
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <ModalProjectForm formId="updateProjectForm" projectId={projectId} onSubmit={handleSubmit} />
-        <ModalFormButton formId="updateProjectForm" isCreate={false} onClose={handleClose} />
+        <ModalProjectForm formId={updateProjectFormId} projectId={projectId} onSubmit={handleSubmit} />
+        <ModalButton formId={updateProjectFormId} backgroundColor="bg-main" onClick={handleUpdateClick}>
+          수정
+        </ModalButton>
       </ModalLayout>
     </ModalPortal>
   );

diff --git a/src/components/modal/task/CreateModalTask.tsx b/src/components/modal/task/CreateModalTask.tsx
@@ -1,14 +1,14 @@
 import { useQueryClient } from '@tanstack/react-query';
 import ModalLayout from '@layouts/ModalLayout';
 import ModalPortal from '@components/modal/ModalPortal';
+import ModalButton from '@components/modal/ModalButton';
 import ModalTaskForm from '@components/modal/task/ModalTaskForm';
-import ModalFormButton from '@components/modal/ModalFormButton';
 import useToast from '@hooks/useToast';
 import { useCreateStatusTask, useReadStatusTasks, useUploadTaskFile } from '@hooks/query/useTaskQuery';
 
 import type { SubmitHandler } from 'react-hook-form';
-import type { Task, TaskForm } from '@/types/TaskType';
 import type { Project } from '@/types/ProjectType';
+import type { Task, TaskForm } from '@/types/TaskType';
 import type { ProjectStatus } from '@/types/ProjectStatusType';
 import type { FileUploadFailureResult, FileUploadSuccessResult } from '@/types/FileType';
 
@@ -18,6 +18,7 @@ type CreateModalTaskProps = {
 };
 
 export default function CreateModalTask({ project, onClose: handleClose }: CreateModalTaskProps) {
+  const createTaskFormId = 'createTaskForm';
   const { toastSuccess, toastError } = useToast();
   const { mutateAsync: createTaskInfoMutateAsync } = useCreateStatusTask(project.projectId);
   const { mutateAsync: createTaskFileMutateAsync } = useUploadTaskFile(project.projectId);
@@ -73,8 +74,10 @@ export default function CreateModalTask({ project, onClose: handleClose }: Creat
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <ModalTaskForm formId="createTaskForm" project={project} onSubmit={handleSubmit} />
-        <ModalFormButton formId="createTaskForm" isCreate onClose={handleClose} />
+        <ModalTaskForm formId={createTaskFormId} project={project} onSubmit={handleSubmit} />
+        <ModalButton formId={createTaskFormId} backgroundColor="bg-main">
+          등록
+        </ModalButton>
       </ModalLayout>
     </ModalPortal>
   );

diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx
@@ -3,11 +3,11 @@ import { FormProvider, useForm } from 'react-hook-form';
 import ModalLayout from '@layouts/ModalLayout';
 import Spinner from '@components/common/Spinner';
 import ModalPortal from '@components/modal/ModalPortal';
+import ModalButton from '@components/modal/ModalButton';
 import StatusRadio from '@components/common/StatusRadio';
 import AssigneeList from '@components/common/AssigneeList';
 import FileDropZone from '@components/common/FileDropZone';
 import MarkdownEditor from '@components/common/MarkdownEditor';
-import ModalFormButton from '@components/modal/ModalFormButton';
 import SearchUserInput from '@components/common/SearchUserInput';
 import PeriodDateInput from '@components/common/PeriodDateInput';
 import DuplicationCheckInput from '@components/common/DuplicationCheckInput';
@@ -41,6 +41,7 @@ type UpdateModalTaskProps = {
 };
 
 export default function UpdateModalTask({ project, taskId, onClose: handleClose }: UpdateModalTaskProps) {
+  const updateTaskFormId = 'updateTaskForm';
   const { projectId, startDate, endDate } = project;
 
   const [keyword, setKeyword] = useState('');
@@ -144,7 +145,7 @@ export default function UpdateModalTask({ project, taskId, onClose: handleClose
           <>
             <FormProvider {...methods}>
               <form
-                id="updateTaskForm"
+                id={updateTaskFormId}
                 className="flex w-4/5 grow flex-col justify-center"
                 onSubmit={handleSubmit(handleFormSubmit)}
               >
@@ -173,7 +174,9 @@ export default function UpdateModalTask({ project, taskId, onClose: handleClose
                 <MarkdownEditor id="content" label="내용" contentFieldName="content" />
               </form>
             </FormProvider>
-            <ModalFormButton formId="updateTaskForm" isCreate={false} onClose={handleClose} />
+            <ModalButton formId={updateTaskFormId} backgroundColor="bg-main">
+              수정
+            </ModalButton>
           </>
         )}
         <hr className="my-20" />

diff --git a/src/components/modal/team/CreateModalTeam.tsx b/src/components/modal/team/CreateModalTeam.tsx
@@ -1,6 +1,6 @@
 import ModalLayout from '@layouts/ModalLayout';
 import ModalPortal from '@components/modal/ModalPortal';
-import ModalFormButton from '@components/modal/ModalFormButton';
+import ModalButton from '@components/modal/ModalButton';
 import ModalTeamForm from '@components/modal/team/ModalTeamForm';
 
 import type { SubmitHandler } from 'react-hook-form';
@@ -11,6 +11,8 @@ type CreateModalProjectStatusProps = {
 };
 
 export default function CreateModalTeam({ onClose: handleClose }: CreateModalProjectStatusProps) {
+  const createTeamFormId = 'createTeamForm';
+
   const handleSubmit: SubmitHandler<Team> = async (data) => {
     console.log('팀 생성 폼 제출');
     console.log(data);
@@ -20,8 +22,10 @@ export default function CreateModalTeam({ onClose: handleClose }: CreateModalPro
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <ModalTeamForm formId="createTeamForm" onSubmit={handleSubmit} />
-        <ModalFormButton formId="createTeamForm" isCreate onClose={handleClose} />
+        <ModalTeamForm formId={createTeamFormId} onSubmit={handleSubmit} />
+        <ModalButton formId={createTeamFormId} backgroundColor="bg-main">
+          등록
+        </ModalButton>
       </ModalLayout>
     </ModalPortal>
   );

diff --git a/src/components/modal/team/UpdateModalTeam.tsx b/src/components/modal/team/UpdateModalTeam.tsx
@@ -1,6 +1,6 @@
 import ModalLayout from '@layouts/ModalLayout';
 import ModalPortal from '@components/modal/ModalPortal';
-import ModaFormButton from '@components/modal/ModalFormButton';
+import ModalButton from '@components/modal/ModalButton';
 import ModalTeamForm from '@components/modal/team/ModalTeamForm';
 
 import { SubmitHandler } from 'react-hook-form';
@@ -11,16 +11,24 @@ type UpdateModalTeamProps = {
   onClose: () => void;
 };
 export default function UpdateModalTeam({ teamId, onClose: handleClose }: UpdateModalTeamProps) {
+  const updateTeamFormId = 'updateTeamForm';
+
   const handleSubmit: SubmitHandler<Team> = async (data) => {
     console.log(teamId, '수정 폼 제출');
     console.log(data);
     handleClose();
   };
+
+  // ToDo: 팀 수정 API 작업시 같이 작업할 것.
+  const handleUpdateClick = () => {};
+
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <ModalTeamForm formId="updateTeamForm" teamId={teamId} onSubmit={handleSubmit} />
-        <ModaFormButton formId="updateTeamForm" isCreate={false} onClose={handleClose} />
+        <ModalTeamForm formId={updateTeamFormId} teamId={teamId} onSubmit={handleSubmit} />
+        <ModalButton formId={updateTeamFormId} backgroundColor="bg-main" onClick={handleUpdateClick}>
+          수정
+        </ModalButton>
       </ModalLayout>
     </ModalPortal>
   );