From 2b53d95d45943ea9b1a5c723327808c5f932881b Mon Sep 17 00:00:00 2001
From: Seok93 <gkdltjr@naver.com>
Date: Wed, 4 Sep 2024 14:15:11 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20#101=20=ED=94=84=EB=A1=9C=EC=A0=9D?=
 =?UTF-8?q?=ED=8A=B8=20=EC=83=81=ED=83=9C=20=EC=83=9D=EC=84=B1=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/project-status/CreateModalProjectStatus.tsx  |  9 ++++++---
 .../modal/project-status/ModalProjectStatusForm.tsx    | 10 ++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/modal/project-status/CreateModalProjectStatus.tsx b/src/components/modal/project-status/CreateModalProjectStatus.tsx
index 669ecf1e..65da874b 100644
--- a/src/components/modal/project-status/CreateModalProjectStatus.tsx
+++ b/src/components/modal/project-status/CreateModalProjectStatus.tsx
@@ -6,6 +6,7 @@ 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;
@@ -13,10 +14,12 @@ type CreateModalProjectStatusProps = {
 };
 
 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
index 2f8c7d85..ef4b0bfb 100644
--- 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,7 +18,7 @@ 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,
   );
@@ -25,6 +26,7 @@ export default function ModalProjectStatusForm({ formId, project, statusId, onSu
   const {
     register,
     watch,
+    reset,
     handleSubmit,
     formState: { errors },
   } = useForm<ProjectStatusForm>({
@@ -32,6 +34,10 @@ export default function ModalProjectStatusForm({ formId, project, statusId, onSu
     defaultValues: initialValue,
   });
 
+  useEffect(() => {
+    reset(initialValue);
+  }, [initialValue, reset]);
+
   if (isStatusLoading) {
     return (
       <section className="flex grow items-center justify-center">