Merge pull request #118 from woowacourse-teams/feature/#117

desktop 환경에서의 max width 적용 및 상수화

frontend/src/common/reset.style.ts

@@ -1,3 +1,4 @@
+import { DISPLAY_MAX_WIDTH } from '@_constants/styles';
 import { css } from '@emotion/react';
 
 const reset = css`
@@ -109,6 +110,9 @@ const reset = css`
   }
 
   body {
+    position: relative;
+    max-width: ${DISPLAY_MAX_WIDTH};
+    margin: 0 auto;
     line-height: 1;
   }
 

frontend/src/constants/styles.ts

@@ -0,0 +1 @@
+export const DISPLAY_MAX_WIDTH = '60rem';

frontend/src/layouts/FormLayout/FormBottomWrapper/FormBottomWrapper.style.ts

@@ -1,9 +1,12 @@
+import { DISPLAY_MAX_WIDTH } from '@_constants/styles';
 import { css } from '@emotion/react';
 
 // TODO: 바텀 버튼 UI에 대한 기획 논의 필요
 export const bottomFixedStyle = css`
   position: fixed;
   bottom: 26px;
+
   width: 100%;
+  max-width: ${DISPLAY_MAX_WIDTH};
   padding: 0 16px;
 `;

frontend/src/layouts/HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.style.ts

@@ -1,7 +1,14 @@
+import { DISPLAY_MAX_WIDTH } from '@_constants/styles';
 import { css } from '@emotion/react';
 
 export const fixedWrapperStyle = css`
   position: fixed;
-  right: 22px;
   bottom: 26px;
+
+  display: flex;
+  justify-content: right;
+
+  width: 100%;
+  max-width: ${DISPLAY_MAX_WIDTH};
+  padding-right: 4rem;
 `;

frontend/src/layouts/InformationLayout/InformationBottomWrapper/InformationBottomWrapper.style.ts

@@ -1,9 +1,12 @@
+import { DISPLAY_MAX_WIDTH } from '@_constants/styles';
 import { css } from '@emotion/react';
 
 // TODO: 바텀 버튼 UI에 대한 기획 논의 필요
 export const bottomFixedStyle = css`
   position: fixed;
   bottom: 26px;
+
   width: 100%;
+  max-width: ${DISPLAY_MAX_WIDTH};
   padding: 0 16px;
 `;