Feat: #102 프로젝트 상태 변경 API를 이용하여 상태 변경 기능 구현 (#106)

* Feat: #102 상태 변경 API를 위한 React Query 처리 추가

* Feat: #102 프로젝트 상태 변경 API MSW 처리 추가

* Feat: #102 프로젝트 상태 변경 기능 추가

* Fix: #102 상태 변경시 누락된 상태 순서 데이터 추가

src/components/modal/project-status/UpdateModalProjectStatus.tsx

@@ -2,6 +2,7 @@ import ModalLayout from '@layouts/ModalLayout';
 import ModalPortal from '@components/modal/ModalPortal';
 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';
 import type { Project } from '@/types/ProjectType';
@@ -18,10 +19,12 @@ export default function UpdateModalProjectStatus({
   statusId,
   onClose: handleClose,
 }: UpdateModalProjectStatusProps) {
-  // ToDo: 상태 수정을 위한 네트워크 로직 추가
+  const updateMutation = useUpdateStatus(project.projectId, statusId);
+
+  // ToDo: Error 처리 추가
   const handleSubmit: SubmitHandler<ProjectStatusForm> = async (data) => {
-    console.log(statusId, '수정 폼 제출');
-    console.log(data);
+    updateMutation.mutate(data);
+    updateMutation.reset();
     handleClose();
   };
 

src/hooks/query/useStatusQuery.ts

@@ -1,8 +1,9 @@
+import { queryClient } from '@hooks/query/queryClient';
 import { useMemo } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import useToast from '@hooks/useToast';
 import { PROJECT_STATUS_COLORS } from '@constants/projectStatus';
-import { createStatus, getStatusList } from '@services/statusService';
+import { createStatus, getStatusList, updateStatus } from '@services/statusService';
 
 import type { Project } from '@/types/ProjectType';
 import type { ProjectStatus, ProjectStatusForm, UsableColor } from '@/types/ProjectStatusType';
@@ -108,3 +109,20 @@ export function useCreateStatus(projectId: Project['projectId']) {
 
   return mutation;
 }
+
+export function useUpdateStatus(projectId: Project['projectId'], statusId: ProjectStatus['statusId']) {
+  const { toastSuccess } = useToast();
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: (formData: ProjectStatusForm) => updateStatus(projectId, statusId, formData),
+    onSuccess: () => {
+      toastSuccess('프로젝트 상태를 수정했습니다.');
+      queryClient.invalidateQueries({
+        queryKey: ['projects', projectId, 'statuses'],
+      });
+    },
+  });
+
+  return mutation;
+}

src/mocks/services/statusServiceHandler.ts

@@ -29,6 +29,24 @@ const statusServiceHandler = [
 
     return new HttpResponse(null, { status: 200 });
   }),
+  // 프로젝트 상태 수정 API
+  http.patch(`${BASE_URL}/project/:projectId/status/:statusId`, async ({ request, params }) => {
+    const accessToken = request.headers.get('Authorization');
+    const { projectId, statusId } = params;
+    const formData = (await request.json()) as ProjectStatusForm;
+
+    if (!accessToken) return new HttpResponse(null, { status: 401 });
+
+    const status = STATUS_DUMMY.find(
+      (status) => status.projectId === Number(projectId) && status.statusId === Number(statusId),
+    );
+    if (!status) return new HttpResponse(null, { status: 404 });
+
+    status.statusName = formData.statusName;
+    status.colorCode = formData.colorCode;
+    status.sortOrder = formData.sortOrder;
+    return new HttpResponse(null, { status: 204 });
+  }),
 ];
 
 export default statusServiceHandler;

src/services/statusService.ts

@@ -33,3 +33,23 @@ export async function createStatus(
 ) {
   return authAxios.post(`/project/${projectId}/status`, formData, axiosConfig);
 }
+
+/**
+ * 프로젝트 상태 수정 API
+ *
+ * @export
+ * @async
+ * @param {Project['projectId']} projectId      - 프로젝트 ID
+ * @param {ProjectStatus['statusId']} statusId  - 프로젝트 상태 ID
+ * @param {ProjectStatusForm} formData          - 상태 정보 객체
+ * @param {AxiosRequestConfig} [axiosConfig={}] - axios 요청 옵션 설정 객체
+ * @returns {Promise<AxiosResponse<void>>}
+ */
+export async function updateStatus(
+  projectId: Project['projectId'],
+  statusId: ProjectStatus['statusId'],
+  formData: ProjectStatusForm,
+  axiosConfig: AxiosRequestConfig = {},
+) {
+  return authAxios.patch(`/project/${projectId}/status/${statusId}`, formData, axiosConfig);
+}