diff --git a/src/components/UI/CreateRoomUI.js b/src/components/UI/CreateRoomUI.js new file mode 100644 index 0000000..84c7b8c --- /dev/null +++ b/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) => ( + + + + + } + checkedIcon={} + /> + + + )); + return ( + + + {/* main 위치조정 */} + + + + + {/* Title 입력 칸 */} + + + + + + {/* 퀴즈 옵션 설정하기 */} + + +
+ Time Limit + + + + + +
+ + +
+ Points + + + + + +
+ + +
+ Answer Opt + + + + + +
+ + + {/* 정답 설정하기 */} + {ans4list} + + + + ); +} + +function TFLayout(props) { + return ( + + + {/* main 위치조정 */} + + + + + {/* Title 입력 칸 */} + + + + + + {/* 퀴즈 옵션 설정하기 */} + + +
+ Time Limit + + + + + +
+ + +
+ Points + + + + + +
+ + + {/* 정답 설정하기 */} + + + + + + } + checkedIcon={} + /> + + + + + + + } + checkedIcon={} + /> + + + + + + + ); +} + +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 ( + + ); + else + return ( + + ); +} + +export default CreateRoomQuiz; diff --git a/src/components/UI/index.js b/src/components/UI/index.js index a9a6c4e..6e1d0aa 100644 --- a/src/components/UI/index.js +++ b/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'; diff --git a/src/components/page/CreateRoom.js b/src/components/page/CreateRoom.js index 1a1000e..9bc4731 100644 --- a/src/components/page/CreateRoom.js +++ b/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) => ( + settoggleId(index)} + > + + + + + + + )); return ( - <> -
-
create
- +
+ {/* Header */} +
+ Settings + + } + right={ + <> + + + + } + /> + {/* SideBar(Left) */} + + + + {quizitem} + + + + + + {/* Main */} +
+ +
+
); }; diff --git a/src/scss/components/_createroom.scss b/src/scss/components/_createroom.scss new file mode 100644 index 0000000..4fe03c5 --- /dev/null +++ b/src/scss/components/_createroom.scss @@ -0,0 +1,142 @@ +.CreateRoom{ + display:flex; + flex-direction: column; + .btn{ + margin-left: 10px !important; + font-size: 1.2rem !important; + padding: 0px 16px !important; + color: $main-white-main; + } + .btn1{ + background-color: $accent4-main; + } + .btn1:hover{ + background-color: darken($accent4-main,10%); + } + .rightbtn{ + margin-left: 10px !important; + font-size: 1.2rem !important; + padding: 0px 28px !important; + letter-spacing: 0.1rem; + } + + .drawer{ + width: 16%; + height: 100%; + flex-shrink: 0; + white-space: nowrap; + z-index: 1; + } + .drawerPaper{ + width: inherit; + border-right: .2rem $main-white-main solid !important; + } + .drawerContainer{ + display: flex; + flex-direction: column; + } + .drawerItem{ + padding: 1rem 1rem; + } + .drawerBtn{ + width:100%; + font-size: 1.1rem; + color: $main-white-main; + letter-spacing: 1.5px; + } + .drawerActive{ + background-color: $primary-main !important; + } + + .main{ + flex-grow:1; + .mainContainer{ + .inputPaper{ + background-color: $main-white-main; + margin: 4rem 5rem; + height: 6.5rem; + display: flex; + justify-content: center; + .inputTitle{ + width:95%; + height: inherit; + color: $main-grey-darken4-main; + font-size: 3rem; + } + } + .optContainer{ + margin: 0 10% 2rem 10%; + display: flex; + justify-content: center; + } + .circleItem{ + display: flex; + justify-content: center; + } + .circleDiv{ + display:flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 125px; + height: 125px; + } + .circleText{ + font-family: Roboto-mono; + display: inline-block; + font-size: 1.1rem; + letter-spacing: 3px; + margin-bottom: 5%; + max-height: 26.4px; + } + .circle{ + width:inherit; + height: inherit; + border-radius: 50%; + width:95px; + height: 90px; + background-color: $main-white-main; + display: flex; + justify-content: center; + align-items: center; + } + .selectOpt{ + color: $main-black-main; + } + .selectIcon{ + fill: $main-black-main; + } + .ansContainer{ + padding-top: 3rem; + } + .ansItem{ + padding: 15px; + .ansred{ background-color: $accent2-main; } + .ansblue{ background-color: $accent4-main; } + .ansyel{ background-color: darken($accent1-main, 1%); } + .ansgren{ background-color: $accent3-main; } + } + .ansPaper{ + padding: 5px; + display: flex; + align-items: center; + } + .ansInput{ + font-size: 2.5rem !important; + margin: 10px; + } + .ansInputIcon{ + font-size: 2.5rem !important; + margin: 10px; + color: #29e785; + } + .ansInputCheck{ + color: transparent; + } + .ansInputCheck:hover{ + background-color: transparent; + } + } + } + +} \ No newline at end of file diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index fd994c1..dab0eb4 100644 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -1,4 +1,5 @@ .Header { + z-index: 1201; .bar { background-color: $main-black-main !important; // 색상 팔레트 만들어지면 변경해주세요! box-shadow: none !important; diff --git a/src/scss/main.scss b/src/scss/main.scss index 2ffff43..bf2545f 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -6,5 +6,6 @@ //components @import './components/main'; @import './components/header'; +@import './components//createroom'; @import './components/pin'; @import './components/nickname';