From 6883968db265b6cace51749d8842ba55892ff3ca Mon Sep 17 00:00:00 2001
From: krokerdile <crazykroker@gmail.com>
Date: Sat, 11 Nov 2023 11:24:19 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Layout=20Grid=20=EC=B6=94=EA=B0=80=20-?=
 =?UTF-8?q?=20left,=20main,=20right=20=EC=88=9C=EC=9C=BC=EB=A1=9C=20-=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=EC=9D=80=20=EC=9D=BC=EB=8B=A8=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85=ED=95=98=EB=8A=94=20=EA=B9=80=EC=97=90=20?=
 =?UTF-8?q?=ED=95=B4=EB=B4=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/MainPage.jsx | 46 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/page/MainPage.jsx b/src/page/MainPage.jsx
index 45238a4..371b9ee 100644
--- a/src/page/MainPage.jsx
+++ b/src/page/MainPage.jsx
@@ -1,5 +1,49 @@
+import styled from "styled-components";
+
 const Main = () => {
-  return <>Main</>;
+  return (
+    <GridContainer>
+      <LeftBar>sidebar</LeftBar>
+      <GridItem>main</GridItem>
+      <RightBar>sidebar</RightBar>
+    </GridContainer>
+  );
 };
 
+const GridContainer = styled.div`
+  display: grid;
+  grid-template-columns: 2fr 6fr 2fr;
+  grid-template-rows: 1fr;
+  width: 100vw;
+  height: 100vh;
+  background-color: white;
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 2fr 1fr;
+  }
+`;
+
+const GridItem = styled.div`
+  background-color: gray;
+  border: 1px dotted black;
+  margin: 1px;
+  @media (max-width: 768px) {
+    grid-row: 2;
+  }
+`;
+
+const LeftBar = styled(GridItem)`
+  background-color: white;
+  grid-row: span 3;
+  @media (max-width: 768px) {
+    grid-row: 1;
+  }
+`;
+const RightBar = styled(GridItem)`
+  background-color: white;
+  grid-row: span 3;
+  @media (max-width: 768px) {
+    grid-row: 3;
+  }
+`;
 export default Main;