From 77ab764d9dcdc7b06a652efecb7c7ccba6c0af6a Mon Sep 17 00:00:00 2001
From: anyl92 <yulim9592@gmail.com>
Date: Sat, 19 Aug 2023 14:06:42 +0900
Subject: [PATCH 1/2] feat(layout): add default layout

---
 src/features/app/Container.tsx            | 5 ++++-
 src/features/shared/components/Layout.tsx | 8 ++++++++
 src/features/shared/style/global.scss     | 6 +++++-
 src/features/shared/style/index.scss      | 1 -
 4 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 src/features/shared/components/Layout.tsx

diff --git a/src/features/app/Container.tsx b/src/features/app/Container.tsx
index 1d6d029..aa4587a 100644
--- a/src/features/app/Container.tsx
+++ b/src/features/app/Container.tsx
@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { FunctionComponent } from 'react';
 
+import Layout from '../shared/components/Layout';
 import HomeContainer from '../home/Container';
 
 const queryClient = new QueryClient();
@@ -8,7 +9,9 @@ const queryClient = new QueryClient();
 const AppContainer: FunctionComponent = () => {
   return (
     <QueryClientProvider client={queryClient}>
-      <HomeContainer />
+      <Layout>
+        <HomeContainer />
+      </Layout>
     </QueryClientProvider>
   );
 };
diff --git a/src/features/shared/components/Layout.tsx b/src/features/shared/components/Layout.tsx
new file mode 100644
index 0000000..4d898d7
--- /dev/null
+++ b/src/features/shared/components/Layout.tsx
@@ -0,0 +1,8 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+import '../style/index.scss';
+
+const Layout: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  return <div className="root-container">{children}</div>;
+};
+
+export default Layout;
diff --git a/src/features/shared/style/global.scss b/src/features/shared/style/global.scss
index 78f36b1..36f2e32 100644
--- a/src/features/shared/style/global.scss
+++ b/src/features/shared/style/global.scss
@@ -6,6 +6,10 @@ body {
   margin: 0;
   display: flex;
   place-content: center;
-  min-width: $min-width;
   min-height: 100vh;
 }
+
+.root-container {
+  min-width: 320px;
+  max-width: 480px;
+}
\ No newline at end of file
diff --git a/src/features/shared/style/index.scss b/src/features/shared/style/index.scss
index bb5700c..ef85bf8 100644
--- a/src/features/shared/style/index.scss
+++ b/src/features/shared/style/index.scss
@@ -1,3 +1,2 @@
 @import './global';
 @import './color';
-@import './global.scss';

From 27682cc2dd9f598e9c48998085daa4068225f1b3 Mon Sep 17 00:00:00 2001
From: anyl92 <yulim9592@gmail.com>
Date: Sat, 19 Aug 2023 14:09:30 +0900
Subject: [PATCH 2/2] chore(layout): change class name

---
 src/features/shared/components/Layout.tsx | 2 +-
 src/features/shared/style/global.scss     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/shared/components/Layout.tsx b/src/features/shared/components/Layout.tsx
index 4d898d7..2347a6e 100644
--- a/src/features/shared/components/Layout.tsx
+++ b/src/features/shared/components/Layout.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent, PropsWithChildren } from 'react';
 import '../style/index.scss';
 
 const Layout: FunctionComponent<PropsWithChildren> = ({ children }) => {
-  return <div className="root-container">{children}</div>;
+  return <div className="layout-container">{children}</div>;
 };
 
 export default Layout;
diff --git a/src/features/shared/style/global.scss b/src/features/shared/style/global.scss
index 36f2e32..2a272ea 100644
--- a/src/features/shared/style/global.scss
+++ b/src/features/shared/style/global.scss
@@ -9,7 +9,7 @@ body {
   min-height: 100vh;
 }
 
-.root-container {
+.layout-container {
   min-width: 320px;
   max-width: 480px;
 }
\ No newline at end of file