feat: #12 Redefine Layout Style

src/layout/DefaultLayout.tsx

@@ -0,0 +1,24 @@
+import { css } from "@emotion/react";
+import { Fragment, PropsWithChildren } from "react";
+
+export function DefaultLayout({ children }: PropsWithChildren) {
+  return (
+    <Fragment>
+      {/* FIXME: 헤더 컴포넌트 작업 시, 해당 헤더 엘리먼트 제거 */}
+      <header
+        css={css`
+          height: 4.6rem;
+        `}
+      />
+      <main
+        css={css`
+          flex: 1 1 0;
+          display: flex;
+          flex-direction: column;
+        `}
+      >
+        {children}
+      </main>
+    </Fragment>
+  );
+}

src/layout/GlobalLayout.tsx

@@ -0,0 +1,26 @@
+import { css } from "@emotion/react";
+import { Outlet } from "react-router-dom";
+
+export default function GlobalLayout() {
+  return (
+    <div
+      css={css`
+        width: 100vw;
+        max-width: 48rem;
+        min-height: 100dvh;
+        box-shadow:
+          0 0.1rem 0.3rem 0 rgb(0 0 0 / 0.1),
+          0 0.1rem 0.2rem -0.1rem rgb(0 0 0 / 0.1);
+        margin: 0 auto;
+        padding: 0 2rem;
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: column;
+        background-color: #f1f3f5;
+      `}
+    >
+      <Outlet />
+    </div>
+  );
+}

src/router/index.tsx

@@ -2,24 +2,24 @@ import { Fragment } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 import MainPage from "@/app/MainPage.tsx"; /* FIXME - 실제 메인 페이지 작성 후 대체해주세요. */
-import { DefaultLayout } from "@/layout/default.tsx";
 import Staging from "@/app/test/Staging.tsx";
+import GlobalLayout from "@/layout/GlobalLayout.tsx";
 
 const routerChildren = [
   {
     path: "/",
     element: <MainPage />,
   },
   {
-    path: '/staging',
-    element: <Staging/>
-  }
+    path: "/staging",
+    element: <Staging />,
+  },
 ];
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <DefaultLayout />,
+    element: <GlobalLayout />,
     errorElement: <Fragment />,
     children: routerChildren,
   },