Merge pull request #33 from SCBJ-7/feature/#31-main

[#31] 최상위 컨테이너 설정
SCBJ-7 · Jan 4, 2024 · 5713198 · 5713198
2 parents 87d77b3 + c516857
commit 5713198
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,16 @@
 import { Outlet } from "react-router-dom";
+import * as S from "./components/layout";
 
 function App() {
-  return <Outlet />;
+  return (
+    <S.Container>
+      {/* <SHeader /> */}
+      <S.Wrapper>
+        <Outlet />
+      </S.Wrapper>
+      {/* <SFooter/> */}
+    </S.Container>
+  );
 }
 
 export default App;
diff --git a/src/components/.gitkeep b/src/components/.gitkeep
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
@@ -0,0 +1,31 @@
+import { styled } from "styled-components";
+
+export const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  background-color: ${({ theme }) => theme.color.greyScale6};
+`;
+
+export const Wrapper = styled.div`
+  max-width: 768px;
+  min-width: 360px;
+  width: 100%;
+  height: 100%;
+
+  background-color: white;
+`;
+
+/* 
+SHeader에 들어갈 컴포넌트 예시입니다.
+export const SHeader = styled.div`
+  width: 100%;
+  height: 56px;
+  background-color: ${({theme}) => theme.color.greyScale2};
+`;
+*/