From 7afbba4e6c47cbe1e174f0b0ce935097dddf93e4 Mon Sep 17 00:00:00 2001 From: GuDoYoon Date: Sun, 29 Sep 2024 23:32:39 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Publish(##22):=20=EB=A9=94?= =?UTF-8?q?=EC=9D=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B7=B8=EB=A6=AC?= =?UTF-8?q?=EB=93=9C=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 3 ++- src/App.tsx | 7 +++++- src/main.tsx | 2 -- src/pages/main/Main.tsx | 56 +++++++++++++++++++++++++++++++++++++++++ src/pages/main/style.ts | 19 ++++++++++++++ src/pages/main/type.ts | 6 +++++ src/style/gridSystem.ts | 8 ++++++ 7 files changed, 97 insertions(+), 4 deletions(-) create mode 100644 src/pages/main/Main.tsx create mode 100644 src/pages/main/style.ts create mode 100644 src/pages/main/type.ts create mode 100644 src/style/gridSystem.ts diff --git a/index.html b/index.html index e4b78ea..f15301f 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,10 @@ - + + Vite + React + TS diff --git a/src/App.tsx b/src/App.tsx index b4f6543..80f8106 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,10 @@ +import Main from './pages/main/Main'; function App() { - return <>; + return ( + <> +
+ + ); } export default App; diff --git a/src/main.tsx b/src/main.tsx index 35f6c8f..fcd5a24 100644 --- 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(); diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx new file mode 100644 index 0000000..dade790 --- /dev/null +++ b/src/pages/main/Main.tsx @@ -0,0 +1,56 @@ +import { GridDiv } from '../../style/gridSystem'; +import { LayOutDiv, FeatureDiv } from './style'; +export default function Main() { + return ( + + + 사이드바 + + + + 진행도 + + + 챕터 선택 + + + 챕터 + + + + + + 생명력/프로필 + + + 일일 퀘스트 + + + + ); +} diff --git a/src/pages/main/style.ts b/src/pages/main/style.ts new file mode 100644 index 0000000..29b07a7 --- /dev/null +++ b/src/pages/main/style.ts @@ -0,0 +1,19 @@ +import styled from 'styled-components'; +import { LayOut } from './type'; +//아래 코드는 구역을 나누기 위한 것 일 뿐이니 나중에 지워도 됩니다 +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'}; +`; +export const FeatureDiv = styled.div` + 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 new file mode 100644 index 0000000..ecdc334 --- /dev/null +++ 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 new file mode 100644 index 0000000..e8801a5 --- /dev/null +++ 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; +`; From 2d28a4b61a8dfec91550e9af5792df894977e7a5 Mon Sep 17 00:00:00 2001 From: GuDoYoon Date: Sun, 29 Sep 2024 23:35:21 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Publish(##22):=20=EB=A9=94?= =?UTF-8?q?=EC=9D=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B7=B8=EB=A6=AC?= =?UTF-8?q?=EB=93=9C=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/main/Main.tsx | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx index dade790..490465d 100644 --- 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 ( - - 사이드바 + + + 로고 + + {['learining', 'Ranking', 'quest', 'store', 'profile', 'setting'].map( + (value, index) => ( + + {value} + + ) + )}