UI: #21 Default Layout의 contents 부분의 크기 제한 설정

GU-99 · Jun 20, 2024 · 927aa99 · 927aa99
1 parent 1b173dc
commit 927aa99
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/globals.css b/src/globals.css
@@ -9,6 +9,7 @@
     /* contents size */
     --height-header: 4rem;
     --height-contents: calc(100vh - var(--height-header));
+    --max-width-contents: 90rem;
 
     /* font-family */
     --font-family-roboto: 'Roboto', sans-serif;

diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx
@@ -1,11 +1,13 @@
 import { Outlet } from 'react-router-dom';
-import Header from '@/components/common/Header';
+import Header from '@components/common/Header';
 
 export default function DefaultLayout() {
   return (
     <>
       <Header />
-      <Outlet />
+      <main className="m-auto h-contents max-w-contents">
+        <Outlet />
+      </main>
     </>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -18,6 +18,9 @@ export default {
         header: 'var(--height-header)',
         contents: 'var(--height-contents)',
       },
+      maxWidth: {
+        contents: 'var(--max-width-contents)',
+      },
       fontFamily: {
         roboto: 'var(--font-family-roboto)',
       },