UI: #57 프로젝트 레이아웃 UI 변경 (#59)

GU-99 · Jul 22, 2024 · 3bd4058 · 3bd4058
1 parent 85d62d1
commit 3bd4058
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 18 deletions.
diff --git a/src/components/modal/task/CreateModalTask.tsx b/src/components/modal/task/CreateModalTask.tsx
@@ -0,0 +1,30 @@
+import { SubmitHandler } from 'react-hook-form';
+import ModalLayout from '@layouts/ModalLayout';
+import ModalPortal from '@components/modal/ModalPortal';
+import ModalTaskForm from '@components/modal/task/ModalTaskForm';
+import ModaFormButton from '@components/modal/ModaFormButton';
+import { TaskForm } from '@/types/TaskType';
+
+type CreateModalTaskProps = {
+  onClose: () => void;
+};
+
+export default function CreateModalTask({ onClose: handleClose }: CreateModalTaskProps) {
+  // ToDo: 상태 생성을 위한 네트워크 로직 추가
+  const handleSubmit: SubmitHandler<TaskForm> = async (data) => {
+    console.log('생성 폼 제출');
+    console.log(data);
+    handleClose();
+  };
+  return (
+    <ModalPortal>
+      <ModalLayout onClose={handleClose}>
+        <div className="flex h-full flex-col items-center justify-center">
+          {/* ToDo: Task 생성 모달 작성시 수정할 것 */}
+          <ModalTaskForm formId="updateTaskForm" onSubmit={handleSubmit} />
+          <ModaFormButton formId="updateTaskForm" isCreate={false} onClose={handleClose} />
+        </div>
+      </ModalLayout>
+    </ModalPortal>
+  );
+}
diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx
@@ -0,0 +1,21 @@
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { Task, TaskForm } from '@/types/TaskType';
+
+type ModalTaskFromProps = {
+  formId: string;
+  taskId?: Task['taskId'];
+  onSubmit: SubmitHandler<TaskForm>;
+};
+
+// ToDo: Task 모달 작성시 Task Form 만들기
+export default function ModalTaskForm({ formId, taskId, onSubmit }: ModalTaskFromProps) {
+  const { register, handleSubmit } = useForm<TaskForm>({
+    mode: 'onChange',
+    defaultValues: {},
+  });
+  return (
+    <form id={formId} className="mb-10 flex grow flex-col justify-center" onSubmit={handleSubmit(onSubmit)}>
+      <div>{taskId}</div>
+    </form>
+  );
+}
diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx
@@ -0,0 +1,31 @@
+import { SubmitHandler } from 'react-hook-form';
+import ModalLayout from '@layouts/ModalLayout';
+import ModalPortal from '@components/modal/ModalPortal';
+import ModalTaskForm from '@components/modal/task/ModalTaskForm';
+import ModaFormButton from '@components/modal/ModaFormButton';
+import { Task, TaskForm } from '@/types/TaskType';
+
+type UpdateModalTaskProps = {
+  taskId: Task['taskId'];
+  onClose: () => void;
+};
+
+export default function UpdateModalTask({ taskId, onClose: handleClose }: UpdateModalTaskProps) {
+  // ToDo: 상태 생성을 위한 네트워크 로직 추가
+  const handleSubmit: SubmitHandler<TaskForm> = async (data) => {
+    console.log('생성 폼 제출');
+    console.log(data);
+    handleClose();
+  };
+  return (
+    <ModalPortal>
+      <ModalLayout onClose={handleClose}>
+        <div className="flex h-full flex-col items-center justify-center">
+          {/* ToDo: Task 수정 모달 작성시 수정할 것 */}
+          <ModalTaskForm formId="updateTaskForm" taskId={taskId} onSubmit={handleSubmit} />
+          <ModaFormButton formId="updateTaskForm" isCreate={false} onClose={handleClose} />
+        </div>
+      </ModalLayout>
+    </ModalPortal>
+  );
+}
diff --git a/src/layouts/page/ProjectLayout.tsx b/src/layouts/page/ProjectLayout.tsx
@@ -6,10 +6,12 @@ import ListProject from '@components/sidebar/ListProject';
 import CreateModalProjectStatus from '@components/modal/project-status/CreateModalProjectStatus';
 import { PROJECT_DUMMY } from '@mocks/mockData';
 import { RiSettings5Fill } from 'react-icons/ri';
+import CreateModalTask from '@/components/modal/task/CreateModalTask';
 
 export default function ProjectLayout() {
   const { projectId } = useParams();
-  const { showModal, openModal, closeModal } = useModal();
+  const { showModal: showTaskModal, openModal: openTaskModal, closeModal: closeTaskModal } = useModal();
+  const { showModal: showStatusModal, openModal: openStatusModal, closeModal: closeStatusModal } = useModal();
   const target = useMemo(
     () => PROJECT_DUMMY.find((project) => project.projectId.toString() === projectId),
     [projectId],
@@ -45,17 +47,21 @@ export default function ProjectLayout() {
                   </NavLink>
                 </li>
               </ul>
-              <div className="text-main">
-                <button type="button" onClick={openModal}>
-                  <small>+</small> New State
+              <div className="text-main *:ml-10">
+                <button type="button" onClick={openTaskModal}>
+                  + 할일 추가
+                </button>
+                <button type="button" onClick={openStatusModal}>
+                  + 상태 추가
                 </button>
               </div>
             </div>
             <Outlet />
           </div>
         </section>
       </section>
-      {showModal && <CreateModalProjectStatus onClose={closeModal} />}
+      {showTaskModal && <CreateModalTask onClose={closeTaskModal} />}
+      {showStatusModal && <CreateModalProjectStatus onClose={closeStatusModal} />}
     </>
   );
 }
diff --git a/src/pages/project/CalendarPage.tsx b/src/pages/project/CalendarPage.tsx
@@ -5,13 +5,11 @@ import CalendarToolbar from '@components/task/calendar/CalendarToolbar';
 import CustomDateHeader from '@components/task/calendar/CustomDateHeader';
 import CustomEventWrapper from '@components/task/calendar/CustomEventWrapper';
 import useModal from '@hooks/useModal';
-import ModalLayout from '@layouts/ModalLayout';
-import ModalPortal from '@components/modal/ModalPortal';
-import ModaFormButton from '@components/modal/ModaFormButton';
 import { TASK_DUMMY } from '@mocks/mockData';
 import { TaskListWithStatus, TaskWithStatus } from '@/types/TaskType';
 import { CustomEvent } from '@/types/CustomEventType';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
+import UpdateModalTask from '@/components/modal/task/UpdateModalTask';
 
 function getCalendarTask(statusTasks: TaskListWithStatus[]) {
   const calendarTasks: TaskWithStatus[] = [];
@@ -110,16 +108,7 @@ export default function CalendarPage() {
         selectable
         onSelectSlot={handleSelectSlot}
       />
-      {showModal && (
-        <ModalPortal>
-          <ModalLayout onClose={closeModal}>
-            <div className="flex h-full flex-col items-center justify-center">
-              <div>{selectedTask?.name}</div>
-              <ModaFormButton formId="updateStatusForm" isCreate={false} onClose={closeModal} />
-            </div>
-          </ModalLayout>
-        </ModalPortal>
-      )}
+      {showModal && <UpdateModalTask taskId={selectedTask!.taskId} onClose={closeModal} />}
     </div>
   );
 }
diff --git a/src/types/TaskType.tsx b/src/types/TaskType.tsx
@@ -20,5 +20,10 @@ export type Task = {
   endDate: string;
 };
 
+// ToDo: Task 추가 모달 작업시 같이 정의할 것
+export type TaskForm = {
+  name: string;
+};
+
 export type TaskWithStatus = RenameKeys<ProjectStatus, StatusKeyMapping> & Task;
 export type TaskListWithStatus = ProjectStatus & { tasks: Task[] };