Merge pull request #30 from codestates-seb/dev-client#29/MainLayout

[Feat] #29 폴더 구조 및 메인페이지 레이아웃 세팅
codestates-seb · Aug 30, 2023 · f17a06c · f17a06c
2 parents 58eb6cd + f42a4d9
commit f17a06c
Show file tree

Hide file tree

Showing 10 changed files with 2,298 additions and 240 deletions.
diff --git a/client/index.html b/client/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>StockHolm</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.0.7"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,7 +1,8 @@
 import "./App.css";
+import MainPage from "./page/MainPage";
 
 function App() {
-  return <div></div>;
+  return <MainPage />;
 }
 
 export default App;
diff --git a/client/src/asset/README.md b/client/src/asset/README.md
diff --git a/client/src/components/README.md b/client/src/components/README.md
diff --git a/client/src/hooks/README.md b/client/src/hooks/README.md
diff --git a/client/src/models/README.md b/client/src/models/README.md
diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
@@ -0,0 +1,55 @@
+import { styled } from "styled-components";
+
+const MainPage = () => {
+  return (
+    <Container>
+      <Header />
+      <Main>
+        <LeftSection></LeftSection>
+        <CentralSection></CentralSection>
+        <RightSection></RightSection>
+      </Main>
+    </Container>
+  );
+};
+
+export default MainPage;
+
+const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+`;
+
+const Header = styled.header`
+  width: 100%;
+  height: 51px;
+  border: 1px solid black;
+`;
+
+const Main = styled.main`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+`;
+
+const LeftSection = styled.section`
+  min-width: 248px;
+  height: 100%;
+  border: 1px solid black;
+`;
+
+const RightSection = styled.section`
+  flex: 3.3 0 0;
+  min-width: 400px;
+  height: 100%;
+  border: 1px solid black;
+`;
+
+const CentralSection = styled.section`
+  flex: 6.7 0 0;
+  min-width: 630px;
+  height: 100%;
+`;
diff --git a/client/src/utils/README.md b/client/src/utils/README.md