From 6941ba2fc3dafc9e5a8c338046a206cd69863ef6 Mon Sep 17 00:00:00 2001 From: hyechoi Date: Thu, 11 Feb 2021 09:36:04 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Main=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/page/Main.js | 28 ++++++++++++++++++++-------- src/scss/components/_main.scss | 23 ++++++++++++++++++++--- 2 files changed, 40 insertions(+), 11 deletions(-) diff --git a/src/components/page/Main.js b/src/components/page/Main.js index d1b129d..77836eb 100644 --- a/src/components/page/Main.js +++ b/src/components/page/Main.js @@ -1,17 +1,29 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { Button, Grid } from '@material-ui/core'; +import { Header } from '../UI'; const Main = () => { return ( - - - - - - - - + +
+ + + + + + + + + + + + + ); }; diff --git a/src/scss/components/_main.scss b/src/scss/components/_main.scss index c1fab07..6721c20 100644 --- a/src/scss/components/_main.scss +++ b/src/scss/components/_main.scss @@ -1,8 +1,25 @@ .main { + min-height: 100%; + max-height: 100%; display: flex; - justify-content: center; + justify-content: space-evenly; align-items: center; - .main-button { - font-size: 1.3rem; + .button { + width: 4em; + height: 22.5vh; + border: medium solid $main-white-main; + border-radius: 30px; + font-size: 3rem; + letter-spacing: 3pt; + } + .createButton { + @extend .button; + background-color: $primary-main; + color: $primary-contrastText; + } + .enterButton { + @extend .button; + background-color: $accent1-main; + color: $accent1-contrastText; } } From 748e180df5f0a51802bc107c24a4913cf358d6d0 Mon Sep 17 00:00:00 2001 From: hyechoi Date: Thu, 11 Feb 2021 20:08:33 +0900 Subject: [PATCH 2/5] =?UTF-8?q?Play=20-=20Enter=20PIN=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +-- src/App.js | 5 +-- src/components/page/EnterRoom.js | 7 ----- src/components/page/Main.js | 4 +-- src/components/page/Play/Pin.js | 51 +++++++++++++++++++++++++++++++ src/components/page/Play/index.js | 1 + src/components/page/index.js | 1 - src/scss/components/_main.scss | 2 +- src/scss/components/_pin.scss | 29 ++++++++++++++++++ src/scss/main.scss | 3 +- 10 files changed, 91 insertions(+), 16 deletions(-) delete mode 100644 src/components/page/EnterRoom.js create mode 100644 src/components/page/Play/Pin.js create mode 100644 src/components/page/Play/index.js create mode 100644 src/scss/components/_pin.scss diff --git a/README.md b/README.md index ab7b224..ba31184 100644 --- a/README.md +++ b/README.md @@ -30,13 +30,13 @@ ```js import Main from './components/page/Main'; import CreateRoom from './components/page/CreateRoom'; -import EnterRoom from './components/page/EnterRoom'; +import Play from './components/page/Play'; ```

▼


```js -import { Main, CreateRoom, EnterRoom } from './components/page'; +import { Main, CreateRoom, Play } from './components/page'; ``` 1. 각 폴더마다, 생성할 때마다 index.js 를 생성 diff --git a/src/App.js b/src/App.js index 2d9622e..2eca2ea 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,8 @@ import React from 'react'; import { Route, Switch, BrowserRouter } from 'react-router-dom'; import { Grid } from '@material-ui/core'; -import { Main, CreateRoom, EnterRoom, ColorPalette } from './components/page'; +import { Main, CreateRoom, ColorPalette } from './components/page'; +import { Pin } from './components/page/Play'; import './scss/main.scss'; function App() { @@ -11,7 +12,7 @@ function App() { - + {/* route 하는 경로에 exact를 넣어주면 해당 페이지의 경로가 완전히 일치할 때만 라우트 페이지를 나타내고, diff --git a/src/components/page/EnterRoom.js b/src/components/page/EnterRoom.js deleted file mode 100644 index 296c942..0000000 --- a/src/components/page/EnterRoom.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -const EnterRoom = () => { - return
enter
; -}; - -export default EnterRoom; diff --git a/src/components/page/Main.js b/src/components/page/Main.js index 77836eb..bb7000d 100644 --- a/src/components/page/Main.js +++ b/src/components/page/Main.js @@ -9,8 +9,8 @@ const Main = () => {
- - diff --git a/src/components/page/Play/Pin.js b/src/components/page/Play/Pin.js new file mode 100644 index 0000000..0d12c31 --- /dev/null +++ b/src/components/page/Play/Pin.js @@ -0,0 +1,51 @@ +import React from 'react'; +import Button from '@material-ui/core/Button'; +import TextField from '@material-ui/core/TextField'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import Typography from '@material-ui/core/Typography'; +import { Header } from '../../UI'; + +const Pin = () => { + return ( + <> +
+ + + Join Raccoon with given PIN + + + + + + + + + + ); +}; + +export default Pin; diff --git a/src/components/page/Play/index.js b/src/components/page/Play/index.js new file mode 100644 index 0000000..5ae2589 --- /dev/null +++ b/src/components/page/Play/index.js @@ -0,0 +1 @@ +export { default as Pin } from './Pin'; diff --git a/src/components/page/index.js b/src/components/page/index.js index b40b8f1..2b580fa 100644 --- a/src/components/page/index.js +++ b/src/components/page/index.js @@ -1,4 +1,3 @@ export { default as CreateRoom } from './CreateRoom'; -export { default as EnterRoom } from './EnterRoom'; export { default as ColorPalette } from './ColorPalette'; export { default as Main } from './Main'; diff --git a/src/scss/components/_main.scss b/src/scss/components/_main.scss index 6721c20..4b5215e 100644 --- a/src/scss/components/_main.scss +++ b/src/scss/components/_main.scss @@ -17,7 +17,7 @@ background-color: $primary-main; color: $primary-contrastText; } - .enterButton { + .playButton { @extend .button; background-color: $accent1-main; color: $accent1-contrastText; diff --git a/src/scss/components/_pin.scss b/src/scss/components/_pin.scss new file mode 100644 index 0000000..ac0e17e --- /dev/null +++ b/src/scss/components/_pin.scss @@ -0,0 +1,29 @@ +.dialog { + .backdrop { + opacity: 0 !important; + } + .paper { + background-color: $primary-main !important; + color: $main-white-main !important; + border: medium solid $main-white-main !important; + border-radius: 30px !important; + font-size: 3rem !important; + padding: 10px; + } + .content { + padding-left: 50px; + padding-right: 50px; + .field { + background-color: $main-white-main; + border-radius: 5px !important; + } + } + .actions { + padding-left: 50px; + padding-right: 50px; + .button { + background-color: $accent1-main; + color: $accent1-contrastText; + } + } +} diff --git a/src/scss/main.scss b/src/scss/main.scss index e9a4d98..016eb08 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -5,4 +5,5 @@ //components @import './components/main'; -@import './components/header' +@import './components/header'; +@import './components/pin'; From e727f57df5b7195cb206b13a59fc0380901cab17 Mon Sep 17 00:00:00 2001 From: hyechoi Date: Thu, 11 Feb 2021 20:18:58 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Play=20-=20Enter=20Nickname=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 3 +- src/components/page/Play/Nickname.js | 51 ++++++++++++++++++++++++++++ src/components/page/Play/Pin.js | 15 +++++++- src/components/page/Play/index.js | 1 + src/scss/components/_nickname.scss | 29 ++++++++++++++++ 5 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 src/components/page/Play/Nickname.js create mode 100644 src/scss/components/_nickname.scss diff --git a/src/App.js b/src/App.js index 2eca2ea..b58cf9a 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,7 @@ import React from 'react'; import { Route, Switch, BrowserRouter } from 'react-router-dom'; import { Grid } from '@material-ui/core'; import { Main, CreateRoom, ColorPalette } from './components/page'; -import { Pin } from './components/page/Play'; +import { Pin, Nickname } from './components/page/Play'; import './scss/main.scss'; function App() { @@ -13,6 +13,7 @@ function App() { + {/* route 하는 경로에 exact를 넣어주면 해당 페이지의 경로가 완전히 일치할 때만 라우트 페이지를 나타내고, diff --git a/src/components/page/Play/Nickname.js b/src/components/page/Play/Nickname.js new file mode 100644 index 0000000..fa451d0 --- /dev/null +++ b/src/components/page/Play/Nickname.js @@ -0,0 +1,51 @@ +import React from 'react'; +import Button from '@material-ui/core/Button'; +import TextField from '@material-ui/core/TextField'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import Typography from '@material-ui/core/Typography'; +import { Header } from '../../UI'; + +const Nickname = () => { + return ( + <> +
+ + + ... And your nickname? + + + + + + + + + + ); +}; + +export default Nickname; diff --git a/src/components/page/Play/Pin.js b/src/components/page/Play/Pin.js index 0d12c31..748553e 100644 --- a/src/components/page/Play/Pin.js +++ b/src/components/page/Play/Pin.js @@ -6,9 +6,17 @@ import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@material-ui/core/DialogContent'; import DialogTitle from '@material-ui/core/DialogTitle'; import Typography from '@material-ui/core/Typography'; +import { useHistory } from 'react-router-dom'; import { Header } from '../../UI'; const Pin = () => { + const history = useHistory(); + + const handleButton = (e) => { + history.push({ + pathname: '/play/nickname', + }); + }; return ( <>
@@ -39,7 +47,12 @@ const Pin = () => { /> - diff --git a/src/components/page/Play/index.js b/src/components/page/Play/index.js index 5ae2589..364cc55 100644 --- a/src/components/page/Play/index.js +++ b/src/components/page/Play/index.js @@ -1 +1,2 @@ export { default as Pin } from './Pin'; +export { default as Nickname } from './Nickname'; diff --git a/src/scss/components/_nickname.scss b/src/scss/components/_nickname.scss new file mode 100644 index 0000000..ac0e17e --- /dev/null +++ b/src/scss/components/_nickname.scss @@ -0,0 +1,29 @@ +.dialog { + .backdrop { + opacity: 0 !important; + } + .paper { + background-color: $primary-main !important; + color: $main-white-main !important; + border: medium solid $main-white-main !important; + border-radius: 30px !important; + font-size: 3rem !important; + padding: 10px; + } + .content { + padding-left: 50px; + padding-right: 50px; + .field { + background-color: $main-white-main; + border-radius: 5px !important; + } + } + .actions { + padding-left: 50px; + padding-right: 50px; + .button { + background-color: $accent1-main; + color: $accent1-contrastText; + } + } +} From 152a38514beda51c1cd5b3bff9af84b6f3764daf Mon Sep 17 00:00:00 2001 From: hyechoi Date: Fri, 12 Feb 2021 08:16:10 +0900 Subject: [PATCH 4/5] =?UTF-8?q?text=20field=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/page/Play/Nickname.js | 12 ++++++++---- src/components/page/Play/Pin.js | 12 ++++++++---- src/scss/components/_nickname.scss | 17 ++++++++++++++--- src/scss/components/_pin.scss | 17 ++++++++++++++--- src/scss/main.scss | 1 + 5 files changed, 45 insertions(+), 14 deletions(-) diff --git a/src/components/page/Play/Nickname.js b/src/components/page/Play/Nickname.js index fa451d0..71ee9d6 100644 --- a/src/components/page/Play/Nickname.js +++ b/src/components/page/Play/Nickname.js @@ -15,7 +15,7 @@ const Nickname = () => { { className: 'paper', }} > - + ... And your nickname? diff --git a/src/components/page/Play/Pin.js b/src/components/page/Play/Pin.js index 748553e..32d0117 100644 --- a/src/components/page/Play/Pin.js +++ b/src/components/page/Play/Pin.js @@ -23,7 +23,7 @@ const Pin = () => { { className: 'paper', }} > - + Join Raccoon with given PIN diff --git a/src/scss/components/_nickname.scss b/src/scss/components/_nickname.scss index ac0e17e..ff7d937 100644 --- a/src/scss/components/_nickname.scss +++ b/src/scss/components/_nickname.scss @@ -1,4 +1,4 @@ -.dialog { +.dialogNickname { .backdrop { opacity: 0 !important; } @@ -10,12 +10,23 @@ font-size: 3rem !important; padding: 10px; } + .title { + text-align: center; + } .content { padding-left: 50px; padding-right: 50px; .field { - background-color: $main-white-main; - border-radius: 5px !important; + padding-top: 0.1em; + .label { + color: $main-white-main; + font-size: 0.5em; + } + .input { + background-color: $main-white-main; + color: $main-white-contrastText; + font-size: 0.75em; + } } } .actions { diff --git a/src/scss/components/_pin.scss b/src/scss/components/_pin.scss index ac0e17e..a8e525b 100644 --- a/src/scss/components/_pin.scss +++ b/src/scss/components/_pin.scss @@ -1,4 +1,4 @@ -.dialog { +.dialogPin { .backdrop { opacity: 0 !important; } @@ -10,12 +10,23 @@ font-size: 3rem !important; padding: 10px; } + .title { + text-align: center; + } .content { padding-left: 50px; padding-right: 50px; .field { - background-color: $main-white-main; - border-radius: 5px !important; + padding-top: 0.1em; + .label { + color: $main-white-main; + font-size: 0.5em; + } + .input { + background-color: $main-white-main; + color: $main-white-contrastText; + font-size: 0.75em; + } } } .actions { diff --git a/src/scss/main.scss b/src/scss/main.scss index 016eb08..2ffff43 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -7,3 +7,4 @@ @import './components/main'; @import './components/header'; @import './components/pin'; +@import './components/nickname'; From 916150f61934a36ca6c62f720eb2a8d5ce308f55 Mon Sep 17 00:00:00 2001 From: hyechoi Date: Fri, 12 Feb 2021 08:16:41 +0900 Subject: [PATCH 5/5] =?UTF-8?q?Main=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=B0=8F=20Header=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/page/Main.js | 6 ++-- src/scss/components/_header.scss | 41 +++++++++++++-------------- src/scss/components/_main.scss | 48 ++++++++++++++++++-------------- 3 files changed, 50 insertions(+), 45 deletions(-) diff --git a/src/components/page/Main.js b/src/components/page/Main.js index bb7000d..99c18ea 100644 --- a/src/components/page/Main.js +++ b/src/components/page/Main.js @@ -5,9 +5,9 @@ import { Header } from '../UI'; const Main = () => { return ( - +
- +
); }; diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index 67cd079..deed957 100644 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -1,22 +1,21 @@ .Header { - flex-grow: 1; - .bar { - background-color: black !important; // 색상 팔레트 만들어지면 변경해주세요! - box-shadow: none !important; - border-bottom: .2rem solid white !important; // 색상 팔레트 만들어지면 변경해주세요! - } - .left { - display: flex; - flex-grow: 1; - align-items: center !important; - } - .middle { - flex-grow: 1; - } - .title { - margin-right: 0.5rem !important; - letter-spacing: .3rem; - display: inline-block; - font-size: 3rem !important; - } -} \ No newline at end of file + .bar { + background-color: black !important; // 색상 팔레트 만들어지면 변경해주세요! + box-shadow: none !important; + border-bottom: 0.2rem solid white !important; // 색상 팔레트 만들어지면 변경해주세요! + } + .left { + display: flex; + flex-grow: 1; + align-items: center !important; + } + .middle { + flex-grow: 1; + } + .title { + margin-right: 0.5rem !important; + letter-spacing: 0.3rem; + display: inline-block; + font-size: 3rem !important; + } +} diff --git a/src/scss/components/_main.scss b/src/scss/components/_main.scss index 4b5215e..09c75c7 100644 --- a/src/scss/components/_main.scss +++ b/src/scss/components/_main.scss @@ -1,25 +1,31 @@ .main { - min-height: 100%; - max-height: 100%; display: flex; - justify-content: space-evenly; - align-items: center; - .button { - width: 4em; - height: 22.5vh; - border: medium solid $main-white-main; - border-radius: 30px; - font-size: 3rem; - letter-spacing: 3pt; - } - .createButton { - @extend .button; - background-color: $primary-main; - color: $primary-contrastText; - } - .playButton { - @extend .button; - background-color: $accent1-main; - color: $accent1-contrastText; + flex-direction: column; + height: 100%; + .buttons { + flex: 1; + max-width: 100%; + margin: auto auto; + display: flex; + justify-content: space-evenly; + align-items: center; + .button { + width: 4em; + height: 22.5vh; + border: medium solid $main-white-main; + border-radius: 30px; + font-size: 3rem; + letter-spacing: 3pt; + } + .createButton { + @extend .button; + background-color: $primary-main; + color: $primary-contrastText; + } + .playButton { + @extend .button; + background-color: $accent1-main; + color: $accent1-contrastText; + } } }