design: 모달 반응형 적용 (SP-694)

Ludo-SMP · Aug 29, 2024 · 2d115b7 · 2d115b7
1 parent 76e73c4
commit 2d115b7
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/src/Components/Common/Modal/index.tsx b/src/Components/Common/Modal/index.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import Button from '../Button';
 import { useModalStore } from '@/store/modal';
+import { media } from '@/Styles/theme';
 
 export interface ModalProps {
   /** 모달 안쪽 컴포넌트 */
@@ -87,6 +88,10 @@ const ModalWrapper = styled.div`
   background-color: ${({ theme }) => theme.color.white};
   border-radius: ${({ theme }) => theme.borderRadius.medium};
   border: 1px solid ${({ theme }) => theme.color.black1};
+
+  ${media.custom(600)} {
+    width: calc(100vw - 20px);
+  }
 `;
 
 const ModalInfoWrapper = styled.div<{ alignTitle: 'flex-start' | 'center' }>`
@@ -133,6 +138,10 @@ const ModalContentWrapper = styled.div`
     align-self: stretch;
     background: ${({ theme }) => theme.color.gray1};
   }
+
+  ${media.custom(600)} {
+    width: calc(100vw - 100px);
+  }
 `;
 
 const ModalBtnsWrapper = styled.div<{ isBtnWidthEqual: boolean; cancelBtnText: string }>`