Feat: #134 일정 수행자 조회 기능 추가

src/components/modal/task/DetailModalTask.tsx

@@ -0,0 +1,109 @@
+import { useMemo } from 'react';
+import { LuDownload } from 'react-icons/lu';
+import ModalPortal from '@components/modal/ModalPortal';
+import ModalLayout from '@layouts/ModalLayout';
+import Spinner from '@components/common/Spinner';
+import RoleIcon from '@components/common/RoleIcon';
+import CustomMarkdown from '@components/common/CustomMarkdown';
+import { useReadAssignees } from '@hooks/query/useTaskQuery';
+import { useReadStatuses } from '@hooks/query/useStatusQuery';
+
+import type { Task } from '@/types/TaskType';
+import type { Project } from '@/types/ProjectType';
+
+type ViewModalTaskProps = {
+  project: Project;
+  task: Task;
+  onClose: () => void;
+};
+
+export default function DetailModalTask({ project, task, onClose: handleClose }: ViewModalTaskProps) {
+  // ToDo: 다운로드 파일 목록 가져오기
+  const { status, isStatusLoading } = useReadStatuses(project.projectId, task.statusId);
+  const { assigneeList, isAssigneeLoading } = useReadAssignees(project.projectId, task.taskId);
+
+  const { name, startDate, endDate } = task;
+  const period = useMemo(
+    () => (endDate && startDate !== endDate ? `${startDate} - ${endDate}` : startDate),
+    [startDate, endDate],
+  );
+
+  return (
+    <ModalPortal>
+      <ModalLayout onClose={handleClose}>
+        {isStatusLoading || isAssigneeLoading ? (
+          <Spinner />
+        ) : (
+          <article className="flex h-full flex-col justify-between">
+            <section className="grow space-y-5">
+              <div className="mb-10 flex items-center justify-start">
+                <div className="flex items-center rounded-lg border border-input bg-white px-5 py-3">
+                  <div style={{ borderColor: status?.colorCode }} className="mr-3 size-8 rounded-full border" />
+                  <p className="text-xs">{status?.statusName}</p>
+                </div>
+              </div>
+              <div className="flex gap-10">
+                <h2 className="w-50 shrink-0 text-large font-bold">일정명</h2>
+                <span>{name}</span>
+              </div>
+              <div className="flex gap-10">
+                <h2 className="w-50 shrink-0 text-large font-bold">기간</h2>
+                <span>{period}</span>
+              </div>
+              <div className="flex gap-10">
+                <h2 className="w-50 shrink-0 text-large font-bold">수행자</h2>
+                <ul className="flex flex-wrap gap-5">
+                  {assigneeList?.map(({ userId, nickname, roleName }) => (
+                    <li key={userId} className="flex items-center space-x-4 rounded-md bg-button px-5">
+                      <RoleIcon roleName={roleName} />
+                      <div>{nickname}</div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div>
+                <h2 className="my-5 text-large font-bold">일정 내용</h2>
+                <CustomMarkdown markdown={task.content} />
+              </div>
+              <div>
+                <h2 className="my-5 text-large font-bold">파일 다운로드</h2>
+                <ul className="mb-10 flex flex-wrap gap-5">
+                  <li
+                    className="flex cursor-pointer items-center gap-5 rounded-md bg-button px-4 py-2"
+                    aria-label="file download"
+                  >
+                    <a href="/" download>
+                      최종.pdf
+                    </a>
+                    <LuDownload />
+                  </li>
+                  <li
+                    className="flex cursor-pointer items-center gap-5 rounded-md bg-button px-4 py-2"
+                    aria-label="file download"
+                  >
+                    <a href="/" download>
+                      진짜 최종.pdf
+                    </a>
+                    <LuDownload />
+                  </li>
+                  <li
+                    className="flex cursor-pointer items-center gap-5 rounded-md bg-button px-4 py-2"
+                    aria-label="file download"
+                  >
+                    <a href="/" download>
+                      진짜 지인짜 최종.pdf
+                    </a>
+                    <LuDownload />
+                  </li>
+                </ul>
+              </div>
+            </section>
+            <button type="submit" className="h-25 w-full rounded-md bg-main px-10 text-white">
+              수정
+            </button>
+          </article>
+        )}
+      </ModalLayout>
+    </ModalPortal>
+  );
+}

src/components/modal/task/ModalTaskForm.tsx

@@ -53,7 +53,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
     defaultValues: {
       name: '',
       content: '',
-      userId: [],
+      assignees: [],
       startDate: DateTime.fromJSDate(new Date()).toFormat('yyyy-LL-dd'),
       endDate: DateTime.fromJSDate(new Date()).toFormat('yyyy-LL-dd'),
       statusId: statusList[0]?.statusId,
@@ -109,7 +109,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
     const updatedAssignees = [...assignees, user];
     const assigneesIdList = updatedAssignees.map((worker) => worker.userId);
     setAssignees(updatedAssignees);
-    setValue('userId', assigneesIdList);
+    setValue('assignees', assigneesIdList);
     setKeyword('');
     clearData();
   };
@@ -118,7 +118,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
     const filteredAssignees = assignees.filter((assignee) => assignee.userId !== user.userId);
     const assigneesIdList = filteredAssignees.map((assignee) => assignee.userId);
     setAssignees(filteredAssignees);
-    setValue('userId', assigneesIdList);
+    setValue('assignees', assigneesIdList);
   };
 
   const updateFiles = (newFiles: FileList) => {

src/hooks/query/useTaskQuery.ts

@@ -1,8 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { createTask, findTaskList, updateTaskOrder } from '@services/taskService';
+import { createTask, findAssignees, findTaskList, updateTaskOrder } from '@services/taskService';
 import useToast from '@hooks/useToast';
 
-import type { TaskForm, TaskListWithStatus, TaskOrder } from '@/types/TaskType';
+import type { Task, TaskForm, TaskListWithStatus, TaskOrder } from '@/types/TaskType';
 import type { Project } from '@/types/ProjectType';
 
 function getTaskNameList(taskList: TaskListWithStatus[]) {
@@ -15,6 +15,8 @@ function getTaskNameList(taskList: TaskListWithStatus[]) {
 }
 
 // Todo: Task Query UD로직 작성하기
+
+// 일정 생성
 export function useCreateStatusTask(projectId: Project['projectId']) {
   const { toastSuccess } = useToast();
   const queryClient = useQueryClient();
@@ -31,6 +33,7 @@ export function useCreateStatusTask(projectId: Project['projectId']) {
   return mutation;
 }
 
+// 상태별 일정 목록 조회
 export function useReadStatusTasks(projectId: Project['projectId']) {
   const {
     data: statusTaskList = [],
@@ -50,6 +53,7 @@ export function useReadStatusTasks(projectId: Project['projectId']) {
   return { statusTaskList, taskNameList, isTaskLoading, isTaskError, taskError };
 }
 
+// 일정 목록 순서 변경
 export function useUpdateTasksOrder(projectId: Project['projectId']) {
   const { toastError } = useToast();
   const queryClient = useQueryClient();
@@ -81,3 +85,21 @@ export function useUpdateTasksOrder(projectId: Project['projectId']) {
 
   return mutation;
 }
+
+// 일정 수행자 목록 조회
+export function useReadAssignees(projectId: Project['projectId'], taskId: Task['taskId']) {
+  const {
+    data: assigneeList,
+    isLoading: isAssigneeLoading,
+    error: assigneeError,
+    isError: isAssigneeError,
+  } = useQuery({
+    queryKey: ['projects', projectId, 'tasks', taskId, 'assignees'],
+    queryFn: async () => {
+      const { data } = await findAssignees(projectId, taskId);
+      return data;
+    },
+  });
+
+  return { assigneeList, isAssigneeLoading, assigneeError, isAssigneeError };
+}