add SharedLayout

src/App.jsx

@@ -1,16 +1,20 @@
 import { Route, Routes } from 'react-router-dom';
 import { lazy } from 'react';
+
+import SharedLayout from './components/SharedLayout/SharedLayout';
 // import SharedLayout from './components/SharedLayout/SharedLayout';
 
 const Home = lazy(() => import('../src/pages/Home/Home'));
 
 const test = import.meta.env.VITE_API_TEST;
 
 function App() {
-//   console.log(test);
+  //   console.log(test);
   return (
     <Routes>
-        <Route path="/" element={<Home />} />
+      <Route path="/" element={<SharedLayout />}>
+        <Route index element={<Home />} />
+      </Route>
     </Routes>
   );
 }

src/components/SharedLayout/SharedLayout.jsx

@@ -0,0 +1,15 @@
+import { Suspense } from 'react';
+import { Outlet } from 'react-router-dom';
+import { Container } from './SheradLayout.styled';
+
+const SharedLayout = () => {
+  return (
+    <Container>
+      <Suspense fallback={null}>
+        <Outlet />
+      </Suspense>
+    </Container>
+  );
+};
+
+export default SharedLayout;

src/components/SharedLayout/SheradLayout.styled.jsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+import { mq } from '../../utils';
+
+export const Container = styled.div`
+  margin: 0px auto;
+  padding: 0px 20px;
+
+  ${mq.mobile} {
+    width: 375px;
+  }
+
+  ${mq.tablet} {
+    width: 768px;
+    padding: 0px 32px;
+  }
+
+  ${mq.desktop} {
+    width: 1440px;
+    padding: 0px 96px;
+  }
+`;