Merge pull request #138 from woowacourse-teams/feat/#135

max-width theme으로 변경
woowacourse-teams · Jul 30, 2024 · e31759d · e31759d
2 parents 64ecf0d + 644be78
commit e31759d
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 2 deletions.
diff --git a/frontend/src/common/reset.style.ts b/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;
   }

diff --git a/frontend/src/common/theme/layout.ts b/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;
diff --git a/frontend/src/common/theme/theme.style.ts b/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,
 };
diff --git a/frontend/src/common/theme/theme.type.ts b/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;
 }
diff --git a/frontend/src/emotion.d.ts → frontend/src/emotion.d.ts b/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;
   }
 }