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 b602ba1..b58cf9a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +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, - RaccoonList, -} from './components/page'; +import { Main, CreateRoom, ColorPalette } from './components/page'; +import { Pin, Nickname } from './components/page/Play'; import './scss/main.scss'; function App() { @@ -17,8 +12,8 @@ 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 d1b129d..99c18ea 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/components/page/Play/Nickname.js b/src/components/page/Play/Nickname.js new file mode 100644 index 0000000..71ee9d6 --- /dev/null +++ b/src/components/page/Play/Nickname.js @@ -0,0 +1,55 @@ +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 new file mode 100644 index 0000000..32d0117 --- /dev/null +++ b/src/components/page/Play/Pin.js @@ -0,0 +1,68 @@ +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 { useHistory } from 'react-router-dom'; +import { Header } from '../../UI'; + +const Pin = () => { + const history = useHistory(); + + const handleButton = (e) => { + history.push({ + pathname: '/play/nickname', + }); + }; + 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..364cc55 --- /dev/null +++ b/src/components/page/Play/index.js @@ -0,0 +1,2 @@ +export { default as Pin } from './Pin'; +export { default as Nickname } from './Nickname'; diff --git a/src/components/page/index.js b/src/components/page/index.js index 592de02..85879fd 100644 --- a/src/components/page/index.js +++ b/src/components/page/index.js @@ -1,5 +1,4 @@ export { default as CreateRoom } from './CreateRoom'; -export { default as EnterRoom } from './EnterRoom'; export { default as ColorPalette } from './ColorPalette'; export { default as Main } from './Main'; export { default as RaccoonList } from './RaccoonList'; diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index 34c29ea..fd994c1 100644 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -1,5 +1,4 @@ .Header { - flex-grow: 1; .bar { background-color: $main-black-main !important; // 색상 팔레트 만들어지면 변경해주세요! box-shadow: none !important; @@ -20,4 +19,4 @@ font-size: 3rem !important; color: $main-white-main; } -} \ No newline at end of file +} diff --git a/src/scss/components/_main.scss b/src/scss/components/_main.scss index c1fab07..09c75c7 100644 --- a/src/scss/components/_main.scss +++ b/src/scss/components/_main.scss @@ -1,8 +1,31 @@ .main { display: flex; - justify-content: center; - align-items: center; - .main-button { - font-size: 1.3rem; + 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; + } } } diff --git a/src/scss/components/_nickname.scss b/src/scss/components/_nickname.scss new file mode 100644 index 0000000..ff7d937 --- /dev/null +++ b/src/scss/components/_nickname.scss @@ -0,0 +1,40 @@ +.dialogNickname { + .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; + } + .title { + text-align: center; + } + .content { + padding-left: 50px; + padding-right: 50px; + .field { + 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 { + padding-left: 50px; + padding-right: 50px; + .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..a8e525b --- /dev/null +++ b/src/scss/components/_pin.scss @@ -0,0 +1,40 @@ +.dialogPin { + .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; + } + .title { + text-align: center; + } + .content { + padding-left: 50px; + padding-right: 50px; + .field { + 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 { + 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 799ce66..2ffff43 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -6,4 +6,5 @@ //components @import './components/main'; @import './components/header'; -@import './components//rclist'; +@import './components/pin'; +@import './components/nickname';