Fix: #163 일정 수정 모달에서 상태 선택 정보가 사라지는 문제 해결 (#164)

* Fix: #163 타입 호환을 위한 새로운 타입 정의 (TaskUpdateForm)

* Fix: #163 TaskUpdateForm 추가로 인한 타입 정보 처리 수정

src/components/common/StatusRadio.tsx

@@ -22,7 +22,7 @@ export default function StatusRadio({ statusFieldName, statusList }: StatusRadio
       <div className="flex items-center justify-start gap-4">
         {statusList.map((status) => {
           const { statusId, statusName, colorCode } = status;
-          const isChecked = Number(watch('statusId')) === statusId;
+          const isChecked = Number(watch(statusFieldName)) === statusId;
           return (
             <label
               key={statusId}

src/components/modal/task/UpdateModalTask.tsx

@@ -29,7 +29,7 @@ import { findUserByProject } from '@services/projectService';
 
 import type { SubmitHandler } from 'react-hook-form';
 import type { SearchUser } from '@/types/UserType';
-import type { Task, TaskInfoForm } from '@/types/TaskType';
+import type { Task, TaskUpdateForm } from '@/types/TaskType';
 import type { Project } from '@/types/ProjectType';
 import type { ProjectSearchCallback } from '@/types/SearchCallbackType';
 
@@ -60,7 +60,7 @@ export default function UpdateModalTask({ project, taskId, onClose: handleClose
   const { mutate: addAssigneeMutate } = useAddAssignee(projectId, taskId);
   const { mutate: deleteAssigneeMutate } = useDeleteAssignee(projectId, taskId);
 
-  const methods = useForm<TaskInfoForm>({ mode: 'onChange' });
+  const methods = useForm<TaskUpdateForm>({ mode: 'onChange' });
   const {
     register,
     watch,
@@ -72,7 +72,7 @@ export default function UpdateModalTask({ project, taskId, onClose: handleClose
   useEffect(() => {
     if (task) {
       reset({
-        statusId: task.statusId,
+        statusId: task.statusId.toString(),
         name: task.name,
         content: task.content,
         startDate: task.startDate,
@@ -130,7 +130,7 @@ export default function UpdateModalTask({ project, taskId, onClose: handleClose
     return <Spinner />;
   }
 
-  const handleFormSubmit: SubmitHandler<TaskInfoForm> = async (formData) => {
+  const handleFormSubmit: SubmitHandler<TaskUpdateForm> = async (formData) => {
     updateTaskInfoMutate(formData);
     handleClose();
   };

src/hooks/query/useTaskQuery.ts

@@ -14,7 +14,14 @@ import useToast from '@hooks/useToast';
 
 import type { User } from '@/types/UserType';
 import type { Project } from '@/types/ProjectType';
-import type { Task, TaskCreationForm, TaskInfoForm, TaskListWithStatus, TaskOrder } from '@/types/TaskType';
+import type {
+  Task,
+  TaskCreationForm,
+  TaskInfoForm,
+  TaskListWithStatus,
+  TaskOrder,
+  TaskUpdateForm,
+} from '@/types/TaskType';
 
 function getTaskNameList(taskList: TaskListWithStatus[], excludedTaskName?: Task['name']) {
   const taskNameList = taskList
@@ -146,7 +153,7 @@ export function useUpdateTaskInfo(projectId: Project['projectId'], taskId: Task[
   const queryKey = ['projects', projectId, 'tasks'];
 
   const mutation = useMutation({
-    mutationFn: (formData: TaskInfoForm) => updateTaskInfo(projectId, taskId, formData),
+    mutationFn: (formData: TaskUpdateForm) => updateTaskInfo(projectId, taskId, formData),
     onError: () => toastError('일정 정보 수정에 실패 했습니다. 잠시후 다시 시도해주세요.'),
     onSuccess: () => {
       toastSuccess('일정 정보를 수정 했습니다.');

src/mocks/services/taskServiceHandler.ts

@@ -11,7 +11,7 @@ import {
 import { getRoleHash, getStatusHash, getTaskHash, getUserHash } from '@mocks/mockHash';
 
 import type { UserWithRole } from '@/types/UserType';
-import type { TaskAssigneeForm, TaskCreationForm, TaskInfoForm, TaskOrderForm } from '@/types/TaskType';
+import type { TaskAssigneeForm, TaskCreationForm, TaskInfoForm, TaskOrderForm, TaskUpdateForm } from '@/types/TaskType';
 
 const BASE_URL = import.meta.env.VITE_BASE_URL;
 
@@ -126,8 +126,7 @@ const taskServiceHandler = [
   http.patch(`${BASE_URL}/project/:projectId/task/:taskId`, async ({ request, params }) => {
     const accessToken = request.headers.get('Authorization');
     const { projectId, taskId } = params;
-    const taskInfoData = (await request.json()) as TaskInfoForm;
-    taskInfoData.statusId = Number(taskInfoData.statusId);
+    const taskInfoData = (await request.json()) as TaskUpdateForm;
 
     if (!accessToken) return new HttpResponse(null, { status: 401 });
 
@@ -145,7 +144,8 @@ const taskServiceHandler = [
     if (!isIncludedTask) return new HttpResponse(null, { status: 404 });
 
     const index = TASK_DUMMY.findIndex((task) => task.taskId === Number(taskId));
-    if (index !== -1) TASK_DUMMY[index] = { ...TASK_DUMMY[index], ...taskInfoData };
+    if (index !== -1)
+      TASK_DUMMY[index] = { ...TASK_DUMMY[index], ...taskInfoData, statusId: Number(taskInfoData.statusId) };
 
     return new HttpResponse(null, { status: 200 });
   }),

src/services/taskService.ts

@@ -4,7 +4,7 @@ import type { AxiosRequestConfig } from 'axios';
 import type { TaskFile } from '@/types/FileType';
 import type { Project } from '@/types/ProjectType';
 import type { User, UserWithRole } from '@/types/UserType';
-import type { Task, TaskCreationForm, TaskInfoForm, TaskListWithStatus, TaskOrderForm } from '@/types/TaskType';
+import type { Task, TaskCreationForm, TaskUpdateForm, TaskListWithStatus, TaskOrderForm } from '@/types/TaskType';
 
 /**
  * 프로젝트에 속한 모든 일정 목록 조회 API
@@ -97,14 +97,14 @@ export async function findTaskFiles(
  * @async
  * @param {Project['projectId']} projectId      - 프로젝트 ID
  * @param {Task['taskId']} taskId               - 일정 ID
- * @param {TaskInfoForm} formData               - 일정 수정 정보 객체
+ * @param {TaskUpdateForm} formData               - 일정 수정 정보 객체
  * @param {AxiosRequestConfig} [axiosConfig={}] - axios 요청 옵션 설정 객체
  * @returns {Promise<AxiosResponse<void>>}
  */
 export async function updateTaskInfo(
   projectId: Project['projectId'],
   taskId: Task['taskId'],
-  formData: TaskInfoForm,
+  formData: TaskUpdateForm,
   axiosConfig: AxiosRequestConfig = {},
 ) {
   return authAxios.patch(`/project/${projectId}/task/${taskId}`, formData, axiosConfig);

src/types/TaskType.tsx

@@ -26,6 +26,7 @@ export type TaskInfoForm = Omit<Task, 'taskId'>;
 export type TaskFileForm = { files: File[] };
 export type TaskAssigneeForm = { userId: User['userId'] };
 export type TaskAssigneesForm = { assignees: User['userId'][] };
+export type TaskUpdateForm = Omit<Task, 'statusId'> & { statusId: string };
 export type TaskCreationForm = TaskInfoForm & TaskAssigneesForm;
 export type TaskForm = TaskInfoForm & TaskAssigneesForm & TaskFileForm;