From 2ae8fb827b27513980f1fcd9484ee67772c5f721 Mon Sep 17 00:00:00 2001
From: krokerdile <crazykroker@gmail.com>
Date: Sat, 11 Nov 2023 11:42:07 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20RightBar=20top,bottom=20=EC=B9=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/MainPage.jsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/page/MainPage.jsx b/src/page/MainPage.jsx
index 371b9ee..adde490 100644
--- a/src/page/MainPage.jsx
+++ b/src/page/MainPage.jsx
@@ -1,18 +1,21 @@
 import styled from "styled-components";
 
-const Main = () => {
+const MainPage = () => {
   return (
     <GridContainer>
       <LeftBar>sidebar</LeftBar>
       <GridItem>main</GridItem>
-      <RightBar>sidebar</RightBar>
+      <RightBar>
+        <RightBarTop>Top</RightBarTop>
+        <RightBarBottom>Bottom</RightBarBottom>
+      </RightBar>
     </GridContainer>
   );
 };
 
 const GridContainer = styled.div`
   display: grid;
-  grid-template-columns: 2fr 6fr 2fr;
+  grid-template-columns: 2fr 4fr 3fr;
   grid-template-rows: 1fr;
   width: 100vw;
   height: 100vh;
@@ -46,4 +49,16 @@ const RightBar = styled(GridItem)`
     grid-row: 3;
   }
 `;
-export default Main;
+
+const RightBarTop = styled.div`
+  flex: 1;
+  height: 50%;
+  background-color: lightblue;
+`;
+
+const RightBarBottom = styled.div`
+  flex: 1;
+  height: 50%;
+  background-color: lightgreen;
+`;
+export default MainPage;