Merge pull request #22 from r4k0nb4k0n/EnterRoom#3

Enter room#3

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';
 ```
 
 <center><h2>▼</h2></center></br>
 
 ```js
-import { Main, CreateRoom, EnterRoom } from './components/page';
+import { Main, CreateRoom, Play } from './components/page';
 ```
 
     1. 각 폴더마다, 생성할 때마다 index.js 를 생성

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() {
 				<Switch>
 					<Route exact path="/" component={Main} />
 					<Route exact path="/create" component={CreateRoom} />
-					<Route exact path="/enter" component={EnterRoom} />
-					<Route exact path="/list" component={RaccoonList} />
+					<Route exact path="/play/pin" component={Pin} />
+					<Route exact path="/play/nickname" component={Nickname} />
 					<Route exact path="/color-palette" component={ColorPalette} />
 					{/* route 하는 경로에 exact를 넣어주면 해당 페이지의 경로가
 				 완전히 일치할 때만 라우트 페이지를 나타내고,

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 (
-		<Grid className="main">
-			<Link to={`/create`}>
-				<Button className="main-button">방 생성</Button>
-			</Link>
-			<Link to={`/enter`}>
-				<Button className="main-button">방 입장</Button>
-			</Link>
-		</Grid>
+		<div className="main">
+			<Header />
+			<Grid container spacing={3} className="buttons">
+				<Grid item>
+					<Link to={`/play/pin`}>
+						<Button className="playButton" size="large">
+							PLAY
+						</Button>
+					</Link>
+				</Grid>
+				<Grid item>
+					<Link to={`/create`}>
+						<Button className="createButton" size="large">
+							HOST
+						</Button>
+					</Link>
+				</Grid>
+			</Grid>
+		</div>
 	);
 };
 

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 (
+		<>
+			<Header />
+			<Dialog
+				open={true}
+				aria-labelledby="formDialogTitle"
+				className="dialogNickname"
+				BackdropProps={{
+					className: 'backdrop',
+				}}
+				PaperProps={{
+					className: 'paper',
+				}}
+			>
+				<DialogTitle
+					id="formDialogTitle"
+					disableTypography={true}
+					className="title"
+				>
+					<Typography variant="h4">... And your nickname?</Typography>
+				</DialogTitle>
+				<DialogContent className="content">
+					<TextField
+						autoFocus
+						required
+						id="nickname"
+						label="Nickname"
+						fullWidth
+						className="field"
+						InputLabelProps={{ className: 'label', shrink: true }}
+						InputProps={{ className: 'input' }}
+					/>
+				</DialogContent>
+				<DialogActions className="actions">
+					<Button variant="contained" className="button" fullWidth>
+						Enter
+					</Button>
+				</DialogActions>
+			</Dialog>
+		</>
+	);
+};
+
+export default Nickname;

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 (
+		<>
+			<Header />
+			<Dialog
+				open={true}
+				aria-labelledby="formDialogTitle"
+				className="dialogPin"
+				BackdropProps={{
+					className: 'backdrop',
+				}}
+				PaperProps={{
+					className: 'paper',
+				}}
+			>
+				<DialogTitle
+					id="formDialogTitle"
+					disableTypography={true}
+					className="title"
+				>
+					<Typography variant="h4">Join Raccoon with given PIN</Typography>
+				</DialogTitle>
+				<DialogContent className="content">
+					<TextField
+						autoFocus
+						required
+						id="pin"
+						label="PIN Code"
+						fullWidth
+						className="field"
+						InputLabelProps={{ className: 'label', shrink: true }}
+						InputProps={{ className: 'input' }}
+					/>
+				</DialogContent>
+				<DialogActions className="actions">
+					<Button
+						variant="contained"
+						className="button"
+						fullWidth
+						onClick={handleButton}
+					>
+						Enter
+					</Button>
+				</DialogActions>
+			</Dialog>
+		</>
+	);
+};
+
+export default Pin;

src/components/page/Play/index.js

@@ -0,0 +1,2 @@
+export { default as Pin } from './Pin';
+export { default as Nickname } from './Nickname';

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';

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;
 		}
-}
+}

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;
+		}
 	}
 }

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;
+		}
+	}
+}

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;
+		}
+	}
+}

src/scss/main.scss

@@ -6,4 +6,5 @@
 //components
 @import './components/main';
 @import './components/header';
-@import './components//rclist';
+@import './components/pin';
+@import './components/nickname';