From 93df274604e9c3ea243343a264c730359614ff0d Mon Sep 17 00:00:00 2001
From: Suk Woo <gkdltjr@naver.com>
Date: Mon, 9 Sep 2024 23:08:33 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Fix:=20#122=20=EC=B9=B8=EB=B0=98=20?=
 =?UTF-8?q?=EB=B3=B4=EB=93=9C=20UI=EA=B0=80=20=EC=A0=95=ED=95=B4=EC=A7=84?=
 =?UTF-8?q?=20=EB=B2=94=EC=9C=84=EB=A5=BC=20=EB=84=98=EC=96=B4=EA=B0=80?=
 =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0=20(#124)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix: #122 칸반보드가 정해진 범위를 넘어가는 문제 해결

* Chore: #122 응답 데이터 sortOrder 순으로 정렬
---
 src/components/sidebar/ListSidebar.tsx      |  2 +-
 src/components/task/kanban/TaskItem.tsx     |  4 ++--
 src/components/task/kanban/TaskItemList.tsx |  2 +-
 src/layouts/page/ProjectLayout.tsx          | 12 +++++++-----
 src/layouts/page/SettingLayout.tsx          |  2 +-
 src/layouts/page/TeamLayout.tsx             |  2 +-
 src/mocks/services/taskServiceHandler.ts    |  4 +++-
 src/pages/project/CalendarPage.tsx          |  2 +-
 src/pages/project/KanbanPage.tsx            |  2 +-
 9 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/sidebar/ListSidebar.tsx b/src/components/sidebar/ListSidebar.tsx
index b7b52b87..3ad95f00 100644
--- a/src/components/sidebar/ListSidebar.tsx
+++ b/src/components/sidebar/ListSidebar.tsx
@@ -15,7 +15,7 @@ export default function ListSidebar({ label, title, children, showButton, text,
   };
 
   return (
-    <aside className="mr-10 flex w-1/3 min-w-125 max-w-220 shrink-0 flex-col border border-list bg-contents-box">
+    <aside className="flex w-1/3 min-w-125 max-w-220 shrink-0 flex-col border border-list bg-contents-box">
       <div className="flex min-h-30 items-center justify-between bg-sub px-10">
         <div>
           {label && <small className="mr-5 font-bold text-main">{label}</small>}
diff --git a/src/components/task/kanban/TaskItem.tsx b/src/components/task/kanban/TaskItem.tsx
index 8e26560a..19098bf4 100644
--- a/src/components/task/kanban/TaskItem.tsx
+++ b/src/components/task/kanban/TaskItem.tsx
@@ -17,8 +17,8 @@ export default function TaskItem({ draggableId, name, colorCode, index }: TaskIt
           {...dragProvided.draggableProps}
           {...dragProvided.dragHandleProps}
         >
-          <div style={{ borderColor: colorCode }} className="h-8 w-8 rounded-full border" />
-          <div className="select-none overflow-hidden text-ellipsis text-nowrap">{name}</div>
+          <div style={{ borderColor: colorCode }} className="size-8 shrink-0 rounded-full border" />
+          <div className="select-none truncate">{name}</div>
         </div>
       )}
     </Draggable>
diff --git a/src/components/task/kanban/TaskItemList.tsx b/src/components/task/kanban/TaskItemList.tsx
index 43a9e4d4..561e11ab 100644
--- a/src/components/task/kanban/TaskItemList.tsx
+++ b/src/components/task/kanban/TaskItemList.tsx
@@ -18,7 +18,7 @@ export default function TaskItemList({ statusId, colorCode, tasks }: TaskItemLis
       {(taskDropProvided) => (
         <article
           style={{ borderColor: colorCode }}
-          className="h-full w-full grow border-l-[3px] bg-scroll"
+          className="h-full overflow-auto border-l-[3px] bg-scroll"
           ref={taskDropProvided.innerRef}
           {...taskDropProvided.droppableProps}
         >
diff --git a/src/layouts/page/ProjectLayout.tsx b/src/layouts/page/ProjectLayout.tsx
index a23a19d1..8463d7ec 100644
--- a/src/layouts/page/ProjectLayout.tsx
+++ b/src/layouts/page/ProjectLayout.tsx
@@ -27,11 +27,11 @@ export default function ProjectLayout() {
 
   return (
     <>
-      <section className="flex h-full p-15">
+      <section className="flex h-full gap-10 p-15">
         <ListSidebar label="team" title="팀 이름...">
           <ListProject data={projectList} targetId={projectId} />
         </ListSidebar>
-        <section className="flex grow flex-col border border-list bg-contents-box">
+        <section className="flex w-2/3 grow flex-col border border-list bg-contents-box">
           <header className="flex h-30 items-center justify-between border-b p-10">
             {/* ToDo: LabelTitle 공통 컴포넌트로 추출할 것 */}
             <div>
@@ -42,8 +42,8 @@ export default function ProjectLayout() {
               <RiSettings5Fill /> Project Setting
             </div>
           </header>
-          <div className="flex grow flex-col overflow-auto p-10 pt-0">
-            <div className="sticky top-0 z-10 mb-10 flex items-center justify-between border-b bg-contents-box pt-10">
+          <div className="flex grow flex-col overflow-auto">
+            <div className="sticky top-0 z-10 flex items-center justify-between border-b bg-contents-box p-10 pb-0">
               <ul className="*:mr-15">
                 <li className="inline">
                   {/* ToDo: nav 옵션사항을 정리하여 map으로 정리할 것 */}
@@ -66,7 +66,9 @@ export default function ProjectLayout() {
                 </button>
               </div>
             </div>
-            <Outlet context={{ project } satisfies ProjectContext} />
+            <div className="flex grow overflow-auto p-10">
+              <Outlet context={{ project } satisfies ProjectContext} />
+            </div>
           </div>
         </section>
       </section>
diff --git a/src/layouts/page/SettingLayout.tsx b/src/layouts/page/SettingLayout.tsx
index 6941ef48..190c3fed 100644
--- a/src/layouts/page/SettingLayout.tsx
+++ b/src/layouts/page/SettingLayout.tsx
@@ -29,7 +29,7 @@ export default function SettingLayout() {
   };
 
   return (
-    <section className="flex h-full p-15">
+    <section className="flex h-full gap-10 p-15">
       <ListSidebar title={`${USER_INFO_DUMMY.nickname} 님의 정보`}>
         <ListSetting navList={navList} />
       </ListSidebar>
diff --git a/src/layouts/page/TeamLayout.tsx b/src/layouts/page/TeamLayout.tsx
index c5bd85f8..cf575187 100644
--- a/src/layouts/page/TeamLayout.tsx
+++ b/src/layouts/page/TeamLayout.tsx
@@ -21,7 +21,7 @@ export default function TeamLayout() {
 
   return (
     <>
-      <section className="flex h-full p-15">
+      <section className="flex h-full gap-10 p-15">
         <ListSidebar title="팀 목록" showButton text="팀 생성" onClick={openTeamModal}>
           <ListTeam data={TEAM_DUMMY} targetId={teamId} />
         </ListSidebar>
diff --git a/src/mocks/services/taskServiceHandler.ts b/src/mocks/services/taskServiceHandler.ts
index 591eedcc..22cbb4bf 100644
--- a/src/mocks/services/taskServiceHandler.ts
+++ b/src/mocks/services/taskServiceHandler.ts
@@ -13,7 +13,9 @@ const taskServiceHandler = [
 
     if (!accessToken) return new HttpResponse(null, { status: 401 });
 
-    const statusList = STATUS_DUMMY.filter((status) => status.projectId === Number(projectId));
+    const statusList = STATUS_DUMMY.filter((status) => status.projectId === Number(projectId)).sort(
+      (a, b) => a.sortOrder - b.sortOrder,
+    );
     const statusTaskList = statusList.map((status) => {
       const tasks = TASK_DUMMY.filter((task) => task.statusId === status.statusId).sort(
         (a, b) => a.sortOrder - b.sortOrder,
diff --git a/src/pages/project/CalendarPage.tsx b/src/pages/project/CalendarPage.tsx
index d54e48ab..d18e9f55 100644
--- a/src/pages/project/CalendarPage.tsx
+++ b/src/pages/project/CalendarPage.tsx
@@ -94,7 +94,7 @@ export default function CalendarPage() {
   // ToDo: 캘린더 크기 전체적으로 조정
   // ToDo: 코드 리팩토링
   return (
-    <div className="flex h-full min-h-375 min-w-260 flex-col">
+    <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}
diff --git a/src/pages/project/KanbanPage.tsx b/src/pages/project/KanbanPage.tsx
index 2d06624b..7e05fe45 100644
--- a/src/pages/project/KanbanPage.tsx
+++ b/src/pages/project/KanbanPage.tsx
@@ -88,7 +88,7 @@ export default function KanbanPage() {
       <Droppable droppableId={DND_DROPPABLE_PREFIX.STATUS} type={DND_TYPE.STATUS} direction="horizontal">
         {(statusDropProvided) => (
           <section
-            className="flex grow gap-10 pt-10"
+            className="flex grow gap-10"
             ref={statusDropProvided.innerRef}
             {...statusDropProvided.droppableProps}
           >

From 8061a28dada099078865e2759b31df7a48ddac16 Mon Sep 17 00:00:00 2001
From: Suk Woo <gkdltjr@naver.com>
Date: Tue, 10 Sep 2024 19:22:17 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20#114=20=EC=9D=BC=EC=A0=95=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20API=EB=A5=BC=20=EC=9D=B4=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EC=97=AC=20=EC=9D=BC=EC=A0=95=20=EC=83=9D=EC=84=B1=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84=20(#125)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Feat: #114 종료일 비활성화시 시작일을 따라가도록 변경

* Feat: #114 일정 생성 API React Query 처리 추가

* Feat: #114 일정 생성 API MSW 처리 추가

* Feat: #114 일정 생성 기능 구현

* Chore: #114 import 경로 수정 및 정리
---
 src/components/modal/task/CreateModalTask.tsx | 24 +++++++++++++++----
 src/components/modal/task/ModalTaskForm.tsx   |  7 +++++-
 src/hooks/query/useTaskQuery.ts               | 22 ++++++++++++++---
 src/mocks/services/taskServiceHandler.ts      | 18 +++++++++++++-
 src/services/taskService.ts                   | 17 +++++++++++--
 5 files changed, 77 insertions(+), 11 deletions(-)

diff --git a/src/components/modal/task/CreateModalTask.tsx b/src/components/modal/task/CreateModalTask.tsx
index c5342da2..f9dd187e 100644
--- a/src/components/modal/task/CreateModalTask.tsx
+++ b/src/components/modal/task/CreateModalTask.tsx
@@ -2,10 +2,13 @@ import ModalLayout from '@layouts/ModalLayout';
 import ModalPortal from '@components/modal/ModalPortal';
 import ModalTaskForm from '@components/modal/task/ModalTaskForm';
 import ModalFormButton from '@components/modal/ModalFormButton';
+import { useCreateStatusTask, useReadStatusTasks } from '@hooks/query/useTaskQuery';
+import useToast from '@hooks/useToast';
 
 import type { SubmitHandler } from 'react-hook-form';
 import type { TaskForm } from '@/types/TaskType';
 import type { Project } from '@/types/ProjectType';
+import type { ProjectStatus } from '@/types/ProjectStatusType';
 
 type CreateModalTaskProps = {
   project: Project;
@@ -13,10 +16,23 @@ type CreateModalTaskProps = {
 };
 
 export default function CreateModalTask({ project, onClose: handleClose }: CreateModalTaskProps) {
-  // ToDo: 상태 생성을 위한 네트워크 로직 추가
-  const handleSubmit: SubmitHandler<TaskForm> = async (data) => {
-    console.log('생성 폼 제출');
-    console.log(data);
+  const { toastError } = useToast();
+  const { mutate: createTaskMutate } = useCreateStatusTask(project.projectId);
+  const { statusTaskList } = useReadStatusTasks(project.projectId);
+
+  const getLastSortOrder = (statusId: ProjectStatus['statusId']) => {
+    const statusTask = statusTaskList.find((statusTask) => statusTask.statusId === Number(statusId));
+    if (!statusTask) {
+      toastError('선택하신 프로젝트 상태는 존재하지 않습니다. ');
+      throw Error('프로젝트 상태가 존재하지 않습니다.');
+    }
+    return statusTask.tasks.length + 1;
+  };
+
+  // ToDo: 파일 생성 위한 네트워크 로직 추가
+  const handleSubmit: SubmitHandler<TaskForm> = async (taskFormData) => {
+    const sortOrder = getLastSortOrder(taskFormData.statusId);
+    createTaskMutate({ ...taskFormData, sortOrder });
     handleClose();
   };
   return (
diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx
index 164c2524..0ca57397 100644
--- a/src/components/modal/task/ModalTaskForm.tsx
+++ b/src/components/modal/task/ModalTaskForm.tsx
@@ -218,7 +218,12 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
           <input
             type="date"
             id="startDate"
-            {...register('startDate', TASK_VALIDATION_RULES.START_DATE(startDate, endDate))}
+            {...register('startDate', {
+              ...TASK_VALIDATION_RULES.START_DATE(startDate, endDate),
+              onChange: (e) => {
+                if (!hasDeadline) setValue('endDate', e.target.value);
+              },
+            })}
           />
           <div className={`my-5 h-10 grow text-xs text-error ${errors.startDate ? 'visible' : 'invisible'}`}>
             {errors.startDate?.message}
diff --git a/src/hooks/query/useTaskQuery.ts b/src/hooks/query/useTaskQuery.ts
index be7a5547..b2039f42 100644
--- a/src/hooks/query/useTaskQuery.ts
+++ b/src/hooks/query/useTaskQuery.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { findTaskList, updateTaskOrder } from '@services/taskService';
+import { createTask, findTaskList, updateTaskOrder } from '@services/taskService';
 import useToast from '@hooks/useToast';
 
-import type { TaskListWithStatus, TaskOrder } from '@/types/TaskType';
+import type { TaskForm, TaskListWithStatus, TaskOrder } from '@/types/TaskType';
 import type { Project } from '@/types/ProjectType';
 
 function getTaskNameList(taskList: TaskListWithStatus[]) {
@@ -14,7 +14,23 @@ function getTaskNameList(taskList: TaskListWithStatus[]) {
     : [];
 }
 
-// Todo: Task Query CUD로직 작성하기
+// Todo: Task Query UD로직 작성하기
+export function useCreateStatusTask(projectId: Project['projectId']) {
+  const { toastSuccess } = useToast();
+  const queryClient = useQueryClient();
+  const queryKey = ['projects', projectId, 'tasks'];
+
+  const mutation = useMutation({
+    mutationFn: (formData: TaskForm) => createTask(projectId, formData),
+    onSuccess: () => {
+      toastSuccess('프로젝트 일정을 등록하였습니다.');
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+
+  return mutation;
+}
+
 export function useReadStatusTasks(projectId: Project['projectId']) {
   const {
     data: statusTaskList = [],
diff --git a/src/mocks/services/taskServiceHandler.ts b/src/mocks/services/taskServiceHandler.ts
index 22cbb4bf..112b828e 100644
--- a/src/mocks/services/taskServiceHandler.ts
+++ b/src/mocks/services/taskServiceHandler.ts
@@ -1,7 +1,7 @@
 import { http, HttpResponse } from 'msw';
 import { STATUS_DUMMY, TASK_DUMMY } from '@mocks/mockData';
 import { getStatusHash, getTaskHash } from '@mocks/mockHash';
-import type { TaskOrderForm } from '@/types/TaskType';
+import type { TaskForm, TaskOrderForm } from '@/types/TaskType';
 
 const BASE_URL = import.meta.env.VITE_BASE_URL;
 
@@ -25,6 +25,22 @@ const taskServiceHandler = [
 
     return HttpResponse.json(statusTaskList);
   }),
+  // 일정 생성 API
+  http.post(`${BASE_URL}/project/:projectId/task`, async ({ request, params }) => {
+    const accessToken = request.headers.get('Authorization');
+    const formData = (await request.json()) as TaskForm;
+    const { projectId } = params;
+
+    if (!accessToken) return new HttpResponse(null, { status: 401 });
+
+    const statusList = STATUS_DUMMY.filter((status) => status.projectId === Number(projectId));
+    if (!statusList.find((status) => status.statusId === Number(formData.statusId))) {
+      return new HttpResponse(null, { status: 400 });
+    }
+
+    TASK_DUMMY.push({ ...formData, statusId: +formData.statusId, taskId: TASK_DUMMY.length + 1, files: [] });
+    return new HttpResponse(null, { status: 201 });
+  }),
   // 일정 순서 변경 API
   http.patch(`${BASE_URL}/project/:projectId/task/order`, async ({ request, params }) => {
     const accessToken = request.headers.get('Authorization');
diff --git a/src/services/taskService.ts b/src/services/taskService.ts
index 092087d5..46bbd51e 100644
--- a/src/services/taskService.ts
+++ b/src/services/taskService.ts
@@ -2,14 +2,14 @@ import { authAxios } from '@services/axiosProvider';
 
 import type { AxiosRequestConfig } from 'axios';
 import type { Project } from '@/types/ProjectType';
-import type { TaskListWithStatus, TaskOrderForm } from '@/types/TaskType';
+import type { TaskForm, TaskListWithStatus, TaskOrderForm } from '@/types/TaskType';
 
 /**
  * 프로젝트에 속한 모든 일정 목록 조회 API
  *
  * @export
  * @async
- * @param {Project['projectId']} projectId      - 대상 프로젝트 ID
+ * @param {Project['projectId']} projectId      - 프로젝트 ID
  * @param {AxiosRequestConfig} [axiosConfig={}] - axios 요청 옵션 설정 객체
  * @returns {Promise<AxiosResponse<TaskListWithStatus[]>>}
  */
@@ -17,6 +17,19 @@ export async function findTaskList(projectId: Project['projectId'], axiosConfig:
   return authAxios.get<TaskListWithStatus[]>(`/project/${projectId}/task`, axiosConfig);
 }
 
+/**
+ * 일정 생성 API
+ *
+ * @export
+ * @param {Project['projectId']} projectId      - 프로젝트 ID
+ * @param {TaskForm} formData                   - 새로운 일정 정보 객체
+ * @param {AxiosRequestConfig} [axiosConfig={}] - axios 요청 옵션 설정 객체
+ * @returns {Promise<AxiosResponse<void>>}
+ */
+export function createTask(projectId: Project['projectId'], formData: TaskForm, axiosConfig: AxiosRequestConfig = {}) {
+  return authAxios.post(`/project/${projectId}/task`, formData, axiosConfig);
+}
+
 /**
  * 일정 순서 변경 API
  *