🎨 Publish(#32): 그리드 비율 수정

modern-agile-team · Oct 2, 2024 · 06d1667 · 06d1667
1 parent 4735460
commit 06d1667
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 84 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,7 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
-
+.env
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,17 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Main from './pages/main/Main';
+import Quest from './pages/Quest/Quest';
+import Ranking from './pages/Ranking/Ranking';
 function App() {
   return (
     <>
-      <Main></Main>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Main />}></Route>
+          <Route path="/quest" element={<Quest />}></Route>
+          <Route path="/Ranking" element={<Ranking />}></Route>
+        </Routes>
+      </BrowserRouter>
     </>
   );
 }

diff --git a/src/pages/Quest/Quest.tsx b/src/pages/Quest/Quest.tsx
@@ -0,0 +1,46 @@
+import {
+  AlignCenter,
+  GridContainer,
+  LayOutDiv,
+  FeatureDiv,
+} from '../../style/LayOut';
+import { Link } from 'react-router-dom';
+export default function Quest() {
+  return (
+    <AlignCenter>
+      <GridContainer>
+        <LayOutDiv>
+          <FeatureDiv $width="176px" $height="42px" $marginTop="50px">
+            로고
+          </FeatureDiv>
+          {['', 'Ranking', 'quest', 'store', 'profile', 'setting'].map(
+            (value, index) => (
+              <FeatureDiv
+                $width="176px"
+                $height="42px"
+                $marginTop="40px"
+                key={index}
+              >
+                {value}
+                <Link to={`/${value}`}>이동</Link>
+              </FeatureDiv>
+            )
+          )}
+        </LayOutDiv>
+        <LayOutDiv>
+          <FeatureDiv $width="666px" $height="381px" $marginTop="98px">
+            오늘의 퀘스트 칸
+          </FeatureDiv>
+          <FeatureDiv $width="666px" $height="283px" $marginTop="24px">
+            메인 퀘스트 칸
+          </FeatureDiv>
+        </LayOutDiv>
+        <LayOutDiv>
+          <FeatureDiv $width="294px" $height="42px" $marginTop="42px">
+            생명력/프로필
+          </FeatureDiv>
+        </LayOutDiv>
+      </GridContainer>
+    </AlignCenter>
+  );
+}
diff --git a/src/pages/Ranking/Ranking.tsx b/src/pages/Ranking/Ranking.tsx
@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom';
+import {
+  AlignCenter,
+  GridContainer,
+  LayOutDiv,
+  FeatureDiv,
+} from '../../style/LayOut';
+
+export default function Ranking() {
+  return (
+    <AlignCenter>
+      <GridContainer>
+        <LayOutDiv>
+          <FeatureDiv $width="176px" $height="42px" $marginTop="50px">
+            로고
+          </FeatureDiv>
+          {['', 'Ranking', 'quest', 'store', 'profile', 'setting'].map(
+            (value, index) => (
+              <FeatureDiv
+                $width="176px"
+                $height="42px"
+                $marginTop="40px"
+                key={index}
+              >
+                {value}
+                <Link to={`/${value}`}>이동</Link>
+              </FeatureDiv>
+            )
+          )}
+        </LayOutDiv>
+        <LayOutDiv>
+          <FeatureDiv $width="666px" $height="338px" $marginTop="98px">
+            내 랭킹 칸
+          </FeatureDiv>
+          <FeatureDiv $width="666px" $height="28px" $marginTop="22px">
+            정렬기준
+          </FeatureDiv>
+          <FeatureDiv $width="666px" $height="338px" $marginTop="22px">
+            다른 사람들 랭킹
+          </FeatureDiv>
+        </LayOutDiv>
+        <LayOutDiv>
+          <FeatureDiv $width="294px" $height="42px" $marginTop="42px">
+            생명력/프로필
+          </FeatureDiv>
+        </LayOutDiv>
+      </GridContainer>
+    </AlignCenter>
+  );
+}
diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx
@@ -1,76 +1,53 @@
-import { GridDiv } from '../../style/gridSystem';
-import { LayOutDiv, FeatureDiv } from './style';
+import { Link } from 'react-router-dom';
+import {
+  GridContainer,
+  AlignCenter,
+  LayOutDiv,
+  FeatureDiv,
+} from '../../style/LayOut';
 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>
+    <AlignCenter>
+      <GridContainer>
+        <LayOutDiv $height="100vh">
+          <FeatureDiv $width="176px" $height="42px" $marginTop="50px">
+            로고
+          </FeatureDiv>
+          {['', 'Ranking', 'quest', 'store', 'profile', 'setting'].map(
+            (value, index) => (
+              <FeatureDiv
+                $width="176px"
+                $height="42px"
+                $marginTop="40px"
+                key={index}
+              >
+                {value}
+                <Link to={`/${value}`}>이동</Link>
+              </FeatureDiv>
+            )
+          )}
+        </LayOutDiv>
+        <LayOutDiv $height="100vh ">
+          <FeatureDiv $width="666px" $height="45px" $marginTop="98px">
+            진행도
+          </FeatureDiv>
+          <FeatureDiv $width="666px" $height="105px" $marginTop="25px">
+            챕터 선택
+          </FeatureDiv>
+          <FeatureDiv $width="666px" $height="468px" $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>
+        <LayOutDiv $height="100vh">
+          <FeatureDiv $width="294px" $height="42px" $marginTop="42px">
+            생명력/프로필
+          </FeatureDiv>
+          <FeatureDiv $width="274px" $height="158px" $marginTop="47px">
+            일일 퀘스트
+          </FeatureDiv>
+        </LayOutDiv>
+      </GridContainer>
+    </AlignCenter>
   );
 }
diff --git a/src/pages/main/style.ts → src/style/LayOut.ts b/src/pages/main/style.ts → src/style/LayOut.ts
@@ -1,13 +1,25 @@
 import styled from 'styled-components';
-import { LayOut } from './type';
+import { LayOut } from '../types/LayOut';
 //아래 코드는 구역을 나누기 위한 것 일 뿐이니 나중에 지워도 됩니다
+export const GridContainer = styled.div`
+  display: grid;
+  width: 1280px;
+  margin: 0 62px;
+  grid-template-columns: 2fr 7fr 3fr;
+  column-gap: 20px;
+`;
+export const AlignCenter = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
 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'};
+  height: ${({ $height }) => $height || '100vh'};
+  background-color: ${({ $backGroundColor }) => $backGroundColor || '#fffff'};
 `;
 export const FeatureDiv = styled.div<LayOut>`
   width: ${({ $width }) => $width || '0px'};

diff --git a/src/style/gridSystem.ts b/src/style/gridSystem.ts
diff --git a/src/pages/main/type.ts → src/types/LayOut.ts b/src/pages/main/type.ts → src/types/LayOut.ts
@@ -3,4 +3,5 @@ export interface LayOut {
   $height?: string;
   $width?: string;
   $backGroundColor?: string;
+  $gridColumn?: string;
 }