Create raccoon#8

src/components/UI/CreateRoomUI.js

@@ -0,0 +1,245 @@
+import React, { useState, useEffect } from 'react';
+import {
+	Toolbar,
+	InputBase,
+	Grid,
+	Paper,
+	Select,
+	FormControl,
+	MenuItem,
+	Typography,
+	Checkbox,
+} from '@material-ui/core';
+import StarsIcon from '@material-ui/icons/Stars';
+import CircleCheckedFilled from '@material-ui/icons/CheckCircle';
+import CircleUnchecked from '@material-ui/icons/RadioButtonUnchecked';
+
+function QuizLayout(props) {
+	const ans4 = ['ansred', 'ansblue', 'ansyel', 'ansgren'];
+	const ans4list = ans4.map((ans4, index) => (
+		<Grid item xs={6} className="ansItem">
+			<Paper elevation={0} className={`${'ansPaper'} ${ans4}`}>
+				<StarsIcon className="ansInput" />
+				<InputBase className="ansInput" placeholder="Add Answer" fullWidth />
+				<Checkbox
+					className="ansInputCheck"
+					value={index}
+					checked={props.ansData.includes(index)}
+					onChange={props.onChangehandler}
+					icon={<CircleUnchecked className="ansInputIcon" />}
+					checkedIcon={<CircleCheckedFilled className="ansInputIcon" />}
+				/>
+			</Paper>
+		</Grid>
+	));
+	return (
+		<Grid container>
+			<Grid item xs>
+				{/* main 위치조정 */}
+				<Toolbar />
+			</Grid>
+			<Grid item xs={10}>
+				<Grid container className="mainContainer">
+					{/* Title 입력 칸 */}
+					<Grid item xs={12}>
+						<Paper component="form" className="inputPaper">
+							<InputBase
+								className="inputTitle"
+								placeholder="Click to start typing your question"
+								inputProps={{
+									maxLength: 110,
+									style: { textAlign: 'center' },
+								}}
+								multiline
+							/>
+						</Paper>
+					</Grid>
+					{/* 퀴즈 옵션 설정하기 */}
+					<Grid container className="optContainer">
+						<Grid item xs={4} className="circleItem">
+							<div className="circleDiv">
+								<Typography className="circleText">Time Limit</Typography>
+								<Paper className="circle">
+									<FormControl>
+										<Select
+											className="selectOpt"
+											defaultValue={20}
+											classes={{ icon: 'selectIcon' }}
+										>
+											<MenuItem value={20}>20 seconds</MenuItem>
+										</Select>
+									</FormControl>
+								</Paper>
+							</div>
+						</Grid>
+						<Grid item xs={4} className="circleItem">
+							<div className="circleDiv">
+								<Typography className="circleText">Points</Typography>
+								<Paper className="circle">
+									<FormControl>
+										<Select
+											className="selectOpt"
+											defaultValue={20}
+											classes={{ icon: 'selectIcon' }}
+										>
+											<MenuItem value={20}>standard</MenuItem>
+										</Select>
+									</FormControl>
+								</Paper>
+							</div>
+						</Grid>
+						<Grid item xs={4} className="circleItem">
+							<div className="circleDiv">
+								<Typography className="circleText">Answer Opt</Typography>
+								<Paper className="circle">
+									<FormControl>
+										<Select
+											className="selectOpt"
+											defaultValue={20}
+											classes={{ icon: 'selectIcon' }}
+										>
+											<MenuItem value={20}>single</MenuItem>
+										</Select>
+									</FormControl>
+								</Paper>
+							</div>
+						</Grid>
+					</Grid>
+					{/* 정답 설정하기 */}
+					<Grid container>{ans4list}</Grid>
+				</Grid>
+			</Grid>
+		</Grid>
+	);
+}
+
+function TFLayout(props) {
+	return (
+		<Grid container>
+			<Grid item xs>
+				{/* main 위치조정 */}
+				<Toolbar />
+			</Grid>
+			<Grid item xs={10}>
+				<Grid container className="mainContainer">
+					{/* Title 입력 칸 */}
+					<Grid item xs={12}>
+						<Paper component="form" className="inputPaper">
+							<InputBase
+								className="inputTitle"
+								placeholder="Click to start typing your question"
+								inputProps={{
+									maxLength: 110,
+									style: { textAlign: 'center' },
+								}}
+								multiline
+							/>
+						</Paper>
+					</Grid>
+					{/* 퀴즈 옵션 설정하기 */}
+					<Grid container className="optContainer">
+						<Grid item xs={6} className="circleItem">
+							<div className="circleDiv">
+								<Typography className="circleText">Time Limit</Typography>
+								<Paper className="circle">
+									<FormControl>
+										<Select
+											className="selectOpt"
+											defaultValue={20}
+											classes={{ icon: 'selectIcon' }}
+										>
+											<MenuItem value={20}>20 seconds</MenuItem>
+										</Select>
+									</FormControl>
+								</Paper>
+							</div>
+						</Grid>
+						<Grid item xs={6} className="circleItem">
+							<div className="circleDiv">
+								<Typography className="circleText">Points</Typography>
+								<Paper className="circle">
+									<FormControl>
+										<Select
+											className="selectOpt"
+											defaultValue={20}
+											classes={{ icon: 'selectIcon' }}
+										>
+											<MenuItem value={20}>standard</MenuItem>
+										</Select>
+									</FormControl>
+								</Paper>
+							</div>
+						</Grid>
+					</Grid>
+					{/* 정답 설정하기 */}
+					<Grid container className="ansContainer">
+						<Grid item xs={6} className="ansItem">
+							<Paper elevation={0} className={`${'ansPaper'} ${'ansblue'}`}>
+								<StarsIcon className="ansInput" />
+								<InputBase
+									className="ansInput"
+									placeholder="Add Answer"
+									fullWidth
+								/>
+								<Checkbox
+									className="ansInputCheck"
+									value={0}
+									checked={props.ansData.includes(0)}
+									onChange={props.handleChange}
+									icon={<CircleUnchecked className="ansInputIcon" />}
+									checkedIcon={<CircleCheckedFilled className="ansInputIcon" />}
+								/>
+							</Paper>
+						</Grid>
+						<Grid item xs={6} className="ansItem">
+							<Paper elevation={0} className={`${'ansPaper'} ${'ansred'}`}>
+								<StarsIcon className="ansInput" />
+								<InputBase
+									className="ansInput"
+									placeholder="Add Answer"
+									fullWidth
+								/>
+								<Checkbox
+									className="ansInputCheck"
+									value={1}
+									checked={props.ansData.includes(1)}
+									onChange={props.handleChange}
+									icon={<CircleUnchecked className="ansInputIcon" />}
+									checkedIcon={<CircleCheckedFilled className="ansInputIcon" />}
+								/>
+							</Paper>
+						</Grid>
+					</Grid>
+				</Grid>
+			</Grid>
+		</Grid>
+	);
+}
+
+function CreateRoomQuiz(props) {
+	const toggleId = props.toggleId;
+	const quizlist = props.quizlist;
+	const [ansData, setansData] = useState([[], []]);
+	const onChangehandler = (e) => {
+		const idx = Number(e.target.value);
+		const temp = ansData;
+		temp[toggleId].includes(idx)
+			? (temp[toggleId] = temp[toggleId].filter((e) => e !== idx))
+			: temp[toggleId].push(idx);
+		setansData(temp);
+		console.log(ansData);
+	};
+	if (quizlist[toggleId].sort === 'Quiz')
+		return (
+			<QuizLayout
+				ansData={ansData[toggleId]}
+				onChangehandler={onChangehandler}
+			/>
+		);
+	else
+		return (
+			<TFLayout ansData={ansData[toggleId]} onChangehandler={onChangehandler} />
+		);
+}
+
+export default CreateRoomQuiz;

src/components/UI/index.js

@@ -1,2 +1,3 @@
 export { default as Header } from './Header';
+export { default as CRUI } from './CreateRoomUI';
 export { default as RaccoonListUI } from './RaccoonListUi';

src/components/page/CreateRoom.js

@@ -1,12 +1,88 @@
-import React from 'react';
-import { Header } from '../UI';
+import React, { useState } from 'react';
+import { Header, CRUI } from '../UI';
+import {
+	Button,
+	Drawer,
+	List,
+	ListItem,
+	ListItemText,
+	ListItemIcon,
+	Toolbar,
+	Grid,
+} from '@material-ui/core';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { Link } from 'react-router-dom';
 
 const CreateRoom = () => {
+	const [toggleId, settoggleId] = useState(0);
+	const [quizlist, setquizlist] = useState([
+		{ sort: 'Quiz' },
+		{ sort: 'True or False' },
+	]);
+	const quizitem = quizlist.map((quizlist, index) => (
+		<ListItem
+			button
+			selected={toggleId === index}
+			classes={{ selected: 'drawerActive' }}
+			key={index}
+			onClick={() => settoggleId(index)}
+		>
+			<ListItemText primary={index + 1} />
+			<ListItemText primary={quizlist.sort} />
+			<ListItemIcon>
+				<DeleteIcon />
+			</ListItemIcon>
+		</ListItem>
+	));
 	return (
-		<>
-			<Header left="left-1" right="right1" />
-			<div>create</div>
-		</>
+		<div className="CreateRoom">
+			{/* Header */}
+			<Header
+				left={
+					<Button variant="contained" color="primary" className="btn">
+						Settings
+					</Button>
+				}
+				right={
+					<>
+						<Button
+							variant="contained"
+							color="default"
+							className="rightbtn"
+							component={Link}
+							to="/list"
+						>
+							EXIT
+						</Button>
+						<Button variant="contained" className={`${'btn1'} ${'rightbtn'}`}>
+							DONE
+						</Button>
+					</>
+				}
+			/>
+			{/* SideBar(Left) */}
+			<Drawer
+				className="drawer"
+				variant="permanent"
+				classes={{
+					paper: 'drawerPaper',
+				}}
+			>
+				<Toolbar />
+				<Grid container className="drawerContainer">
+					<List>{quizitem}</List>
+					<Grid item className="drawerItem">
+						<Button className="drawerBtn" color="primary" variant="contained">
+							Add question
+						</Button>
+					</Grid>
+				</Grid>
+			</Drawer>
+			{/* Main */}
+			<div className="main">
+				<CRUI quizlist={quizlist} toggleId={toggleId} />
+			</div>
+		</div>
 	);
 };