[chore] 모달 스타일 임시 수정

re-Duck · Jun 10, 2024 · fa63472 · fa63472
1 parent 9025d1b
commit fa63472
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/client/src/components/Modal/index.tsx b/client/src/components/Modal/index.tsx
@@ -15,7 +15,7 @@ export default function Modal() {
     <>
       {type !== ModalType.CLOSE && (
         <div className="relative z-20">
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75"></div>
+          <div className="fixed inset-0 bg-opacity-75 bg-gray-scale-100"></div>
           <div className="fixed inset-0 z-20 overflow-y-auto">
             <div className="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
               <div className="relative w-full overflow-hidden text-left transition-all delay-1000 transform bg-white rounded-lg shadow-xl sm:my-8 sm:max-w-lg">
@@ -37,7 +37,7 @@ export default function Modal() {
                   </div>
                 </div>
 
-                <div className="px-4 py-3 bg-gray-50 sm:flex sm:flex-row-reverse sm:px-6">
+                <div className="flex gap-3 px-4 py-3 [&>:nth-child(n)]:grow bg-gray-50 sm:flex-row-reverse sm:px-6 sm:[&>:nth-child(n)]:grow-0">
                   {IS_CONFIRM_MODAL ? (
                     <>
                       <ModalButton

diff --git a/client/src/components/Modal/modal-button.tsx b/client/src/components/Modal/modal-button.tsx
@@ -2,6 +2,9 @@
 
 import React, { useEffect } from 'react';
 
+// components
+import Button, { ButtonColorType } from '../base/Button';
+
 interface IType {
   type: 'check' | 'yes' | 'cancle';
   onClick: () => void;
@@ -10,26 +13,27 @@ interface IType {
 const CONTENT = {
   check: {
     content: '확인',
-    className:
-      'inline-flex w-full justify-center rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto',
+    color: 'yellow',
   },
   yes: {
     content: '예',
-    className:
-      'inline-flex w-full justify-center rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto',
+    color: 'yellow',
   },
   cancle: {
     content: '취소',
-    className:
-      'inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto',
+    color: 'yellow_line',
   },
 };
 
 export default function ModalButton({ type, onClick }: IType) {
-  const { content, className } = CONTENT[type];
+  const { content, color } = CONTENT[type] as {
+    content: string;
+    color: ButtonColorType;
+  };
 
   const handdleKeyup = (e: KeyboardEvent) => {
-    if ((e.keyCode === 13 || e.keyCode === 27) && type !== 'cancle') {
+    const key = e.key || e.keyCode;
+    if ((key === 13 || key === 27) && type !== 'cancle') {
       onClick();
     }
   };
@@ -39,8 +43,8 @@ export default function ModalButton({ type, onClick }: IType) {
     return () => document.removeEventListener('keyup', handdleKeyup);
   }, []);
   return (
-    <button type="button" className={className} onClick={onClick}>
+    <Button type="button" color={color} onClick={onClick}>
       {content}
-    </button>
+    </Button>
   );
 }
diff --git a/client/src/components/Modal/modal-icon.tsx b/client/src/components/Modal/modal-icon.tsx
@@ -14,7 +14,7 @@ export default function ModalIcon({ type }: IType) {
     <div
       className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-${color}-100 sm:mx-0 sm:h-10 sm:w-10`}
     >
-      <Icon icon={shape} color={color} fontSize={24} />
+      <Icon icon={shape} color={color} fontSize={36} />
     </div>
   );
 }