Merge pull request #23 from modern-agile-team/publish/#22/pagi_grid_s…

…etting 메인페이지 그리드 시스템 생성
modern-agile-team · Sep 30, 2024 · b4a8b05 · b4a8b05
2 parents ad4c449 + 2d28a4b
commit b4a8b05
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -1,9 +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" />
+    <link rel="stylesheet" href="./src/style/index.css" />
     <title>Vite + React + TS</title>
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,10 @@
+import Main from './pages/main/Main';
 function App() {
-  return <></>;
+  return (
+    <>
+      <Main></Main>
+    </>
+  );
 }
 
 export default App;
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,5 +1,3 @@
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
-import './index.css';
-
 createRoot(document.getElementById('root')!).render(<App />);
diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx
@@ -0,0 +1,76 @@
+import { GridDiv } from '../../style/gridSystem';
+import { LayOutDiv, FeatureDiv } from './style';
+export default function Main() {
+  return (
+    <GridDiv>
+      <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
+          $width="676px"
+          $height="53px"
+          $backGroundColor="#FFFFFF"
+          $marginTop="42px"
+        >
+          진행도
+        </FeatureDiv>
+        <FeatureDiv
+          $width="676px"
+          $height="123px"
+          $backGroundColor="#FFFFFF"
+          $marginTop="25px"
+        >
+          챕터 선택
+        </FeatureDiv>
+        <FeatureDiv
+          $width="676px"
+          $height="468px"
+          $backGroundColor="#FFFFFF"
+          $marginTop="25px"
+        >
+          챕터
+        </FeatureDiv>
+      </LayOutDiv>
+
+      <LayOutDiv $marginTop="42px" $height="303px">
+        <FeatureDiv
+          $width="240px"
+          $height="52px"
+          $backGroundColor="#FFFFFF"
+          $marginTop="25px"
+        >
+          생명력/프로필
+        </FeatureDiv>
+        <FeatureDiv
+          $width="250px"
+          $height="197px"
+          $backGroundColor="#FFFFFF"
+          $marginTop="54px"
+        >
+          일일 퀘스트
+        </FeatureDiv>
+      </LayOutDiv>
+    </GridDiv>
+  );
+}
diff --git a/src/pages/main/style.ts b/src/pages/main/style.ts
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { LayOut } from './type';
+//아래 코드는 구역을 나누기 위한 것 일 뿐이니 나중에 지워도 됩니다
+export const LayOutDiv = styled.div<LayOut>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: ${({ $marginTop }) => $marginTop || '0px'};
+  height: ${({ $height }) => $height || '0px'};
+  background-color: ${({ $backGroundColor }) => $backGroundColor || 'gray'};
+`;
+export const FeatureDiv = styled.div<LayOut>`
+  width: ${({ $width }) => $width || '0px'};
+  height: ${({ $height }) => $height || '0px'};
+  margin-top: ${({ $marginTop }) => $marginTop || '0px'};
+  background-color: ${({ $backGroundColor }) => $backGroundColor || 'gray'};
+  border: solid 1px;
+  border-radius: 8px;
+`;
diff --git a/src/pages/main/type.ts b/src/pages/main/type.ts
@@ -0,0 +1,6 @@
+export interface LayOut {
+  $marginTop?: string;
+  $height?: string;
+  $width?: string;
+  $backGroundColor?: string;
+}
diff --git a/src/style/gridSystem.ts b/src/style/gridSystem.ts
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+export const GridDiv = styled.div`
+  display: grid;
+  margin: 0 24px 0 24px;
+  grid-template-columns: 2fr 6fr 2fr;
+  column-gap: 24px;
+  grid-template-rows: 100vh;
+`;