Feat: #101 프로젝트 상태 생성 기능 추가

GU-99 · Sep 4, 2024 · 2b53d95 · 2b53d95
1 parent 63d6bf9
commit 2b53d95
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/components/modal/project-status/CreateModalProjectStatus.tsx b/src/components/modal/project-status/CreateModalProjectStatus.tsx
@@ -6,17 +6,20 @@ import ModalFormButton from '@components/modal/ModalFormButton';
 import type { SubmitHandler } from 'react-hook-form';
 import type { Project } from '@/types/ProjectType';
 import type { ProjectStatusForm } from '@/types/ProjectStatusType';
+import { useCreateStatus } from '@/hooks/query/useStatusQuery';
 
 type CreateModalProjectStatusProps = {
   project: Project;
   onClose: () => void;
 };
 
 export default function CreateModalProjectStatus({ project, onClose: handleClose }: CreateModalProjectStatusProps) {
-  // ToDo: 상태 생성을 위한 네트워크 로직 추가
+  const statusMutation = useCreateStatus(project.projectId);
+
+  // ToDo: Error 처리 추가할 것
   const handleSubmit: SubmitHandler<ProjectStatusForm> = async (data) => {
-    console.log('생성 폼 제출');
-    console.log(data);
+    statusMutation.mutate(data);
+    statusMutation.reset();
     handleClose();
   };
   return (

diff --git a/src/components/modal/project-status/ModalProjectStatusForm.tsx b/src/components/modal/project-status/ModalProjectStatusForm.tsx
@@ -3,9 +3,10 @@ import { RiProhibited2Fill } from 'react-icons/ri';
 import { STATUS_VALIDATION_RULES } from '@constants/formValidationRules';
 import Spinner from '@components/common/Spinner';
 import DuplicationCheckInput from '@components/common/DuplicationCheckInput';
-import useStatusQuery from '@hooks/query/useStatusQuery';
+import { useReadStatuses } from '@hooks/query/useStatusQuery';
 
 import type { SubmitHandler } from 'react-hook-form';
+import { useEffect } from 'react';
 import type { ProjectStatus, ProjectStatusForm } from '@/types/ProjectStatusType';
 import type { Project } from '@/types/ProjectType';
 
@@ -17,21 +18,26 @@ type ModalProjectStatusFormProps = {
 };
 
 export default function ModalProjectStatusForm({ formId, project, statusId, onSubmit }: ModalProjectStatusFormProps) {
-  const { isStatusLoading, initialValue, nameList, colorList, usableColorList } = useStatusQuery(
+  const { isStatusLoading, initialValue, nameList, colorList, usableColorList } = useReadStatuses(
     project.projectId,
     statusId,
   );
 
   const {
     register,
     watch,
+    reset,
     handleSubmit,
     formState: { errors },
   } = useForm<ProjectStatusForm>({
     mode: 'onChange',
     defaultValues: initialValue,
   });
 
+  useEffect(() => {
+    reset(initialValue);
+  }, [initialValue, reset]);
+
   if (isStatusLoading) {
     return (
       <section className="flex grow items-center justify-center">