UI: #107 모달 레이아웃 UI 수정 (#108)

* UI: #107 모달 레이아웃 & 모달 버튼 컴포넌트 UI 수정 * UI: #107 프로젝트 상태 Form UI 수정
GU-99 · Sep 5, 2024 · bd4382a · bd4382a
1 parent f4a8e48
commit bd4382a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/src/components/modal/ModalFormButton.tsx b/src/components/modal/ModalFormButton.tsx
@@ -6,13 +6,10 @@ type ModalFormButtonProps = {
 
 export default function ModalFormButton({ formId, isCreate, onClose }: ModalFormButtonProps) {
   return (
-    <div className="min-h-20">
-      <button type="submit" form={formId} className="mr-10 h-full rounded-md bg-main px-10 text-white">
+    <div className="min-h-25 w-4/5">
+      <button type="submit" form={formId} className="mr-10 h-full w-full rounded-md bg-main px-10 text-white">
         {isCreate ? '등록' : '수정'}
       </button>
-      <button type="button" className="h-full rounded-md bg-button px-10" onClick={onClose}>
-        닫기
-      </button>
     </div>
   );
 }
diff --git a/src/components/modal/project-status/ModalProjectStatusForm.tsx b/src/components/modal/project-status/ModalProjectStatusForm.tsx
@@ -63,7 +63,7 @@ export default function ModalProjectStatusForm({ formId, project, statusId, onSu
             <label
               htmlFor={colorCode}
               style={{ backgroundColor: colorCode }}
-              className={`inline-block size-20 cursor-pointer rounded-full ${isUsable && watch('colorCode') === colorCode ? 'border-4 border-selected' : ''}`}
+              className={`inline-block size-25 cursor-pointer rounded-full ${isUsable && watch('colorCode') === colorCode ? 'border-4 border-selected' : ''}`}
             >
               <input
                 type="radio"
@@ -73,7 +73,7 @@ export default function ModalProjectStatusForm({ formId, project, statusId, onSu
                 disabled={!isUsable}
                 {...register('colorCode', STATUS_VALIDATION_RULES.COLOR(colorList))}
               />
-              {!isUsable && <RiProhibited2Fill className="size-20 text-white" />}
+              {!isUsable && <RiProhibited2Fill className="size-25 text-white" />}
             </label>
           </div>
         ))}

diff --git a/src/layouts/ModalLayout.tsx b/src/layouts/ModalLayout.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { IoMdCloseCircle } from 'react-icons/io';
 
 type ModalLayoutProps = {
   onClose: () => void;
@@ -15,12 +16,22 @@ export default function ModalLayout({ onClose, children }: ModalLayoutProps) {
     return () => globalThis.removeEventListener('keydown', handleKeyDownClose);
   }, []);
 
+  const handleCloseClick = () => onClose();
+
   return (
-    <div
+    <section
       className="absolute bottom-0 left-0 right-0 top-0 z-20 flex items-center justify-center bg-black/50"
       tabIndex={-1}
     >
-      <div className="flex h-4/5 max-h-375 w-375 flex-col items-center overflow-auto bg-white p-20">{children}</div>
-    </div>
+      <article className="flex h-4/5 max-h-375 w-375 flex-col items-center overflow-auto bg-white p-20">
+        <header className="flex w-full justify-end">
+          <IoMdCloseCircle
+            className="size-12 cursor-pointer text-close hover:text-[#DF0000]"
+            onClick={handleCloseClick}
+          />
+        </header>
+        <div className="flex w-full grow flex-col items-center *:w-4/5">{children}</div>
+      </article>
+    </section>
   );
 }