feat: RightBar top,bottom 칸 추가

ContractAssistant · Nov 11, 2023 · 2ae8fb8 · 2ae8fb8
1 parent 6883968
commit 2ae8fb8
Showing 1 changed file with 19 additions and 4 deletions.
diff --git 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;