fix: ui bug of modal

gdsc-ssu · Oct 14, 2023 · cab917a · cab917a
1 parent c9794da
commit cab917a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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;