Merge pull request #3 from junction-asia-2023/feat/Layout

feat(layout): add default layout

src/features/app/Container.tsx

@@ -1,14 +1,17 @@
 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();
 
 const AppContainer: FunctionComponent = () => {
   return (
     <QueryClientProvider client={queryClient}>
-      <HomeContainer />
+      <Layout>
+        <HomeContainer />
+      </Layout>
     </QueryClientProvider>
   );
 };

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="layout-container">{children}</div>;
+};
+
+export default Layout;

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;
 }
+
+.layout-container {
+  min-width: 320px;
+  max-width: 480px;
+}

src/features/shared/style/index.scss

@@ -1,3 +1,2 @@
 @import './global';
 @import './color';
-@import './global.scss';