Merge pull request #489 from woowacourse-teams/fix/#488

알림 허욜 모달 UI 문제 해결 (임시방편)
woowacourse-teams · Aug 23, 2024 · ed5e841 · ed5e841
2 parents 907f220 + ec1641d
commit ed5e841
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/frontend/src/pages/MainPage/MainPage.style.ts b/frontend/src/pages/MainPage/MainPage.style.ts
@@ -1,3 +1,4 @@
+import { DISPLAY_MAX_WIDTH } from '@_constants/styles';
 import { css, Theme } from '@emotion/react';
 
 export const headerButton = css`
@@ -14,5 +15,8 @@ export const headerLeft = css`
 
 export const ModalContent = (props: { theme: Theme }) => css`
   ${props.theme.typography.s1}
-  margin: 5rem;
+  width: 100vw;
+  max-width: calc(${DISPLAY_MAX_WIDTH} * 0.8);
+  margin-bottom: 4rem;
+  padding-right: 60px;
 `;
diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
@@ -187,7 +187,8 @@ export default function MainPage() {
           <Modal onClose={handleModalClose}>
             <div css={S.ModalContent({ theme })}>
               알림을 허용하시면 모임에 대한 알림을 받을 수 있습니다.
-              <br /> 우측 상단에 알림 버튼을 눌러주세요
+              <br />
+              우측 상단의 알림 버튼을 눌러주세요.
             </div>
             <Button shape="bar" onClick={handleModalClose}>
               닫기