Feat: #101 프로젝트 상태 생성 API를 위한 React Query 기능 추가

GU-99 · Sep 4, 2024 · b8a71f1 · b8a71f1
1 parent e47cfc4
commit b8a71f1
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 14 deletions.
diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx
@@ -15,7 +15,7 @@ import DuplicationCheckInput from '@components/common/DuplicationCheckInput';
 import useToast from '@hooks/useToast';
 import useAxios from '@hooks/useAxios';
 import { useTasksQuery } from '@hooks/query/useTaskQuery';
-import useStatusQuery from '@hooks/query/useStatusQuery';
+import { useReadStatuses } from '@hooks/query/useStatusQuery';
 import { convertBytesToString } from '@utils/converter';
 import { findUserByProject } from '@services/projectService';
 
@@ -44,7 +44,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
   const [preview, setPreview] = useState(false);
   const [files, setFiles] = useState<CustomFile[]>([]);
 
-  const { statusList, isStatusLoading } = useStatusQuery(projectId, taskId);
+  const { statusList, isStatusLoading } = useReadStatuses(projectId, taskId);
   const { taskNameList } = useTasksQuery(projectId);
   const { data, loading, clearData, fetchData } = useAxios(findUserByProject);
   const { toastInfo, toastWarn } = useToast();

diff --git a/src/hooks/query/useStatusQuery.ts b/src/hooks/query/useStatusQuery.ts
@@ -1,8 +1,11 @@
+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 { useQuery } from '@tanstack/react-query';
-import { getStatusList } from '@services/statusService';
+import { createStatus, getStatusList } from '@services/statusService';
+
 import type { Project } from '@/types/ProjectType';
-import type { ProjectStatus, UsableColor } from '@/types/ProjectStatusType';
+import type { ProjectStatus, ProjectStatusForm, UsableColor } from '@/types/ProjectStatusType';
 
 function getStatusNameList(statusList: ProjectStatus[], excludedName?: ProjectStatus['statusName']) {
   const statusNameList = statusList.map((projectStatus) => projectStatus.statusName);
@@ -46,7 +49,8 @@ function getUsableStatusColorList(
 }
 
 // ToDo: ProjectStatus 관련 Query 로직 작성하기
-export default function useStatusQuery(projectId: Project['projectId'], statusId?: ProjectStatus['statusId']) {
+// ToDo: React Query 로직과 initialValue, nameList 등을 구하는 로직이 사실 관련이 없는 것 같음. 분리 고려하기.
+export function useReadStatuses(projectId: Project['projectId'], statusId?: ProjectStatus['statusId']) {
   const {
     data: statusList = [],
     isLoading: isStatusLoading,
@@ -60,11 +64,21 @@ export default function useStatusQuery(projectId: Project['projectId'], statusId
     },
   });
 
-  const status = statusList.find((status) => status.statusId === statusId);
-  const initialValue = { name: status?.statusName || '', colorCode: status?.colorCode || '' };
-  const nameList = getStatusNameList(statusList, status?.statusName);
-  const colorList = getStatusColorList(statusList, status?.colorCode);
-  const usableColorList = getUsableStatusColorList(statusList, status?.colorCode);
+  const status = useMemo(() => statusList.find((status) => status.statusId === statusId), [statusList, statusId]);
+  const initialValue = useMemo(
+    () => ({
+      name: status?.statusName || '',
+      colorCode: status?.colorCode || '',
+      sortOrder: status?.sortOrder || statusList.length,
+    }),
+    [status],
+  );
+  const nameList = useMemo(() => getStatusNameList(statusList, status?.statusName), [statusList, status?.statusName]);
+  const colorList = useMemo(() => getStatusColorList(statusList, status?.colorCode), [statusList, status?.colorCode]);
+  const usableColorList = useMemo(
+    () => getUsableStatusColorList(statusList, status?.colorCode),
+    [statusList, status?.colorCode],
+  );
 
   return {
     statusList,
@@ -77,3 +91,20 @@ export default function useStatusQuery(projectId: Project['projectId'], statusId
     usableColorList,
   };
 }
+
+export function useCreateStatus(projectId: Project['projectId']) {
+  const { toastSuccess } = useToast();
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: (formData: ProjectStatusForm) => createStatus(projectId, formData),
+    onSuccess: () => {
+      toastSuccess('프로젝트 상태를 추가하였습니다.');
+      queryClient.invalidateQueries({
+        queryKey: ['projects', projectId, 'statuses'],
+      });
+    },
+  });
+
+  return mutation;
+}
diff --git a/src/services/statusService.ts b/src/services/statusService.ts
@@ -1,17 +1,35 @@
 import { authAxios } from '@services/axiosProvider';
-import type { AxiosRequestConfig } from 'axios';
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
 import type { Project } from '@/types/ProjectType';
-import type { ProjectStatus } from '@/types/ProjectStatusType';
+import type { ProjectStatus, ProjectStatusForm } from '@/types/ProjectStatusType';
 
 /**
  * 프로젝트 상태 목록 조회 API
  *
  * @export
  * @async
  * @param {Project['projectId']} projectId - 프로젝트 ID
- * @param {AxiosRequestConfig} axiosConfig - - axios 요청 옵션 설정 객체
+ * @param {AxiosRequestConfig} axiosConfig - axios 요청 옵션 설정 객체
  * @returns {Promise<AxiosResponse<ProjectStatus[]>>}
  */
 export async function getStatusList(projectId: Project['projectId'], axiosConfig: AxiosRequestConfig = {}) {
   return authAxios.get<ProjectStatus[]>(`/project/${projectId}/status`, axiosConfig);
 }
+
+/**
+ * 프로젝트 상태 생성 API
+ *
+ * @export
+ * @async
+ * @param {Project['projectId']} projectId - 프로젝트 ID
+ * @param {ProjectStatusForm} formData     - 상태 정보 객체
+ * @param {AxiosRequestConfig} axiosConfig - axios 요청 옵션 설정 객체
+ * @returns {Promise<AxiosResponse<void>>}
+ */
+export async function createStatus(
+  projectId: Project['projectId'],
+  formData: ProjectStatusForm,
+  axiosConfig: AxiosRequestConfig = {},
+) {
+  return authAxios.post(`/project/${projectId}/status`, formData, axiosConfig);
+}