diff --git a/src/components/modal/project-status/UpdateModalProjectStatus.tsx b/src/components/modal/project-status/UpdateModalProjectStatus.tsx index 1d969641..bc074aa0 100644 --- 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 ( - {isTaskLoading ? ( + {isTasksLoading ? ( ) : ( <> diff --git a/src/components/modal/task/DetailModalTask.tsx b/src/components/modal/task/DetailModalTask.tsx index afcbc880..01277d20 100644 --- 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 ( - {isStatusLoading || isTaskLoading || isAssigneeLoading || isTaskFileLoading || !task ? ( + {isStatusLoading || isTasksLoading || isAssigneeLoading || isTaskFileLoading || !statusTask ? ( ) : (
@@ -86,11 +86,11 @@ export default function DetailModalTask({

일정명

- {task.taskName} + {statusTask.taskName}

기간

- {getTaskPeriod(task)} + {getTaskPeriod(statusTask)}

수행자

@@ -105,7 +105,7 @@ export default function DetailModalTask({

일정 내용

- +
{taskFileList.length > 0 && (
diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx index 5f096f51..35d15b8e 100644 --- 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([]); 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 ; + if (isStatusLoading || isTasksLoading || isProjectUserRoleLoading) return ; return ( diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx index 7fea9e67..bdc2a728 100644 --- 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) => 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 ; - } - const handleFormSubmit: SubmitHandler = async (formData) => updateTaskInfoMutate(formData); const handleDetailClick = () => { @@ -142,7 +146,7 @@ export default function UpdateModalTask({ return ( - {isStatusLoading || isTaskLoading ? ( + {isStatusLoading || isTasksLoading ? ( ) : ( <> diff --git a/src/hooks/query/useTaskQuery.ts b/src/hooks/query/useTaskQuery.ts index d0e43e8e..cbf592d7 100644 --- 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,7 +81,13 @@ 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) @@ -98,9 +95,8 @@ export function useReadStatusTasks(projectId: Project['projectId'], taskId?: Tas .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 new file mode 100644 index 00000000..b734632e --- /dev/null +++ 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; +}