🎨 Publish(##22): 메인페이지 그리드시스템 적용

modern-agile-team · Sep 29, 2024 · 2d28a4b · 2d28a4b
1 parent 7afbba4
commit 2d28a4b
Showing 1 changed file with 22 additions and 2 deletions.
diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx
@@ -3,8 +3,28 @@ import { LayOutDiv, FeatureDiv } from './style';
 export default function Main() {
   return (
     <GridDiv>
-      <LayOutDiv $marginTop="50px" $height="739px">
-        사이드바
+      <LayOutDiv $height="739px">
+        <FeatureDiv
+          $width="200px"
+          $height="35px"
+          $backGroundColor="#FFFFFF"
+          $marginTop="50px"
+        >
+          로고
+        </FeatureDiv>
+        {['learining', 'Ranking', 'quest', 'store', 'profile', 'setting'].map(
+          (value, index) => (
+            <FeatureDiv
+              $width="197px"
+              $height="53px"
+              $backGroundColor="#FFFFFF"
+              $marginTop="46px"
+              key={index}
+            >
+              {value}
+            </FeatureDiv>
+          )
+        )}
       </LayOutDiv>
       <LayOutDiv $height="100vh ">
         <FeatureDiv