GU-99 · ice-bear98 · Oct 24, 2024 · Oct 24, 2024 · Oct 24, 2024 · Oct 24, 2024
diff --git a/src/components/modal/project-status/UpdateModalProjectStatus.tsx b/src/components/modal/project-status/UpdateModalProjectStatus.tsx
@@ -24,7 +24,7 @@ export default function UpdateModalProjectStatus({
 }: UpdateModalProjectStatusProps) {
   const updateStatusFormId = 'updateStatusForm';
 
-  const { statusTaskList, isTaskLoading } = useReadStatusTasks(project.projectId);
+  const { statusTaskList, isTasksLoading } = useReadStatusTasks(project.projectId);
   const { mutate: updateStatusMutate } = useUpdateStatus(project.projectId, statusId);
   const { mutate: deleteStatusMutate } = useDeleteStatus(project.projectId);
   const { toastWarn } = useToast();
@@ -50,7 +50,7 @@ export default function UpdateModalProjectStatus({
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        {isTaskLoading ? (
+        {isTasksLoading ? (
           <Spinner />
         ) : (
           <>

diff --git a/src/components/modal/task/DetailModalTask.tsx b/src/components/modal/task/DetailModalTask.tsx
@@ -9,7 +9,7 @@ import { downloadTaskFile } from '@services/taskService';
 import useAxios from '@hooks/useAxios';
 import useToast from '@hooks/useToast';
 import { useReadStatuses } from '@hooks/query/useStatusQuery';
-import { useDeleteTask, useReadAssignees, useReadStatusTasks, useReadTaskFiles } from '@hooks/query/useTaskQuery';
+import { useDeleteTask, useReadAssignees, useReadStatusTask, useReadTaskFiles } from '@hooks/query/useTaskQuery';
 
 import type { Task } from '@/types/TaskType';
 import type { Project } from '@/types/ProjectType';
@@ -32,7 +32,7 @@ export default function DetailModalTask({
 }: ViewModalTaskProps) {
   const { mutate: deleteTaskMutate } = useDeleteTask(projectId);
   const { status, isStatusLoading } = useReadStatuses(projectId, statusId);
-  const { task, isTaskLoading } = useReadStatusTasks(projectId, taskId);
+  const { statusTask, isTasksLoading } = useReadStatusTask(projectId, taskId);
   const { assigneeList, isAssigneeLoading } = useReadAssignees(projectId, taskId);
   const { taskFileList, isTaskFileLoading } = useReadTaskFiles(projectId, taskId);
   const { fetchData } = useAxios(downloadTaskFile);
@@ -73,7 +73,7 @@ export default function DetailModalTask({
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        {isStatusLoading || isTaskLoading || isAssigneeLoading || isTaskFileLoading || !task ? (
+        {isStatusLoading || isTasksLoading || isAssigneeLoading || isTaskFileLoading || !statusTask ? (
           <Spinner />
         ) : (
           <article className="flex h-full flex-col justify-center gap-20">
@@ -86,11 +86,11 @@ export default function DetailModalTask({
               </div>
               <div className="flex gap-10">
                 <h2 className="w-50 shrink-0 text-large font-bold">일정명</h2>
-                <span>{task.taskName}</span>
+                <span>{statusTask.taskName}</span>
               </div>
               <div className="flex gap-10">
                 <h2 className="w-50 shrink-0 text-large font-bold">기간</h2>
-                <span>{getTaskPeriod(task)}</span>
+                <span>{getTaskPeriod(statusTask)}</span>
               </div>
               <div className="flex gap-10">
                 <h2 className="w-50 shrink-0 text-large font-bold">수행자</h2>
@@ -105,7 +105,7 @@ export default function DetailModalTask({
               </div>
               <div>
                 <h2 className="my-5 text-large font-bold">일정 내용</h2>
-                <CustomMarkdown markdown={task.content} />
+                <CustomMarkdown markdown={statusTask.content} />
               </div>
               {taskFileList.length > 0 && (
                 <div>

diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx
@@ -27,6 +27,7 @@ import type { Project } from '@/types/ProjectType';
 import type { CustomFile } from '@/types/FileType';
 import type { Task, TaskForm } from '@/types/TaskType';
 import type { ProjectSearchCallback } from '@/types/SearchCallbackType';
+import { getTaskNameList } from '@/utils/extractNameList';
 
 type ModalTaskFormProps = {
   formId: string;
@@ -44,7 +45,9 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
   const [files, setFiles] = useState<CustomFile[]>([]);
 
   const { statusList, isStatusLoading } = useReadStatuses(projectId, taskId);
-  const { taskNameList, isTaskLoading } = useReadStatusTasks(projectId);
+  const { statusTaskList, isTasksLoading } = useReadStatusTasks(projectId);
+  const taskNameList = useMemo(() => getTaskNameList(statusTaskList), [statusTaskList]);
+
   const { projectUserRoleList, isProjectUserRoleLoading } = useReadProjectUserRoleList(projectId);
   const { data: userList = [], loading, clearData, fetchData } = useAxios(findUserByProject);
   const { isValidTaskFile } = useTaskFile(project.projectId);
@@ -136,7 +139,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
     setFiles(filteredFiles);
   };
 
-  if (isStatusLoading || isTaskLoading || isProjectUserRoleLoading) return <Spinner />;
+  if (isStatusLoading || isTasksLoading || isProjectUserRoleLoading) return <Spinner />;
 
   return (
     <FormProvider {...methods}>

diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx
@@ -17,17 +17,19 @@ import useAxios from '@hooks/useAxios';
 import useToast from '@hooks/useToast';
 import useTaskFile from '@hooks/useTaskFile';
 import { useReadStatuses } from '@hooks/query/useStatusQuery';
+import { useReadProjectUserRoleList } from '@hooks/query/useProjectQuery';
 import {
   useAddAssignee,
   useDeleteAssignee,
   useDeleteTaskFile,
   useReadAssignees,
+  useReadStatusTask,
   useReadStatusTasks,
   useReadTaskFiles,
   useUpdateTaskInfo,
 } from '@hooks/query/useTaskQuery';
-import { useReadProjectUserRoleList } from '@hooks/query/useProjectQuery';
 import { findUserByProject } from '@services/projectService';
+import { getTaskNameList } from '@utils/extractNameList';
 
 import type { SubmitHandler } from 'react-hook-form';
 import type { SearchUser } from '@/types/UserType';
@@ -60,8 +62,14 @@ export default function UpdateModalTask({
     [fetchData],
   );
 
+  const { statusTaskList, isTasksLoading } = useReadStatusTasks(projectId);
+  const { statusTask } = useReadStatusTask(projectId, taskId);
+  const taskNameList = useMemo(
+    () => getTaskNameList(statusTaskList, statusTask?.taskName),
+    [statusTaskList, statusTask?.taskName],
+  );
+
   const { statusList, isStatusLoading } = useReadStatuses(projectId, taskId);
-  const { task, taskNameList, isTaskLoading } = useReadStatusTasks(projectId, taskId);
   const { projectUserRoleList, isProjectUserRoleLoading } = useReadProjectUserRoleList(projectId);
   const { assigneeList, isAssigneeLoading } = useReadAssignees(projectId, taskId);
   const { taskFileList, isTaskFileLoading } = useReadTaskFiles(projectId, taskId);
@@ -81,16 +89,16 @@ export default function UpdateModalTask({
   } = methods;
 
   useEffect(() => {
-    if (task) {
+    if (statusTask) {
       reset({
-        statusId: task.statusId.toString(),
-        taskName: task.taskName,
-        content: task.content,
-        startDate: task.startDate,
-        endDate: task.endDate,
+        statusId: statusTask.statusId.toString(),
+        taskName: statusTask.taskName,
+        content: statusTask.content,
+        startDate: statusTask.startDate,
+        endDate: statusTask.endDate,
       });
     }
-  }, [task, reset]);
+  }, [statusTask, reset]);
 
   const handleKeywordChange = (e: React.ChangeEvent<HTMLInputElement>) => setKeyword(e.target.value.trim());
 
@@ -128,10 +136,6 @@ export default function UpdateModalTask({
 
   const handleFileDeleteClick = (fileId: string) => deleteTaskFileMutate(Number(fileId));
 
-  if (isStatusLoading || isTaskLoading || isProjectUserRoleLoading || isTaskFileLoading || isAssigneeLoading) {
-    return <Spinner />;
-  }
-
   const handleFormSubmit: SubmitHandler<TaskUpdateForm> = async (formData) => updateTaskInfoMutate(formData);
 
   const handleDetailClick = () => {
@@ -142,7 +146,7 @@ export default function UpdateModalTask({
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        {isStatusLoading || isTaskLoading ? (
+        {isStatusLoading || isTasksLoading ? (
           <Spinner />
         ) : (
           <>

diff --git a/src/hooks/query/useTaskQuery.ts b/src/hooks/query/useTaskQuery.ts
@@ -30,16 +30,7 @@ import type {
   TaskUpdateForm,
   TaskUploadForm,
 } from '@/types/TaskType';
-import { TaskFile } from '@/types/FileType';
-
-function getTaskNameList(taskList: TaskListWithStatus[], excludedTaskName?: Task['taskName']) {
-  const taskNameList = taskList
-    .map((statusTask) => statusTask.tasks)
-    .flat()
-    .map((task) => task.taskName);
-
-  return excludedTaskName ? taskNameList.filter((taskName) => taskName !== excludedTaskName) : taskNameList;
-}
+import type { TaskFile } from '@/types/FileType';
 
 // 일정 생성
 export function useCreateStatusTask(projectId: Project['projectId']) {
@@ -76,12 +67,12 @@ export function useUploadTaskFile(projectId: Project['projectId']) {
 }
 
 // 상태별 일정 목록 조회
-export function useReadStatusTasks(projectId: Project['projectId'], taskId?: Task['taskId']) {
+export function useReadStatusTasks(projectId: Project['projectId']) {
   const {
     data: statusTaskList = [],
-    isLoading: isTaskLoading,
-    isError: isTaskError,
-    error: taskError,
+    isLoading: isTasksLoading,
+    isError: isTasksError,
+    error: tasksError,
   } = useQuery({
     queryKey: generateTasksQueryKey(projectId),
     queryFn: async () => {
@@ -90,17 +81,22 @@ export function useReadStatusTasks(projectId: Project['projectId'], taskId?: Tas
     },
   });
 
-  const task = useMemo(
+  return { statusTaskList, isTasksLoading, isTasksError, tasksError };
+}
+
+export function useReadStatusTask(projectId: Project['projectId'], taskId: Task['taskId']) {
+  const { statusTaskList, isTasksLoading, isTasksError, tasksError } = useReadStatusTasks(projectId);
+
+  const statusTask = useMemo(
     () =>
       statusTaskList
         .map((statusTask) => statusTask.tasks)
         .flat()
         .find((task) => task.taskId === taskId),
     [statusTaskList, taskId],
   );
-  const taskNameList = useMemo(() => getTaskNameList(statusTaskList, task?.taskName), [statusTaskList, task?.taskName]);
 
-  return { task, statusTaskList, taskNameList, isTaskLoading, isTaskError, taskError };
+  return { statusTask, isTasksLoading, isTasksError, tasksError };
 }
 
 // 일정 목록 순서 변경

diff --git a/src/utils/extractNameList.ts b/src/utils/extractNameList.ts
@@ -0,0 +1,7 @@
+import type { Task, TaskListWithStatus } from '@/types/TaskType';
+
+export function getTaskNameList(taskList: TaskListWithStatus[], excludedTaskName?: Task['taskName']) {
+  const taskNameList = taskList.flatMap((statusTask) => statusTask.tasks).map((task) => task.taskName);
+
+  return excludedTaskName ? taskNameList.filter((taskName) => taskName !== excludedTaskName) : taskNameList;
+}