Merge pull request #9 from gdsc-ssu/dev

fix: ui bug of modal

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;

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;

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;