From df0b1daa1ffcadd5b07d70943715341c401957ca Mon Sep 17 00:00:00 2001
From: Seok93 <gkdltjr@naver.com>
Date: Fri, 11 Oct 2024 18:29:22 +0900
Subject: [PATCH 1/9] =?UTF-8?q?Feat:=20#204=20=EC=9D=BC=EC=A0=95=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95=ED=9B=84=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=EC=9D=84=20=EB=8B=AB=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/task/UpdateModalTask.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx
index 628ac7ac..7c4ab344 100644
--- a/src/components/modal/task/UpdateModalTask.tsx
+++ b/src/components/modal/task/UpdateModalTask.tsx
@@ -126,10 +126,8 @@ export default function UpdateModalTask({ project, taskId, onClose: handleClose
     return <Spinner />;
   }
 
-  const handleFormSubmit: SubmitHandler<TaskUpdateForm> = async (formData) => {
-    updateTaskInfoMutate(formData);
-    handleClose();
-  };
+  const handleFormSubmit: SubmitHandler<TaskUpdateForm> = async (formData) => updateTaskInfoMutate(formData);
+
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>

From c48f3998217b4bacac85189d24be0107c8dce702 Mon Sep 17 00:00:00 2001
From: Seok93 <gkdltjr@naver.com>
Date: Fri, 11 Oct 2024 19:02:09 +0900
Subject: [PATCH 2/9] =?UTF-8?q?Feat:=20ModalButton=EC=9D=98=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20text=20=EC=83=89=EC=83=81=20props=EB=A1=9C=20?=
 =?UTF-8?q?=EC=A0=84=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/ModalButton.tsx                      | 5 +++--
 .../modal/project-status/CreateModalProjectStatus.tsx     | 2 +-
 .../modal/project-status/UpdateModalProjectStatus.tsx     | 4 ++--
 src/components/modal/project/CreateModalProject.tsx       | 2 +-
 src/components/modal/project/UpdateModalProject.tsx       | 7 ++++++-
 src/components/modal/task/CreateModalTask.tsx             | 2 +-
 src/components/modal/task/DetailModalTask.tsx             | 8 ++++++--
 src/components/modal/task/UpdateModalTask.tsx             | 5 ++++-
 src/components/modal/team/CreateModalTeam.tsx             | 2 +-
 src/components/modal/team/UpdateModalTeam.tsx             | 2 +-
 10 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/modal/ModalButton.tsx b/src/components/modal/ModalButton.tsx
index f550ba86..636f3ce5 100644
--- a/src/components/modal/ModalButton.tsx
+++ b/src/components/modal/ModalButton.tsx
@@ -1,17 +1,18 @@
 type ModalButtonProps = React.PropsWithChildren<{
   formId?: string;
+  color: 'text-white' | 'text-emphasis' | 'text-default';
   backgroundColor: 'bg-main' | 'bg-delete' | 'bg-sub' | 'bg-button' | 'bg-kakao';
   onClick?: () => void;
 }>;
 
-export default function ModalButton({ formId, backgroundColor, onClick, children }: ModalButtonProps) {
+export default function ModalButton({ formId, color, backgroundColor, onClick, children }: ModalButtonProps) {
   const handleClick = () => onClick && onClick();
 
   return (
     <button
       type={formId ? 'submit' : 'button'}
       form={formId}
-      className={`h-25 w-full rounded-md px-10 text-white outline-none ${backgroundColor} hover:brightness-90`}
+      className={`h-25 w-full rounded-md px-10 font-bold outline-none ${color} ${backgroundColor} hover:brightness-90`}
       onClick={handleClick}
     >
       {children}
diff --git a/src/components/modal/project-status/CreateModalProjectStatus.tsx b/src/components/modal/project-status/CreateModalProjectStatus.tsx
index 0d1a5b22..9f0c5816 100644
--- a/src/components/modal/project-status/CreateModalProjectStatus.tsx
+++ b/src/components/modal/project-status/CreateModalProjectStatus.tsx
@@ -27,7 +27,7 @@ export default function CreateModalProjectStatus({ project, onClose: handleClose
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
         <ModalProjectStatusForm formId={createStatusFormId} project={project} onSubmit={handleSubmit} />
-        <ModalButton formId={createStatusFormId} backgroundColor="bg-main">
+        <ModalButton formId={createStatusFormId} color="text-white" backgroundColor="bg-main">
           등록
         </ModalButton>
       </ModalLayout>
diff --git a/src/components/modal/project-status/UpdateModalProjectStatus.tsx b/src/components/modal/project-status/UpdateModalProjectStatus.tsx
index 4dcb1c77..1d969641 100644
--- a/src/components/modal/project-status/UpdateModalProjectStatus.tsx
+++ b/src/components/modal/project-status/UpdateModalProjectStatus.tsx
@@ -61,10 +61,10 @@ export default function UpdateModalProjectStatus({
               onSubmit={handleSubmit}
             />
             <div className="flex min-h-25 w-4/5 gap-10">
-              <ModalButton formId={updateStatusFormId} backgroundColor="bg-main">
+              <ModalButton formId={updateStatusFormId} color="text-white" backgroundColor="bg-main">
                 수정
               </ModalButton>
-              <ModalButton backgroundColor="bg-delete" onClick={() => handleDeleteClick(statusId)}>
+              <ModalButton color="text-white" backgroundColor="bg-delete" onClick={() => handleDeleteClick(statusId)}>
                 삭제
               </ModalButton>
             </div>
diff --git a/src/components/modal/project/CreateModalProject.tsx b/src/components/modal/project/CreateModalProject.tsx
index 5bb44f9a..bcc0672a 100644
--- a/src/components/modal/project/CreateModalProject.tsx
+++ b/src/components/modal/project/CreateModalProject.tsx
@@ -22,7 +22,7 @@ export default function CreateModalProject({ onClose: handleClose }: CreateModal
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
         <ModalProjectForm formId={createProjectFormId} onSubmit={handleSubmit} />
-        <ModalButton formId={createProjectFormId} backgroundColor="bg-main">
+        <ModalButton formId={createProjectFormId} color="text-white" backgroundColor="bg-main">
           등록
         </ModalButton>
       </ModalLayout>
diff --git a/src/components/modal/project/UpdateModalProject.tsx b/src/components/modal/project/UpdateModalProject.tsx
index 90c1ddda..7419aba8 100644
--- a/src/components/modal/project/UpdateModalProject.tsx
+++ b/src/components/modal/project/UpdateModalProject.tsx
@@ -27,7 +27,12 @@ export default function UpdateModalProject({ projectId, onClose: handleClose }:
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
         <ModalProjectForm formId={updateProjectFormId} projectId={projectId} onSubmit={handleSubmit} />
-        <ModalButton formId={updateProjectFormId} backgroundColor="bg-main" onClick={handleUpdateClick}>
+        <ModalButton
+          formId={updateProjectFormId}
+          color="text-white"
+          backgroundColor="bg-main"
+          onClick={handleUpdateClick}
+        >
           수정
         </ModalButton>
       </ModalLayout>
diff --git a/src/components/modal/task/CreateModalTask.tsx b/src/components/modal/task/CreateModalTask.tsx
index e791376c..a11d7d46 100644
--- a/src/components/modal/task/CreateModalTask.tsx
+++ b/src/components/modal/task/CreateModalTask.tsx
@@ -48,7 +48,7 @@ export default function CreateModalTask({ project, onClose: handleClose }: Creat
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
         <ModalTaskForm formId={createTaskFormId} project={project} onSubmit={handleSubmit} />
-        <ModalButton formId={createTaskFormId} backgroundColor="bg-main">
+        <ModalButton formId={createTaskFormId} color="text-white" backgroundColor="bg-main">
           등록
         </ModalButton>
       </ModalLayout>
diff --git a/src/components/modal/task/DetailModalTask.tsx b/src/components/modal/task/DetailModalTask.tsx
index 21563e31..c394c463 100644
--- a/src/components/modal/task/DetailModalTask.tsx
+++ b/src/components/modal/task/DetailModalTask.tsx
@@ -119,10 +119,14 @@ export default function DetailModalTask({ project, task, openUpdateModal, onClos
               )}
             </section>
             <div className="flex min-h-25 gap-10">
-              <ModalButton backgroundColor="bg-main" onClick={handleUpdateClick}>
+              <ModalButton color="text-white" backgroundColor="bg-main" onClick={handleUpdateClick}>
                 수정
               </ModalButton>
-              <ModalButton backgroundColor="bg-delete" onClick={() => handleDeleteClick(task.taskId)}>
+              <ModalButton
+                color="text-white"
+                backgroundColor="bg-delete"
+                onClick={() => handleDeleteClick(task.taskId)}
+              >
                 삭제
               </ModalButton>
             </div>
diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx
index 7c4ab344..c987bfa4 100644
--- a/src/components/modal/task/UpdateModalTask.tsx
+++ b/src/components/modal/task/UpdateModalTask.tsx
@@ -166,7 +166,7 @@ export default function UpdateModalTask({ project, taskId, onClose: handleClose
                 <MarkdownEditor id="content" label="내용" contentFieldName="content" />
               </form>
             </FormProvider>
-            <ModalButton formId={updateTaskFormId} backgroundColor="bg-main">
+            <ModalButton formId={updateTaskFormId} color="text-white" backgroundColor="bg-main">
               수정
             </ModalButton>
           </>
@@ -203,6 +203,9 @@ export default function UpdateModalTask({ project, taskId, onClose: handleClose
             onFileDeleteClick={handleFileDeleteClick}
           />
         )}
+        <ModalButton color="text-emphasis" backgroundColor="bg-button">
+          돌아가기
+        </ModalButton>
       </ModalLayout>
     </ModalPortal>
   );
diff --git a/src/components/modal/team/CreateModalTeam.tsx b/src/components/modal/team/CreateModalTeam.tsx
index 1c44fd13..9649654e 100644
--- a/src/components/modal/team/CreateModalTeam.tsx
+++ b/src/components/modal/team/CreateModalTeam.tsx
@@ -24,7 +24,7 @@ export default function CreateModalTeam({ onClose: handleClose }: CreateModalPro
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
         <ModalTeamForm formId={createTeamFormId} onSubmit={handleSubmit} />
-        <ModalButton formId={createTeamFormId} backgroundColor="bg-main">
+        <ModalButton formId={createTeamFormId} color="text-white" backgroundColor="bg-main">
           등록
         </ModalButton>
       </ModalLayout>
diff --git a/src/components/modal/team/UpdateModalTeam.tsx b/src/components/modal/team/UpdateModalTeam.tsx
index 6344ac1c..d8da35f9 100644
--- a/src/components/modal/team/UpdateModalTeam.tsx
+++ b/src/components/modal/team/UpdateModalTeam.tsx
@@ -118,7 +118,7 @@ export default function UpdateModalTeam({ teamId, onClose: handleClose }: Update
           </form>
         </FormProvider>
 
-        <ModalButton formId={updateTeamFormId} backgroundColor="bg-main">
+        <ModalButton formId={updateTeamFormId} color="text-white" backgroundColor="bg-main">
           수정
         </ModalButton>
 

From b9281bf4215c181ad896530ac050c3083f2a636c Mon Sep 17 00:00:00 2001
From: Seok93 <gkdltjr@naver.com>
Date: Fri, 11 Oct 2024 20:41:26 +0900
Subject: [PATCH 3/9] =?UTF-8?q?Feat:=20#204=20=EC=9D=BC=EC=A0=95=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=EB=B3=B4=EA=B8=B0=20=EB=AA=A8=EB=8B=AC=20pro?=
 =?UTF-8?q?ps=20=EB=B3=80=EA=B2=BD,=20=EB=8B=A8=EC=9D=BC=20=EC=9D=BC?=
 =?UTF-8?q?=EC=A0=95=20=EA=B2=80=EC=83=89=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/task/DetailModalTask.tsx | 48 +++++++--------
 src/components/modal/task/UpdateModalTask.tsx | 15 ++++-
 src/components/task/kanban/TaskItem.tsx       | 17 +++++-
 src/pages/project/CalendarPage.tsx            | 59 +++++++++++--------
 4 files changed, 88 insertions(+), 51 deletions(-)

diff --git a/src/components/modal/task/DetailModalTask.tsx b/src/components/modal/task/DetailModalTask.tsx
index c394c463..a96304b1 100644
--- a/src/components/modal/task/DetailModalTask.tsx
+++ b/src/components/modal/task/DetailModalTask.tsx
@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { LuDownload } from 'react-icons/lu';
 import ModalPortal from '@components/modal/ModalPortal';
 import ModalLayout from '@layouts/ModalLayout';
@@ -10,31 +9,38 @@ import { downloadTaskFile } from '@services/taskService';
 import useAxios from '@hooks/useAxios';
 import useToast from '@hooks/useToast';
 import { useReadStatuses } from '@hooks/query/useStatusQuery';
-import { useDeleteTask, useReadAssignees, useReadTaskFiles } from '@hooks/query/useTaskQuery';
+import { useDeleteTask, useReadAssignees, useReadStatusTasks, useReadTaskFiles } from '@hooks/query/useTaskQuery';
 
 import type { Task } from '@/types/TaskType';
 import type { Project } from '@/types/ProjectType';
+import type { ProjectStatus } from '@/types/ProjectStatusType';
 
 type ViewModalTaskProps = {
-  project: Project;
-  task: Task;
+  projectId: Project['projectId'];
+  statusId: ProjectStatus['statusId'];
+  taskId: Task['taskId'];
   openUpdateModal: () => void;
   onClose: () => void;
 };
 
-export default function DetailModalTask({ project, task, openUpdateModal, onClose: handleClose }: ViewModalTaskProps) {
-  const { mutate: deleteTaskMutate } = useDeleteTask(project.projectId);
-  const { status, isStatusLoading } = useReadStatuses(project.projectId, task.statusId);
-  const { assigneeList, isAssigneeLoading } = useReadAssignees(project.projectId, task.taskId);
-  const { taskFileList, isTaskFileLoading } = useReadTaskFiles(project.projectId, task.taskId);
+export default function DetailModalTask({
+  projectId,
+  statusId,
+  taskId,
+  openUpdateModal,
+  onClose: handleClose,
+}: ViewModalTaskProps) {
+  const { mutate: deleteTaskMutate } = useDeleteTask(projectId);
+  const { status, isStatusLoading } = useReadStatuses(projectId, statusId);
+  const { task, isTaskLoading } = useReadStatusTasks(projectId, taskId);
+  const { assigneeList, isAssigneeLoading } = useReadAssignees(projectId, taskId);
+  const { taskFileList, isTaskFileLoading } = useReadTaskFiles(projectId, taskId);
   const { fetchData } = useAxios(downloadTaskFile);
   const { toastError } = useToast();
 
-  const { taskName, startDate, endDate } = task;
-  const period = useMemo(
-    () => (endDate && startDate !== endDate ? `${startDate} - ${endDate}` : startDate),
-    [startDate, endDate],
-  );
+  const getTaskPeriod = ({ startDate, endDate }: Task) => {
+    return endDate && startDate !== endDate ? `${startDate} - ${endDate}` : startDate;
+  };
 
   const handleUpdateClick = () => {
     openUpdateModal();
@@ -45,7 +51,7 @@ export default function DetailModalTask({ project, task, openUpdateModal, onClos
   const handleDeleteClick = (taskId: Task['taskId']) => deleteTaskMutate(taskId);
 
   const handleDownloadClick = async (originName: string, uploadName: string) => {
-    const response = await fetchData(project.projectId, task.taskId, uploadName);
+    const response = await fetchData(projectId, taskId, uploadName);
     if (response == null) return toastError('파일 다운로드 중 문제가 발생했습니다. 잠시 후 다시 시도해주세요.');
 
     const blob = new Blob([response.data], { type: response.headers['content-type'] });
@@ -64,7 +70,7 @@ export default function DetailModalTask({ project, task, openUpdateModal, onClos
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        {isStatusLoading || isAssigneeLoading || isTaskFileLoading ? (
+        {isStatusLoading || isTaskLoading || isAssigneeLoading || isTaskFileLoading || !task ? (
           <Spinner />
         ) : (
           <article className="flex h-full flex-col justify-center gap-20">
@@ -77,11 +83,11 @@ export default function DetailModalTask({ project, task, openUpdateModal, onClos
               </div>
               <div className="flex gap-10">
                 <h2 className="w-50 shrink-0 text-large font-bold">일정명</h2>
-                <span>{taskName}</span>
+                <span>{task.taskName}</span>
               </div>
               <div className="flex gap-10">
                 <h2 className="w-50 shrink-0 text-large font-bold">기간</h2>
-                <span>{period}</span>
+                <span>{getTaskPeriod(task)}</span>
               </div>
               <div className="flex gap-10">
                 <h2 className="w-50 shrink-0 text-large font-bold">수행자</h2>
@@ -122,11 +128,7 @@ export default function DetailModalTask({ project, task, openUpdateModal, onClos
               <ModalButton color="text-white" backgroundColor="bg-main" onClick={handleUpdateClick}>
                 수정
               </ModalButton>
-              <ModalButton
-                color="text-white"
-                backgroundColor="bg-delete"
-                onClick={() => handleDeleteClick(task.taskId)}
-              >
+              <ModalButton color="text-white" backgroundColor="bg-delete" onClick={() => handleDeleteClick(taskId)}>
                 삭제
               </ModalButton>
             </div>
diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx
index c987bfa4..2e3220b2 100644
--- a/src/components/modal/task/UpdateModalTask.tsx
+++ b/src/components/modal/task/UpdateModalTask.tsx
@@ -38,10 +38,16 @@ import type { ProjectSearchCallback } from '@/types/SearchCallbackType';
 type UpdateModalTaskProps = {
   project: Project;
   taskId: Task['taskId'];
+  openDetailModal: () => void;
   onClose: () => void;
 };
 
-export default function UpdateModalTask({ project, taskId, onClose: handleClose }: UpdateModalTaskProps) {
+export default function UpdateModalTask({
+  project,
+  taskId,
+  openDetailModal,
+  onClose: handleClose,
+}: UpdateModalTaskProps) {
   const updateTaskFormId = 'updateTaskForm';
   const { projectId, startDate, endDate } = project;
 
@@ -128,6 +134,11 @@ export default function UpdateModalTask({ project, taskId, onClose: handleClose
 
   const handleFormSubmit: SubmitHandler<TaskUpdateForm> = async (formData) => updateTaskInfoMutate(formData);
 
+  const handleDetailClick = () => {
+    openDetailModal();
+    handleClose();
+  };
+
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
@@ -203,7 +214,7 @@ export default function UpdateModalTask({ project, taskId, onClose: handleClose
             onFileDeleteClick={handleFileDeleteClick}
           />
         )}
-        <ModalButton color="text-emphasis" backgroundColor="bg-button">
+        <ModalButton color="text-emphasis" backgroundColor="bg-button" onClick={handleDetailClick}>
           돌아가기
         </ModalButton>
       </ModalLayout>
diff --git a/src/components/task/kanban/TaskItem.tsx b/src/components/task/kanban/TaskItem.tsx
index 85d452f5..25be2057 100644
--- a/src/components/task/kanban/TaskItem.tsx
+++ b/src/components/task/kanban/TaskItem.tsx
@@ -45,9 +45,22 @@ export default function TaskItem({ task, colorCode }: TaskItemProps) {
         )}
       </Draggable>
       {showDetailModal && (
-        <DetailModalTask project={project} task={task} openUpdateModal={openUpdateModal} onClose={closeDetailModal} />
+        <DetailModalTask
+          projectId={project.projectId}
+          statusId={task.statusId}
+          taskId={task.taskId}
+          openUpdateModal={openUpdateModal}
+          onClose={closeDetailModal}
+        />
+      )}
+      {showUpdateModal && (
+        <UpdateModalTask
+          project={project}
+          taskId={task.taskId}
+          openDetailModal={openDetailModal}
+          onClose={closeUpdateModal}
+        />
       )}
-      {showUpdateModal && <UpdateModalTask project={project} taskId={task.taskId} onClose={closeUpdateModal} />}
     </>
   );
 }
diff --git a/src/pages/project/CalendarPage.tsx b/src/pages/project/CalendarPage.tsx
index 87ddbaff..cba12195 100644
--- a/src/pages/project/CalendarPage.tsx
+++ b/src/pages/project/CalendarPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DateTime, Settings } from 'luxon';
 import { Calendar, luxonLocalizer, Views } from 'react-big-calendar';
 import DetailModalTask from '@components/modal/task/DetailModalTask';
@@ -33,25 +33,27 @@ function getCalendarTask(statusTasks: TaskListWithStatus[]) {
 const dt = DateTime.local();
 Settings.defaultZone = dt.zoneName;
 const localizer = luxonLocalizer(DateTime, { firstDayOfWeek: 7 });
+const initialTask = { taskId: 0, statusId: 0, taskName: '', content: '', startDate: '', endDate: '', sortOrder: 0 };
 
 // ToDo: Loading시 infinite spinner UI 보이도록 변경할 것
 // ToDo: Error 발생시 처리 추가할 것
 export default function CalendarPage() {
-  const [selectedTask, setSelectedTask] = useState<Task>({
-    taskId: 0,
-    statusId: 0,
-    taskName: '',
-    content: '',
-    startDate: '',
-    endDate: '',
-    sortOrder: 0,
-  });
+  const [selectedTask, setSelectedTask] = useState<Task>(initialTask);
   const [date, setDate] = useState<Date>(() => DateTime.now().toJSDate());
   const { project } = useProjectContext();
   const { statusTaskList, isTaskLoading, isTaskError, taskError } = useReadStatusTasks(project.projectId);
   const { showModal: showDetailModal, openModal: openDetailModal, closeModal: closeDetailModal } = useModal();
   const { showModal: showUpdateModal, openModal: openUpdateModal, closeModal: closeUpdateModal } = useModal();
 
+  // 일정 정보 수정시 데이터 동기화를 위한 처리
+  useEffect(() => {
+    const statusTask = getCalendarTask(statusTaskList).find((task) => task.taskId === selectedTask.taskId);
+    if (statusTask) {
+      const { taskId, statusId, taskName, content, startDate, endDate, sortOrder } = statusTask;
+      setSelectedTask({ taskId, statusId, taskName, content, startDate, endDate, sortOrder });
+    }
+  }, [statusTaskList]);
+
   const handleNavigate = useCallback((newDate: Date) => setDate(newDate), [setDate]);
 
   const handleSelectEvent = (event: CustomEvent) => {
@@ -90,20 +92,21 @@ export default function CalendarPage() {
     [],
   );
 
-  const events: CustomEvent[] = getCalendarTask(statusTaskList)
-    .map((task) => ({
-      title: task.taskName,
-      start: new Date(task.startDate),
-      end: new Date(task.endDate),
-      allDay: true,
-      task: { ...task },
-    }))
-    .sort((a, b) => a.start.getTime() - b.start.getTime());
+  const events: CustomEvent[] = useMemo(() => {
+    console.log('이벤트 정리');
+    return getCalendarTask(statusTaskList)
+      .map((task) => ({
+        title: task.taskName,
+        start: new Date(task.startDate),
+        end: new Date(task.endDate),
+        allDay: true,
+        task: { ...task },
+      }))
+      .sort((a, b) => a.start.getTime() - b.start.getTime());
+  }, [statusTaskList]);
   const startDate = events.length && events[0].start ? events[0].start : null;
 
   // ToDo: DnD, Resize 이벤트 추가 생각해보기
-  // ToDo: 할일 추가 모달 Form 작업 완료시 모달 컴포넌트 분리
-  // ToDo: 캘린더 크기 전체적으로 조정
   // ToDo: 코드 리팩토링
   return (
     <div className="flex h-full min-h-375 w-full min-w-260 flex-col">
@@ -132,13 +135,21 @@ export default function CalendarPage() {
       />
       {showDetailModal && (
         <DetailModalTask
-          project={project}
-          task={selectedTask}
+          projectId={project.projectId}
+          statusId={selectedTask.statusId}
+          taskId={selectedTask.taskId}
           openUpdateModal={openUpdateModal}
           onClose={closeDetailModal}
         />
       )}
-      {showUpdateModal && <UpdateModalTask project={project} taskId={selectedTask.taskId} onClose={closeUpdateModal} />}
+      {showUpdateModal && (
+        <UpdateModalTask
+          project={project}
+          taskId={selectedTask.taskId}
+          openDetailModal={openDetailModal}
+          onClose={closeUpdateModal}
+        />
+      )}
     </div>
   );
 }

From 59455861fb949ad4938c42f16005f7c2688b84da Mon Sep 17 00:00:00 2001
From: Seok93 <gkdltjr@naver.com>
Date: Fri, 11 Oct 2024 20:42:40 +0900
Subject: [PATCH 4/9] =?UTF-8?q?Refactor:=20#204=20=EC=BA=98=EB=A6=B0?=
 =?UTF-8?q?=EB=8D=94=20=EC=9D=BC=EC=A0=95=20hover=EC=8B=9C=20=EA=B0=80?=
 =?UTF-8?q?=EC=8B=9C=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task/calendar/CustomEventWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/task/calendar/CustomEventWrapper.tsx b/src/components/task/calendar/CustomEventWrapper.tsx
index abe24c92..9a02dfaf 100644
--- a/src/components/task/calendar/CustomEventWrapper.tsx
+++ b/src/components/task/calendar/CustomEventWrapper.tsx
@@ -28,7 +28,7 @@ export default function CustomEventWrapper(props: EventWrapperProps<CustomEvent>
   return (
     <div
       style={{ backgroundColor: event.task.colorCode }}
-      className={`overflow-hidden text-ellipsis rounded-md px-3 py-1 ${continuesClass}`}
+      className={`overflow-hidden text-ellipsis rounded-md px-3 py-1 ${continuesClass} hover:brightness-90`}
     >
       {children}
     </div>

From 4d0362a14433f1302147bff4a1eb4eb701b5a1eb Mon Sep 17 00:00:00 2001
From: Seok93 <gkdltjr@naver.com>
Date: Fri, 11 Oct 2024 20:43:33 +0900
Subject: [PATCH 5/9] =?UTF-8?q?Refactor:=20#204=20QueryFilter=20=EC=98=B5?=
 =?UTF-8?q?=EC=85=98=20=EC=88=98=EC=A0=95=EC=9D=84=20=ED=86=B5=ED=95=9C=20?=
 =?UTF-8?q?refetch=20=EC=9A=94=EC=B2=AD=20=EC=B5=9C=EC=86=8C=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/query/useTaskQuery.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/query/useTaskQuery.ts b/src/hooks/query/useTaskQuery.ts
index 5e8a3a4a..d0e43e8e 100644
--- a/src/hooks/query/useTaskQuery.ts
+++ b/src/hooks/query/useTaskQuery.ts
@@ -182,7 +182,7 @@ export function useUpdateTaskInfo(projectId: Project['projectId'], taskId: Task[
     onError: () => toastError('일정 정보 수정에 실패했습니다. 잠시 후 다시 시도해 주세요.'),
     onSuccess: () => {
       toastSuccess('일정 정보를 수정했습니다.');
-      queryClient.invalidateQueries({ queryKey: tasksQueryKey });
+      queryClient.invalidateQueries({ queryKey: tasksQueryKey, exact: true });
     },
   });
 

From a9c21e0e01453bead4b70d57067f57c542d097d7 Mon Sep 17 00:00:00 2001
From: Seok93 <gkdltjr@naver.com>
Date: Fri, 11 Oct 2024 20:49:28 +0900
Subject: [PATCH 6/9] =?UTF-8?q?Feat:=20#204=20=EC=9D=BC=EC=A0=95=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EB=A1=9C=EB=94=A9=EC=8B=9C=20=EB=8C=80?=
 =?UTF-8?q?=EC=B2=B4=20UI(Spinner)=EA=B0=80=20=EB=82=98=EC=98=A4=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/project/CalendarPage.tsx | 87 ++++++++++++++++--------------
 1 file changed, 46 insertions(+), 41 deletions(-)

diff --git a/src/pages/project/CalendarPage.tsx b/src/pages/project/CalendarPage.tsx
index cba12195..e83bbf82 100644
--- a/src/pages/project/CalendarPage.tsx
+++ b/src/pages/project/CalendarPage.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DateTime, Settings } from 'luxon';
 import { Calendar, luxonLocalizer, Views } from 'react-big-calendar';
+import Spinner from '@components/common/Spinner';
 import DetailModalTask from '@components/modal/task/DetailModalTask';
 import UpdateModalTask from '@components/modal/task/UpdateModalTask';
 import CalendarToolbar from '@components/task/calendar/CalendarToolbar';
@@ -35,7 +36,6 @@ Settings.defaultZone = dt.zoneName;
 const localizer = luxonLocalizer(DateTime, { firstDayOfWeek: 7 });
 const initialTask = { taskId: 0, statusId: 0, taskName: '', content: '', startDate: '', endDate: '', sortOrder: 0 };
 
-// ToDo: Loading시 infinite spinner UI 보이도록 변경할 것
 // ToDo: Error 발생시 처리 추가할 것
 export default function CalendarPage() {
   const [selectedTask, setSelectedTask] = useState<Task>(initialTask);
@@ -93,7 +93,6 @@ export default function CalendarPage() {
   );
 
   const events: CustomEvent[] = useMemo(() => {
-    console.log('이벤트 정리');
     return getCalendarTask(statusTaskList)
       .map((task) => ({
         title: task.taskName,
@@ -110,45 +109,51 @@ export default function CalendarPage() {
   // ToDo: 코드 리팩토링
   return (
     <div className="flex h-full min-h-375 w-full min-w-260 flex-col">
-      <CalendarToolbar date={date} startDate={startDate} onClick={handleNavigate} />
-      <Calendar
-        toolbar={false}
-        localizer={localizer}
-        defaultView="month"
-        date={date}
-        onNavigate={handleNavigate}
-        drilldownView={null}
-        views={views}
-        events={events}
-        components={customComponents}
-        titleAccessor="title"
-        startAccessor="start"
-        endAccessor="end"
-        allDayAccessor="allDay"
-        popup
-        showAllEvents={false}
-        dayPropGetter={handleDayPropGetter}
-        eventPropGetter={handleEventPropGetter}
-        selectable
-        onSelectSlot={handleSelectSlot}
-        onSelectEvent={handleSelectEvent}
-      />
-      {showDetailModal && (
-        <DetailModalTask
-          projectId={project.projectId}
-          statusId={selectedTask.statusId}
-          taskId={selectedTask.taskId}
-          openUpdateModal={openUpdateModal}
-          onClose={closeDetailModal}
-        />
-      )}
-      {showUpdateModal && (
-        <UpdateModalTask
-          project={project}
-          taskId={selectedTask.taskId}
-          openDetailModal={openDetailModal}
-          onClose={closeUpdateModal}
-        />
+      {isTaskLoading ? (
+        <Spinner />
+      ) : (
+        <>
+          <CalendarToolbar date={date} startDate={startDate} onClick={handleNavigate} />
+          <Calendar
+            toolbar={false}
+            localizer={localizer}
+            defaultView="month"
+            date={date}
+            onNavigate={handleNavigate}
+            drilldownView={null}
+            views={views}
+            events={events}
+            components={customComponents}
+            titleAccessor="title"
+            startAccessor="start"
+            endAccessor="end"
+            allDayAccessor="allDay"
+            popup
+            showAllEvents={false}
+            dayPropGetter={handleDayPropGetter}
+            eventPropGetter={handleEventPropGetter}
+            selectable
+            onSelectSlot={handleSelectSlot}
+            onSelectEvent={handleSelectEvent}
+          />
+          {showDetailModal && (
+            <DetailModalTask
+              projectId={project.projectId}
+              statusId={selectedTask.statusId}
+              taskId={selectedTask.taskId}
+              openUpdateModal={openUpdateModal}
+              onClose={closeDetailModal}
+            />
+          )}
+          {showUpdateModal && (
+            <UpdateModalTask
+              project={project}
+              taskId={selectedTask.taskId}
+              openDetailModal={openDetailModal}
+              onClose={closeUpdateModal}
+            />
+          )}
+        </>
       )}
     </div>
   );

From 079ac1c7da6cc4a5b456f277945b66ad1d64b4a7 Mon Sep 17 00:00:00 2001
From: Seok93 <gkdltjr@naver.com>
Date: Sat, 12 Oct 2024 00:38:59 +0900
Subject: [PATCH 7/9] =?UTF-8?q?Comment:=20#204=20React=20Reparenting=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task/kanban/TaskItem.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/task/kanban/TaskItem.tsx b/src/components/task/kanban/TaskItem.tsx
index 25be2057..dbe2246e 100644
--- a/src/components/task/kanban/TaskItem.tsx
+++ b/src/components/task/kanban/TaskItem.tsx
@@ -14,12 +14,13 @@ type TaskItemProps = {
   colorCode: ProjectStatus['colorCode'];
 };
 
+// ToDo: React Reparenting 관련된 문제가 있음.
 export default function TaskItem({ task, colorCode }: TaskItemProps) {
   const { project } = useProjectContext();
   const { showModal: showDetailModal, openModal: openDetailModal, closeModal: closeDetailModal } = useModal();
   const { showModal: showUpdateModal, openModal: openUpdateModal, closeModal: closeUpdateModal } = useModal();
 
-  const { taskId, taskName, sortOrder } = task;
+  const { taskId, statusId, taskName, sortOrder } = task;
   const index = useMemo(() => sortOrder - 1, [sortOrder]);
   const draggableId = useMemo(() => generatePrefixId(taskId, DND_DRAGGABLE_PREFIX.TASK), [taskId]);
 
@@ -47,8 +48,8 @@ export default function TaskItem({ task, colorCode }: TaskItemProps) {
       {showDetailModal && (
         <DetailModalTask
           projectId={project.projectId}
-          statusId={task.statusId}
-          taskId={task.taskId}
+          statusId={statusId}
+          taskId={taskId}
           openUpdateModal={openUpdateModal}
           onClose={closeDetailModal}
         />
@@ -56,7 +57,7 @@ export default function TaskItem({ task, colorCode }: TaskItemProps) {
       {showUpdateModal && (
         <UpdateModalTask
           project={project}
-          taskId={task.taskId}
+          taskId={taskId}
           openDetailModal={openDetailModal}
           onClose={closeUpdateModal}
         />

From 308e35507b7da6a02b881121fc4c8c8c481e0846 Mon Sep 17 00:00:00 2001
From: Seok93 <gkdltjr@naver.com>
Date: Sat, 12 Oct 2024 01:17:45 +0900
Subject: [PATCH 8/9] =?UTF-8?q?Fix:=20#204=20useEffect=20=EC=9D=98?=
 =?UTF-8?q?=EC=A1=B4=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/project/CalendarPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/project/CalendarPage.tsx b/src/pages/project/CalendarPage.tsx
index e83bbf82..51bf9a91 100644
--- a/src/pages/project/CalendarPage.tsx
+++ b/src/pages/project/CalendarPage.tsx
@@ -52,7 +52,7 @@ export default function CalendarPage() {
       const { taskId, statusId, taskName, content, startDate, endDate, sortOrder } = statusTask;
       setSelectedTask({ taskId, statusId, taskName, content, startDate, endDate, sortOrder });
     }
-  }, [statusTaskList]);
+  }, [statusTaskList, selectedTask.taskId]);
 
   const handleNavigate = useCallback((newDate: Date) => setDate(newDate), [setDate]);
 

From ec5e03c6e835c89270b58a98b46647aed43ff531 Mon Sep 17 00:00:00 2001
From: Seok93 <gkdltjr@naver.com>
Date: Sat, 12 Oct 2024 01:23:03 +0900
Subject: [PATCH 9/9] =?UTF-8?q?UI:=20#204=20=EB=8F=8C=EC=95=84=EA=B0=80?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20margin=20=EA=B0=84=EA=B2=A9=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/task/UpdateModalTask.tsx | 24 ++++++++++---------
 src/pages/project/KanbanPage.tsx              |  4 +---
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx
index 2e3220b2..d6bf6eac 100644
--- a/src/components/modal/task/UpdateModalTask.tsx
+++ b/src/components/modal/task/UpdateModalTask.tsx
@@ -205,18 +205,20 @@ export default function UpdateModalTask({
         {isTaskFileLoading ? (
           <Spinner />
         ) : (
-          <FileDropZone
-            id="files"
-            label="첨부파일"
-            files={taskFileList}
-            accept={TASK_SETTINGS.FILE_ACCEPT}
-            updateFiles={updateTaskFiles}
-            onFileDeleteClick={handleFileDeleteClick}
-          />
+          <section className="space-y-20">
+            <FileDropZone
+              id="files"
+              label="첨부파일"
+              files={taskFileList}
+              accept={TASK_SETTINGS.FILE_ACCEPT}
+              updateFiles={updateTaskFiles}
+              onFileDeleteClick={handleFileDeleteClick}
+            />
+            <ModalButton color="text-emphasis" backgroundColor="bg-button" onClick={handleDetailClick}>
+              돌아가기
+            </ModalButton>
+          </section>
         )}
-        <ModalButton color="text-emphasis" backgroundColor="bg-button" onClick={handleDetailClick}>
-          돌아가기
-        </ModalButton>
       </ModalLayout>
     </ModalPortal>
   );
diff --git a/src/pages/project/KanbanPage.tsx b/src/pages/project/KanbanPage.tsx
index c3621dc4..ec432007 100644
--- a/src/pages/project/KanbanPage.tsx
+++ b/src/pages/project/KanbanPage.tsx
@@ -61,9 +61,7 @@ export default function KanbanPage() {
   const [localStatusTaskList, setLocalStatusTaskList] = useState(statusTaskList);
 
   useEffect(() => {
-    if (statusTaskList) {
-      setLocalStatusTaskList(statusTaskList);
-    }
+    if (statusTaskList) setLocalStatusTaskList(statusTaskList);
   }, [statusTaskList]);
 
   const handleDragEnd = (dropResult: DropResult) => {