UI: #63 모달 레이아웃 스타일 수정

GU-99 · Aug 5, 2024 · 18f5af3 · 18f5af3
1 parent 2096132
commit 18f5af3
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 20 deletions.
diff --git a/src/components/modal/ModaFormButton.tsx b/src/components/modal/ModaFormButton.tsx
@@ -6,7 +6,7 @@ type ModalFormButtonProps = {
 
 export default function ModaFormButton({ formId, isCreate, onClose }: ModalFormButtonProps) {
   return (
-    <div className="h-20">
+    <div className="min-h-20">
       <button type="submit" form={formId} className="mr-10 h-full rounded-md bg-main px-10 text-white">
         {isCreate ? '등록' : '수정'}
       </button>

diff --git a/src/components/modal/project-status/CreateModalProjectStatus.tsx b/src/components/modal/project-status/CreateModalProjectStatus.tsx
@@ -19,10 +19,8 @@ export default function CreateModalProjectStatus({ onClose: handleClose }: Creat
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <div className="flex h-full flex-col items-center justify-center">
-          <ModalProjectStatusForm formId="createStatusForm" onSubmit={handleSubmit} />
-          <ModaFormButton formId="createStatusForm" isCreate onClose={handleClose} />
-        </div>
+        <ModalProjectStatusForm formId="createStatusForm" onSubmit={handleSubmit} />
+        <ModaFormButton formId="createStatusForm" isCreate onClose={handleClose} />
       </ModalLayout>
     </ModalPortal>
   );

diff --git a/src/components/modal/project-status/UpdateModalProjectStatus.tsx b/src/components/modal/project-status/UpdateModalProjectStatus.tsx
@@ -21,10 +21,8 @@ export default function UpdateModalProjectStatus({ statusId, onClose: handleClos
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <div className="flex h-full flex-col items-center justify-center">
-          <ModalProjectStatusForm formId="updateStatusForm" statusId={statusId} onSubmit={handleSubmit} />
-          <ModaFormButton formId="updateStatusForm" isCreate={false} onClose={handleClose} />
-        </div>
+        <ModalProjectStatusForm formId="updateStatusForm" statusId={statusId} onSubmit={handleSubmit} />
+        <ModaFormButton formId="updateStatusForm" isCreate={false} onClose={handleClose} />
       </ModalLayout>
     </ModalPortal>
   );

diff --git a/src/components/modal/task/CreateModalTask.tsx b/src/components/modal/task/CreateModalTask.tsx
@@ -19,11 +19,8 @@ export default function CreateModalTask({ onClose: handleClose }: CreateModalTas
   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>
+        <ModalTaskForm formId="createTaskForm" onSubmit={handleSubmit} />
+        <ModaFormButton formId="createTaskForm" isCreate onClose={handleClose} />
       </ModalLayout>
     </ModalPortal>
   );

diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx
@@ -20,11 +20,9 @@ export default function UpdateModalTask({ taskId, onClose: handleClose }: Update
   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>
+        {/* ToDo: Task 수정 모달 작성시 수정할 것 */}
+        <ModalTaskForm formId="updateTaskForm" taskId={taskId} onSubmit={handleSubmit} />
+        <ModaFormButton formId="updateTaskForm" isCreate={false} onClose={handleClose} />
       </ModalLayout>
     </ModalPortal>
   );

diff --git a/src/layouts/ModalLayout.tsx b/src/layouts/ModalLayout.tsx
@@ -20,7 +20,7 @@ export default function ModalLayout({ onClose, children }: ModalLayoutProps) {
       className="absolute bottom-0 left-0 right-0 top-0 z-20 flex items-center justify-center bg-black/50"
       tabIndex={-1}
     >
-      <div className="h-4/5 max-h-375 min-w-375 overflow-auto bg-white p-20">{children}</div>
+      <div className="flex h-4/5 max-h-375 min-w-375 flex-col items-center overflow-auto bg-white p-20">{children}</div>
     </div>
   );
 }