From 06d16677c6340e416c6e02d576cfab96fec4bec2 Mon Sep 17 00:00:00 2001 From: GuDoYoon Date: Wed, 2 Oct 2024 16:14:49 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Publish(#32):=20=EA=B7=B8?= =?UTF-8?q?=EB=A6=AC=EB=93=9C=20=EB=B9=84=EC=9C=A8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 +- src/App.tsx | 11 +- src/pages/Quest/Quest.tsx | 46 +++++++ src/pages/Ranking/Ranking.tsx | 50 ++++++++ src/pages/main/Main.tsx | 119 ++++++++----------- src/{pages/main/style.ts => style/LayOut.ts} | 18 ++- src/style/gridSystem.ts | 8 -- src/{pages/main/type.ts => types/LayOut.ts} | 1 + 8 files changed, 171 insertions(+), 84 deletions(-) create mode 100644 src/pages/Quest/Quest.tsx create mode 100644 src/pages/Ranking/Ranking.tsx rename src/{pages/main/style.ts => style/LayOut.ts} (66%) delete mode 100644 src/style/gridSystem.ts rename src/{pages/main/type.ts => types/LayOut.ts} (83%) diff --git a/.gitignore b/.gitignore index a547bf3..ecb8a85 100644 --- 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 index 80f8106..cd6c598 100644 --- 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 ( <> -
+ + + }> + }> + }> + + ); } diff --git a/src/pages/Quest/Quest.tsx b/src/pages/Quest/Quest.tsx new file mode 100644 index 0000000..ff8c859 --- /dev/null +++ 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 ( + + + + + 로고 + + {['', 'Ranking', 'quest', 'store', 'profile', 'setting'].map( + (value, index) => ( + + {value} + 이동 + + ) + )} + + + + 오늘의 퀘스트 칸 + + + 메인 퀘스트 칸 + + + + + 생명력/프로필 + + + + + ); +} diff --git a/src/pages/Ranking/Ranking.tsx b/src/pages/Ranking/Ranking.tsx new file mode 100644 index 0000000..85a9edb --- /dev/null +++ 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 ( + + + + + 로고 + + {['', 'Ranking', 'quest', 'store', 'profile', 'setting'].map( + (value, index) => ( + + {value} + 이동 + + ) + )} + + + + 내 랭킹 칸 + + + 정렬기준 + + + 다른 사람들 랭킹 + + + + + 생명력/프로필 + + + + + ); +} diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx index 490465d..d17cba1 100644 --- 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 ( - - - - 로고 - - {['learining', 'Ranking', 'quest', 'store', 'profile', 'setting'].map( - (value, index) => ( - - {value} - - ) - )} - - - - 진행도 - - - 챕터 선택 - - - 챕터 - - + + + + + 로고 + + {['', 'Ranking', 'quest', 'store', 'profile', 'setting'].map( + (value, index) => ( + + {value} + 이동 + + ) + )} + + + + 진행도 + + + 챕터 선택 + + + 챕터 + + - - - 생명력/프로필 - - - 일일 퀘스트 - - - + + + 생명력/프로필 + + + 일일 퀘스트 + + + + ); } diff --git a/src/pages/main/style.ts b/src/style/LayOut.ts similarity index 66% rename from src/pages/main/style.ts rename to src/style/LayOut.ts index 29b07a7..c2391fa 100644 --- a/src/pages/main/style.ts +++ b/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` 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` width: ${({ $width }) => $width || '0px'}; diff --git a/src/style/gridSystem.ts b/src/style/gridSystem.ts deleted file mode 100644 index e8801a5..0000000 --- a/src/style/gridSystem.ts +++ /dev/null @@ -1,8 +0,0 @@ -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; -`; diff --git a/src/pages/main/type.ts b/src/types/LayOut.ts similarity index 83% rename from src/pages/main/type.ts rename to src/types/LayOut.ts index ecdc334..e61c2ee 100644 --- a/src/pages/main/type.ts +++ b/src/types/LayOut.ts @@ -3,4 +3,5 @@ export interface LayOut { $height?: string; $width?: string; $backGroundColor?: string; + $gridColumn?: string; }