UI: #107 모달 레이아웃 & 모달 버튼 컴포넌트 UI 수정

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>
   );
 }

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>
   );
 }