From c2d7b94853a7345c45dd708ded5c32f99df38865 Mon Sep 17 00:00:00 2001 From: Suk Woo Date: Mon, 30 Sep 2024 23:25:08 +0900 Subject: [PATCH] =?UTF-8?q?UI:=20#178=20ModalFormButton=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20=EB=B0=8F=20ModalButton=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=8C=80=EC=B2=B4=20(#179)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modal/ModalButton.tsx | 2 +- src/components/modal/ModalFormButton.tsx | 17 ----------------- .../project-status/CreateModalProjectStatus.tsx | 9 ++++++--- .../project-status/UpdateModalProjectStatus.tsx | 17 ++++++++++++++--- .../modal/project/CreateModalProject.tsx | 10 +++++++--- .../modal/project/UpdateModalProject.tsx | 14 +++++++++++--- src/components/modal/task/CreateModalTask.tsx | 11 +++++++---- src/components/modal/task/UpdateModalTask.tsx | 9 ++++++--- src/components/modal/team/CreateModalTeam.tsx | 10 +++++++--- src/components/modal/team/UpdateModalTeam.tsx | 14 +++++++++++--- 10 files changed, 70 insertions(+), 43 deletions(-) delete mode 100644 src/components/modal/ModalFormButton.tsx diff --git a/src/components/modal/ModalButton.tsx b/src/components/modal/ModalButton.tsx index bc1e725b..f550ba86 100644 --- a/src/components/modal/ModalButton.tsx +++ b/src/components/modal/ModalButton.tsx @@ -11,7 +11,7 @@ export default function ModalButton({ formId, backgroundColor, onClick, children - - ); -} diff --git a/src/components/modal/project-status/CreateModalProjectStatus.tsx b/src/components/modal/project-status/CreateModalProjectStatus.tsx index 65da874b..0d1a5b22 100644 --- 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 ( - - + + + 등록 + ); diff --git a/src/components/modal/project-status/UpdateModalProjectStatus.tsx b/src/components/modal/project-status/UpdateModalProjectStatus.tsx index f586622c..9f457043 100644 --- 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 ( - +
+ + 수정 + + + 삭제 + +
); diff --git a/src/components/modal/project/CreateModalProject.tsx b/src/components/modal/project/CreateModalProject.tsx index f953def7..5bb44f9a 100644 --- 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 = async (data) => { console.log('프로젝트 생성 폼 제출'); console.log(data); @@ -19,8 +21,10 @@ export default function CreateModalProject({ onClose: handleClose }: CreateModal return ( - - + + + 등록 + ); diff --git a/src/components/modal/project/UpdateModalProject.tsx b/src/components/modal/project/UpdateModalProject.tsx index 3301799e..90c1ddda 100644 --- 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 = async (data) => { console.log('프로젝트 생성 폼 제출'); console.log(data); handleClose(); }; + + // ToDo: 프로젝트 수정 API 작업시 작성할 것 + const handleUpdateClick = () => {}; + return ( - - + + + 수정 + ); diff --git a/src/components/modal/task/CreateModalTask.tsx b/src/components/modal/task/CreateModalTask.tsx index 3c93ed4d..2d99d4dc 100644 --- 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 ( - - + + + 등록 + ); diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx index e54b17bb..b2947f47 100644 --- 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 <>
@@ -173,7 +174,9 @@ export default function UpdateModalTask({ project, taskId, onClose: handleClose
- + + 수정 + )}
diff --git a/src/components/modal/team/CreateModalTeam.tsx b/src/components/modal/team/CreateModalTeam.tsx index 4b919b53..696ca158 100644 --- 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 = async (data) => { console.log('팀 생성 폼 제출'); console.log(data); @@ -20,8 +22,10 @@ export default function CreateModalTeam({ onClose: handleClose }: CreateModalPro return ( - - + + + 등록 + ); diff --git a/src/components/modal/team/UpdateModalTeam.tsx b/src/components/modal/team/UpdateModalTeam.tsx index 5912e235..a978ae1b 100644 --- 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 = async (data) => { console.log(teamId, '수정 폼 제출'); console.log(data); handleClose(); }; + + // ToDo: 팀 수정 API 작업시 같이 작업할 것. + const handleUpdateClick = () => {}; + return ( - - + + + 수정 + );