Feat: #169 상태 삭제 API를 위한 React Query 기능 추가

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

Hide file tree

Showing 2 changed files with 50 additions and 6 deletions.
diff --git a/src/hooks/query/useStatusQuery.ts b/src/hooks/query/useStatusQuery.ts
@@ -2,8 +2,9 @@ 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, updateStatus, updateStatusesOrder } from '@services/statusService';
+import { createStatus, deleteStatus, getStatusList, updateStatus, updateStatusesOrder } from '@services/statusService';
 import { generateProjectQueryKey, generateStatusesQueryKey, generateTasksQueryKey } from '@utils/queryKeyGenergator';
+import { tasksQueryKeys } from '../../../.history/src/constants/queryKey_20240928222918';
 
 import type { Project } from '@/types/ProjectType';
 import type { TaskListWithStatus } from '@/types/TaskType';
@@ -50,7 +51,7 @@ function getUsableStatusColorList(
   return [...statusColorMap.values()];
 }
 
-// ToDo: ProjectStatus 관련 Query 로직 작성하기
+// 프로젝트 상태 목록 조회
 // ToDo: React Query 로직과 initialValue, nameList 등을 구하는 로직이 사실 관련이 없는 것 같음. 분리 고려하기.
 export function useReadStatuses(projectId: Project['projectId'], statusId?: ProjectStatus['statusId']) {
   const {
@@ -95,14 +96,16 @@ export function useReadStatuses(projectId: Project['projectId'], statusId?: Proj
   };
 }
 
+// 프로젝트 상태 생성
 export function useCreateStatus(projectId: Project['projectId']) {
-  const { toastSuccess } = useToast();
+  const { toastSuccess, toastError } = useToast();
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
     mutationFn: (formData: ProjectStatusForm) => createStatus(projectId, formData),
+    onError: () => toastError('프로젝트 상태 등록을 실패 했습니다.  잠시후 다시 등록해주세요.'),
     onSuccess: () => {
-      toastSuccess('프로젝트 상태를 추가하였습니다.');
+      toastSuccess('프로젝트 상태를 등록하였습니다.');
       queryClient.invalidateQueries({
         queryKey: generateProjectQueryKey(projectId),
       });
@@ -112,12 +115,14 @@ export function useCreateStatus(projectId: Project['projectId']) {
   return mutation;
 }
 
+// 프로젝트 상태 수정
 export function useUpdateStatus(projectId: Project['projectId'], statusId: ProjectStatus['statusId']) {
-  const { toastSuccess } = useToast();
+  const { toastSuccess, toastError } = useToast();
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
     mutationFn: (formData: ProjectStatusForm) => updateStatus(projectId, statusId, formData),
+    onError: () => toastError('프로젝트 상태 수정에 실패 했습니다. 잠시후 다시 시도해주세요.'),
     onSuccess: () => {
       toastSuccess('프로젝트 상태를 수정했습니다.');
       queryClient.invalidateQueries({
@@ -129,6 +134,27 @@ export function useUpdateStatus(projectId: Project['projectId'], statusId: Proje
   return mutation;
 }
 
+// 프로젝트 상태 삭제
+export function useDeleteStatus(projectId: Project['projectId']) {
+  const { toastError, toastSuccess } = useToast();
+  const queryClient = useQueryClient();
+  const tasksQueryKeys = generateTasksQueryKey(projectId);
+  const statusesQueryKey = generateStatusesQueryKey(projectId);
+
+  const mutation = useMutation({
+    mutationFn: (statusId: ProjectStatus['statusId']) => deleteStatus(projectId, statusId),
+    onError: () => toastError('프로젝트 상태 삭제에 실패 했습니다. 잠시후 다시 시도해주세요.'),
+    onSuccess: () => {
+      toastSuccess('프로젝트 상태를 삭제 했습니다.');
+      queryClient.invalidateQueries({ queryKey: tasksQueryKeys, exact: true });
+      queryClient.invalidateQueries({ queryKey: statusesQueryKey, exact: true });
+    },
+  });
+
+  return mutation;
+}
+
+// 상태 목록 순서 정렬
 export function useUpdateStatusesOrder(projectId: Project['projectId']) {
   const { toastError } = useToast();
   const queryClient = useQueryClient();
@@ -149,7 +175,7 @@ export function useUpdateStatusesOrder(projectId: Project['projectId']) {
       return { previousStatusTaskList };
     },
     onError: (error, newStatusTaskList, context) => {
-      toastError('프로젝트 상태 순서 변경에 실패 하였습니다. 잠시후 다시 진행해주세요.');
+      toastError('프로젝트 상태 순서 변경에 실패 했습니다. 잠시후 다시 진행해주세요.');
       queryClient.setQueryData(TasksQueryKey, context?.previousStatusTaskList);
     },
     onSuccess: () => {

diff --git a/src/services/statusService.ts b/src/services/statusService.ts
@@ -55,6 +55,24 @@ export async function updateStatus(
   return authAxios.patch(`/project/${projectId}/status/${statusId}`, formData, axiosConfig);
 }
 
+/**
+ * 프로젝트 상태 삭제 API
+ *
+ * @export
+ * @async
+ * @param {Project['projectId']} projectId      - 프로젝트 ID
+ * @param {ProjectStatus['statusId']} statusId  - 프로젝트 상태 ID
+ * @param {AxiosRequestConfig} [axiosConfig={}] - axios 요청 옵션 설정 객체
+ * @returns {Promise<AxiosResponse<void>>}
+ */
+export async function deleteStatus(
+  projectId: Project['projectId'],
+  statusId: ProjectStatus['statusId'],
+  axiosConfig: AxiosRequestConfig = {},
+) {
+  return authAxios.delete(`/project/${projectId}/status/${statusId}`, axiosConfig);
+}
+
 /**
  * 상태 순서 변경 API
  *