max-width theme으로 변경

frontend/src/common/reset.style.ts

@@ -1,4 +1,4 @@
-import { DISPLAY_MAX_WIDTH } from '@_constants/styles';
+import layout from '@_common/theme/layout';
 import { css } from '@emotion/react';
 
 const reset = css`
@@ -111,7 +111,7 @@ const reset = css`
 
   body {
     position: relative;
-    max-width: ${DISPLAY_MAX_WIDTH};
+    ${layout.default}
     margin: 0 auto;
     line-height: 1;
   }

frontend/src/common/theme/layout.ts

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+
+const layout = {
+  default: css`
+    max-width: 60rem;
+  `,
+};
+
+export default layout;

frontend/src/common/theme/theme.style.ts

@@ -2,9 +2,11 @@ import { Theme } from './theme.type';
 import typography from './typography';
 import colorPalette from './colorPalette';
 import semantic from './semantic';
+import layout from './layout';
 
 export const theme: Theme = {
   colorPalette,
   typography,
   semantic,
+  layout,
 };

frontend/src/common/theme/theme.type.ts

@@ -41,8 +41,13 @@ export interface Typography {
   Tiny: SerializedStyles;
 }
 
+export interface Layout {
+  default: SerializedStyles;
+}
+
 export interface Theme {
   colorPalette: Colors;
   typography: Typography;
   semantic: Semantic;
+  layout: Layout;
 }

frontend/src/emotion.d.ts → frontend/src/emotion.d.ts

@@ -5,5 +5,6 @@ declare module '@emotion/react' {
     colorPalette: Colors;
     typography: Typography;
     semantic: Semantic;
+    layout: Layout;
   }
 }