From cab917ac52889036de838f78fa98fb56aac56356 Mon Sep 17 00:00:00 2001
From: Jun99uu_Lee <igun0423@naver.com>
Date: Sat, 14 Oct 2023 21:11:38 +0900
Subject: [PATCH] fix: ui bug of modal

---
 client/src/components/Modal/Confrim/index.tsx  |  9 ++++++++-
 client/src/components/Modal/Decision/index.tsx | 11 +++++++++--
 client/src/components/Modal/common.tsx         |  3 +--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Modal/Confrim/index.tsx b/client/src/components/Modal/Confrim/index.tsx
index 440fe92..25fa6b8 100644
--- a/client/src/components/Modal/Confrim/index.tsx
+++ b/client/src/components/Modal/Confrim/index.tsx
@@ -1,5 +1,6 @@
 import { ComponentProps } from 'react';
 import { ModalButton, Message, ModalContent, Title } from '../common';
+import { css } from '@emotion/react';
 
 interface ModalProps extends ComponentProps<'button'> {
   /**
@@ -17,9 +18,15 @@ const ConfirmModal = ({ title, message, ...props }: ModalProps) => {
     <ModalContent>
       <Title>{title}</Title>
       <Message>{message}</Message>
-      <ModalButton {...props}>확인</ModalButton>
+      <ModalButton css={buttonStyle} {...props}>
+        확인
+      </ModalButton>
     </ModalContent>
   );
 };
 
+const buttonStyle = css`
+  width: 20rem;
+`;
+
 export default ConfirmModal;
diff --git a/client/src/components/Modal/Decision/index.tsx b/client/src/components/Modal/Decision/index.tsx
index 6dee56e..8ae78f8 100644
--- a/client/src/components/Modal/Decision/index.tsx
+++ b/client/src/components/Modal/Decision/index.tsx
@@ -26,10 +26,12 @@ const DecisionModal = ({ title, message, onCancle, ...props }: ModalProps) => {
       <Title>{title}</Title>
       <Message>{message}</Message>
       <ButtonsWrapper>
-        <ModalButton css={closeStyle} onClick={onCancle}>
+        <ModalButton css={[closeStyle, commonStyle]} onClick={onCancle}>
           닫기
         </ModalButton>
-        <ModalButton {...props}>확인</ModalButton>
+        <ModalButton css={commonStyle} {...props}>
+          확인
+        </ModalButton>
       </ButtonsWrapper>
     </ModalContent>
   );
@@ -41,6 +43,11 @@ const ButtonsWrapper = styled.div`
   ${flex('row', 'center', 'center', 0.8)};
 `;
 
+const commonStyle = css`
+  flex: 1;
+  max-width: 20rem;
+`;
+
 const closeStyle = css`
   background-color: ${COLORS.disabled};
   color: white;
diff --git a/client/src/components/Modal/common.tsx b/client/src/components/Modal/common.tsx
index b8ad595..35c31fd 100644
--- a/client/src/components/Modal/common.tsx
+++ b/client/src/components/Modal/common.tsx
@@ -26,9 +26,8 @@ export const ModalButton = styled.button`
   background-color: ${COLORS.primary};
   color: ${COLORS.white};
   border-radius: 50rem;
-  flex: 1;
+
   height: 3.2rem;
-  max-width: 20rem;
   ${TYPO.text2.Md};
 
   position: relative;