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) => { {title} {message} - 확인 + + 확인 + ); }; +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} {message} - + 닫기 - 확인 + + 확인 + ); @@ -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;