From 170a194b027c8bc13f1aced11088423662482b09 Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Tue, 9 Feb 2021 22:17:34 +0900 Subject: [PATCH 01/15] Header btn , Side bar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * header에 들어갈 버튼 제작 * quiz 번호를 선택할 sidebar 틀 제작 * createroom에서 사용할 createroom.scss 작성 --- src/components/page/CreateRoom.js | 52 +++++++++++++++++++++++++--- src/scss/components/_createroom.scss | 18 ++++++++++ src/scss/main.scss | 3 +- 3 files changed, 67 insertions(+), 6 deletions(-) create mode 100644 src/scss/components/_createroom.scss diff --git a/src/components/page/CreateRoom.js b/src/components/page/CreateRoom.js index 1a1000e..346fc09 100644 --- a/src/components/page/CreateRoom.js +++ b/src/components/page/CreateRoom.js @@ -1,12 +1,54 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Header } from '../UI'; +import { Button, Drawer, List, ListItem, Toolbar } from '@material-ui/core'; +import { Link } from 'react-router-dom'; const CreateRoom = () => { + const list = () => ( + + Hi + + ); return ( - <> -
-
create
- +
+
+ Settings + + } + right={ + <> + + + + } + /> + + + {list()} + +
); }; diff --git a/src/scss/components/_createroom.scss b/src/scss/components/_createroom.scss new file mode 100644 index 0000000..f17c619 --- /dev/null +++ b/src/scss/components/_createroom.scss @@ -0,0 +1,18 @@ +.CreateRoom{ + display: flex; + .btn{ + margin-left: 10px !important; + font-size: 1.2rem !important; + padding: 0px 16px !important; + } + .rightbtn{ + padding: 0px 28px !important; + letter-spacing: 0.1rem; + } + .sidebar{ + z-index: -1; + } + .drawerPaper{ + width:15%; + } +} \ No newline at end of file diff --git a/src/scss/main.scss b/src/scss/main.scss index e9a4d98..316098d 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//createroom'; \ No newline at end of file From 2a1174106ad8ca8c1493807f12ecd1d0b724afba Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Fri, 12 Feb 2021 02:05:08 +0900 Subject: [PATCH 02/15] =?UTF-8?q?main=20page=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * title 입력 칸 InputBase로 구현 * option 선택 칸 paper로 border-radius:50%로 구현 * answer 입력칸 icon 아무거나 넣음, paper로 구현 ---- To do * option칸 grid container 넣어서 xs={4}로 바꾸기 * nav 구현하기 * state 관리하기 --- src/components/page/CreateRoom.js | 108 ++++++++++++++++++++++++++- src/scss/components/_createroom.scss | 64 +++++++++++++++- 2 files changed, 167 insertions(+), 5 deletions(-) diff --git a/src/components/page/CreateRoom.js b/src/components/page/CreateRoom.js index 346fc09..71d2624 100644 --- a/src/components/page/CreateRoom.js +++ b/src/components/page/CreateRoom.js @@ -1,6 +1,20 @@ import React, { useState } from 'react'; import { Header } from '../UI'; -import { Button, Drawer, List, ListItem, Toolbar } from '@material-ui/core'; +import { + Button, + Drawer, + List, + ListItem, + Toolbar, + InputBase, + Grid, + Paper, + Select, + FormControl, + MenuItem, + Typography, +} from '@material-ui/core'; +import StarsIcon from '@material-ui/icons/Stars'; import { Link } from 'react-router-dom'; const CreateRoom = () => { @@ -11,7 +25,9 @@ const CreateRoom = () => { ); return (
+ {/* Header */}
Settings @@ -38,8 +54,9 @@ const CreateRoom = () => { } /> + {/* SideBar(Left) */} { {list()} + {/* Main */} +
+ + + {/* main 위치조정 */} + + + + + {/* Title 입력 칸 */} + + + + + + {/* 퀴즈 옵션 설정하기 */} + +
+ Time Limit + + + + + +
+
+ Points + + + + + +
+
+ Answer Opt + + + + + +
+ + {/* 정답 설정하기 */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
); }; diff --git a/src/scss/components/_createroom.scss b/src/scss/components/_createroom.scss index f17c619..332bbad 100644 --- a/src/scss/components/_createroom.scss +++ b/src/scss/components/_createroom.scss @@ -1,5 +1,6 @@ .CreateRoom{ - display: flex; + display:flex; + flex-direction: column; .btn{ margin-left: 10px !important; font-size: 1.2rem !important; @@ -9,10 +10,67 @@ padding: 0px 28px !important; letter-spacing: 0.1rem; } - .sidebar{ + .drawer{ + width: 16%; + height: 100%; + flex-shrink: 0; + white-space: nowrap; z-index: -1; } .drawerPaper{ - width:15%; + width: inherit; } + .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{ + display:flex; + flex-direction: row; + justify-content: center; + } + .circleDiv{ + display:flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 8.6rem; + width: 15%; + margin: 0 4rem; + } + .circleText{ + font-family: Roboto-mono; + display: inline-block; + font-size: 1.1rem; + letter-spacing: 3px; + margin-bottom: 5%; + } + .circle{ + width:inherit; + height: inherit; + border-radius: 50%; + width:80%; + background-color: $main-white-main; + display: flex; + justify-content: center; + align-items: center; + } + .selectOpt{ + color: $main-black-main; + } + } + } + } \ No newline at end of file From 12b46b8d394f8522812c91e16be44d8862c1597e Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Fri, 12 Feb 2021 16:09:16 +0900 Subject: [PATCH 03/15] =?UTF-8?q?Quiz=20front=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 정답 버튼부분 구현 * container안에 item으로 넣기 * header의 z-index 조정 * sidebar의 z-index 조정 --- To do * Toggle state & quiz/True or false state와 조건부 렌더링 이용하여 다르게 보여주기 ( 할 수 있을까.. ?) * ans paper 색깔 주기 * 전체적으로 state 관리 * option 칸 가운데 정렬로 바꾸기 --- src/components/page/CreateRoom.js | 140 ++++++++++++++++++--------- src/scss/components/_createroom.scss | 30 ++++-- src/scss/components/_header.scss | 1 + 3 files changed, 117 insertions(+), 54 deletions(-) diff --git a/src/components/page/CreateRoom.js b/src/components/page/CreateRoom.js index 71d2624..ba9857e 100644 --- a/src/components/page/CreateRoom.js +++ b/src/components/page/CreateRoom.js @@ -13,8 +13,11 @@ import { 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'; import { Link } from 'react-router-dom'; const CreateRoom = () => { @@ -64,6 +67,7 @@ const CreateRoom = () => { > {list()} + {/* Main */}
@@ -89,62 +93,104 @@ const CreateRoom = () => { {/* 퀴즈 옵션 설정하기 */} - -
- Time Limit - - - - - -
-
- Points - - - - - -
-
- Answer Opt - - - - - -
+ + +
+ Time Limit + + + + + +
+ + +
+ Points + + + + + +
+ + +
+ Answer Opt + + + + + +
+ {/* 정답 설정하기 */} - - - - + + + + + } + checkedIcon={} + /> - - - - + + + + + } + checkedIcon={} + /> - - - - + + + + + } + checkedIcon={} + /> - - - - + + + + + } + checkedIcon={} + /> diff --git a/src/scss/components/_createroom.scss b/src/scss/components/_createroom.scss index 332bbad..2b2d95b 100644 --- a/src/scss/components/_createroom.scss +++ b/src/scss/components/_createroom.scss @@ -15,10 +15,11 @@ height: 100%; flex-shrink: 0; white-space: nowrap; - z-index: -1; + z-index: 1; } .drawerPaper{ width: inherit; + border-right: .2rem $main-white-main solid !important; } .main{ flex-grow:1; @@ -37,8 +38,10 @@ } } .optContainer{ - display:flex; - flex-direction: row; + margin: 0 10% 2rem 10%; + } + .circleItem{ + display: flex; justify-content: center; } .circleDiv{ @@ -46,9 +49,8 @@ flex-direction: column; justify-content: center; align-items: center; - height: 8.6rem; - width: 15%; - margin: 0 4rem; + width: 125px; + height: 125px; } .circleText{ font-family: Roboto-mono; @@ -56,12 +58,14 @@ font-size: 1.1rem; letter-spacing: 3px; margin-bottom: 5%; + max-height: 26.4px; } .circle{ width:inherit; height: inherit; border-radius: 50%; - width:80%; + width:95px; + height: 90px; background-color: $main-white-main; display: flex; justify-content: center; @@ -70,6 +74,18 @@ .selectOpt{ color: $main-black-main; } + .ansItem{ + padding: 15px; + } + .ansPaper{ + padding: 5px; + display: flex; + align-items: center; + } + .ansInput{ + font-size: 2.5rem !important; + margin: 10px; + } } } diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index 67cd079..a76c3f9 100644 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -1,5 +1,6 @@ .Header { flex-grow: 1; + z-index: 1201; .bar { background-color: black !important; // 색상 팔레트 만들어지면 변경해주세요! box-shadow: none !important; From aeea5a4a9ea641265b25bd374f0051134954efe6 Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Fri, 12 Feb 2021 16:34:33 +0900 Subject: [PATCH 04/15] =?UTF-8?q?CRUI=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 조건부 렌더링을 위해 CRUI로 파일 분리 --- src/components/UI/CreateRoomUI.js | 156 ++++++++++++++++++++++++++++++ src/components/UI/index.js | 1 + src/components/page/CreateRoom.js | 150 +--------------------------- 3 files changed, 161 insertions(+), 146 deletions(-) create mode 100644 src/components/UI/CreateRoomUI.js diff --git a/src/components/UI/CreateRoomUI.js b/src/components/UI/CreateRoomUI.js new file mode 100644 index 0000000..f1df1cc --- /dev/null +++ b/src/components/UI/CreateRoomUI.js @@ -0,0 +1,156 @@ +import React 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() { + return ( + + + {/* main 위치조정 */} + + + + + {/* Title 입력 칸 */} + + + + + + {/* 퀴즈 옵션 설정하기 */} + + +
+ Time Limit + + + + + +
+ + +
+ Points + + + + + +
+ + +
+ Answer Opt + + + + + +
+ + + {/* 정답 설정하기 */} + + + + + + } + checkedIcon={} + /> + + + + + + + } + checkedIcon={} + /> + + + + + + + } + checkedIcon={} + /> + + + + + + + } + checkedIcon={} + /> + + + + + + + ); +} + +function TFLayout() { + return
; +} + +function CreateRoomQuiz() { + return ; +} + +export default CreateRoomQuiz; diff --git a/src/components/UI/index.js b/src/components/UI/index.js index 5653319..60c189e 100644 --- a/src/components/UI/index.js +++ b/src/components/UI/index.js @@ -1 +1,2 @@ export { default as Header } from './Header'; +export { default as CRUI } from './CreateRoomUI'; diff --git a/src/components/page/CreateRoom.js b/src/components/page/CreateRoom.js index ba9857e..ba0d501 100644 --- a/src/components/page/CreateRoom.js +++ b/src/components/page/CreateRoom.js @@ -1,23 +1,6 @@ -import React, { useState } from 'react'; -import { Header } from '../UI'; -import { - Button, - Drawer, - List, - ListItem, - 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'; +import React from 'react'; +import { Header, CRUI } from '../UI'; +import { Button, Drawer, List, ListItem, Toolbar } from '@material-ui/core'; import { Link } from 'react-router-dom'; const CreateRoom = () => { @@ -71,132 +54,7 @@ const CreateRoom = () => { {/* Main */}
- - - {/* main 위치조정 */} - - - - - {/* Title 입력 칸 */} - - - - - - {/* 퀴즈 옵션 설정하기 */} - - -
- Time Limit - - - - - -
- - -
- Points - - - - - -
- - -
- Answer Opt - - - - - -
- - - {/* 정답 설정하기 */} - - - - - - } - checkedIcon={} - /> - - - - - - - } - checkedIcon={} - /> - - - - - - - } - checkedIcon={} - /> - - - - - - - } - checkedIcon={} - /> - - - - - - +
); From bf55bb278349f348943b051b84b942f9f5503062 Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Mon, 15 Feb 2021 23:37:04 +0900 Subject: [PATCH 05/15] =?UTF-8?q?=EC=83=89=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * header의 rigthbtn 색 관리 * sidebard의 addquestion 색 관리 * ans paper의 색 추가 및 map 함수로 중복 제거 --- src/components/UI/CreateRoomUI.js | 77 ++++++---------------------- src/components/page/CreateRoom.js | 28 ++++++---- src/scss/components/_createroom.scss | 27 ++++++++++ 3 files changed, 60 insertions(+), 72 deletions(-) diff --git a/src/components/UI/CreateRoomUI.js b/src/components/UI/CreateRoomUI.js index f1df1cc..c77e2c9 100644 --- a/src/components/UI/CreateRoomUI.js +++ b/src/components/UI/CreateRoomUI.js @@ -15,6 +15,20 @@ import CircleCheckedFilled from '@material-ui/icons/CheckCircle'; import CircleUnchecked from '@material-ui/icons/RadioButtonUnchecked'; function QuizLayout() { + const ans4 = ['ansred', 'ansblue', 'ansyel', 'ansgren']; + const ans4list = ans4.map((ans4) => ( + + + + + } + checkedIcon={} + /> + + + )); return ( @@ -77,68 +91,7 @@ function QuizLayout() { {/* 정답 설정하기 */} - - - - - - } - checkedIcon={} - /> - - - - - - - } - checkedIcon={} - /> - - - - - - - } - checkedIcon={} - /> - - - - - - - } - checkedIcon={} - /> - - - + {ans4list} diff --git a/src/components/page/CreateRoom.js b/src/components/page/CreateRoom.js index ba0d501..6c5cfd2 100644 --- a/src/components/page/CreateRoom.js +++ b/src/components/page/CreateRoom.js @@ -1,6 +1,13 @@ import React from 'react'; import { Header, CRUI } from '../UI'; -import { Button, Drawer, List, ListItem, Toolbar } from '@material-ui/core'; +import { + Button, + Drawer, + List, + ListItem, + Toolbar, + Grid, +} from '@material-ui/core'; import { Link } from 'react-router-dom'; const CreateRoom = () => { @@ -13,7 +20,6 @@ const CreateRoom = () => {
{/* Header */}
Settings @@ -24,17 +30,13 @@ const CreateRoom = () => { - @@ -49,8 +51,14 @@ const CreateRoom = () => { }} > - {list()} - + + {list()} + + + + {/* Main */}
diff --git a/src/scss/components/_createroom.scss b/src/scss/components/_createroom.scss index 2b2d95b..2914861 100644 --- a/src/scss/components/_createroom.scss +++ b/src/scss/components/_createroom.scss @@ -5,11 +5,21 @@ 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%; @@ -21,6 +31,19 @@ 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; + } + .main{ flex-grow:1; .mainContainer{ @@ -76,6 +99,10 @@ } .ansItem{ padding: 15px; + .ansred{ background-color: $accent2-main; } + .ansblue{ background-color: $accent4-main; } + .ansyel{ background-color: $accent1-main; } + .ansgren{ background-color: $accent3-main; } } .ansPaper{ padding: 5px; From 8f6368f4f5ca6d8aceaaba82301e6dba3de93438 Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Tue, 16 Feb 2021 00:06:14 +0900 Subject: [PATCH 06/15] =?UTF-8?q?=EC=A1=B0=EA=B1=B4=EB=B6=80=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EC=A1=B0=EA=B8=88=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * quizlist( 현재 createroom의 qustion의 list )를 받아옴 => UI로 넘김 => toggleId로 현재 클릭된 question 확인 => 해당 데이터 출력 하는 방식 * add question letterspacing 조정 --- src/components/UI/CreateRoomUI.js | 7 +++++-- src/components/page/CreateRoom.js | 20 ++++++++++++-------- src/scss/components/_createroom.scss | 1 + 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/components/UI/CreateRoomUI.js b/src/components/UI/CreateRoomUI.js index c77e2c9..6069a07 100644 --- a/src/components/UI/CreateRoomUI.js +++ b/src/components/UI/CreateRoomUI.js @@ -102,8 +102,11 @@ function TFLayout() { return
; } -function CreateRoomQuiz() { - return ; +function CreateRoomQuiz(props) { + const toggleId = props.toggleId; + const quizlist = props.quizlist; + if (quizlist[toggleId].sort === 'quiz') return ; + else return ; } export default CreateRoomQuiz; diff --git a/src/components/page/CreateRoom.js b/src/components/page/CreateRoom.js index 6c5cfd2..0f77ec4 100644 --- a/src/components/page/CreateRoom.js +++ b/src/components/page/CreateRoom.js @@ -1,21 +1,25 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Header, CRUI } from '../UI'; import { Button, Drawer, List, ListItem, + ListItemText, Toolbar, Grid, } from '@material-ui/core'; import { Link } from 'react-router-dom'; const CreateRoom = () => { - const list = () => ( - - Hi - - ); + const [quizlist, setquizlist] = useState([{ sort: 'quiz' }]); + const quizitem = quizlist.map((quizlist, index) => ( + + + + + )); + const toggleId = 0; return (
{/* Header */} @@ -52,7 +56,7 @@ const CreateRoom = () => { > - {list()} + {quizitem}
); diff --git a/src/scss/components/_createroom.scss b/src/scss/components/_createroom.scss index 2914861..854ac9f 100644 --- a/src/scss/components/_createroom.scss +++ b/src/scss/components/_createroom.scss @@ -42,6 +42,7 @@ width:100%; font-size: 1.1rem; color: $main-white-main; + letter-spacing: 1.5px; } .main{ From b592079188a5fdf7771f2faddcacd04bdbeda666 Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Wed, 17 Feb 2021 23:54:54 +0900 Subject: [PATCH 07/15] Update CreateRoomUI.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit NativeSelect 넣으니까 이상하다 ... Select 안에 있는 놈의 padding 없애기에 실패했따... 대체 뭐지 ? --- src/components/UI/CreateRoomUI.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/UI/CreateRoomUI.js b/src/components/UI/CreateRoomUI.js index 6069a07..c0c0c1e 100644 --- a/src/components/UI/CreateRoomUI.js +++ b/src/components/UI/CreateRoomUI.js @@ -9,6 +9,7 @@ import { MenuItem, Typography, Checkbox, + NativeSelect, } from '@material-ui/core'; import StarsIcon from '@material-ui/icons/Stars'; import CircleCheckedFilled from '@material-ui/icons/CheckCircle'; From 6a2df5cacb0a155f792aca34fb0a8fc0a9ea72e1 Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Thu, 18 Feb 2021 00:24:24 +0900 Subject: [PATCH 08/15] =?UTF-8?q?SelectIcon=20=EC=88=98=EC=A0=95=20&=20Tog?= =?UTF-8?q?gle?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Select 중앙 정렬이 어려워 Icon 색을 바꾸는 방향. * Sidebar listItem에 deleteIcon 추가 * Sidebar 클릭 기능 추가 To do * side bar 정렬 * TF layout 구현 --- src/components/UI/CreateRoomUI.js | 25 ++++++++++++++++++------- src/components/page/CreateRoom.js | 14 +++++++++++--- src/scss/components/_createroom.scss | 3 +++ 3 files changed, 32 insertions(+), 10 deletions(-) diff --git a/src/components/UI/CreateRoomUI.js b/src/components/UI/CreateRoomUI.js index c0c0c1e..7bcb26c 100644 --- a/src/components/UI/CreateRoomUI.js +++ b/src/components/UI/CreateRoomUI.js @@ -9,7 +9,6 @@ import { MenuItem, Typography, Checkbox, - NativeSelect, } from '@material-ui/core'; import StarsIcon from '@material-ui/icons/Stars'; import CircleCheckedFilled from '@material-ui/icons/CheckCircle'; @@ -59,7 +58,11 @@ function QuizLayout() { Time Limit - 20 seconds @@ -71,8 +74,12 @@ function QuizLayout() { Points - + standard @@ -83,8 +90,12 @@ function QuizLayout() { Answer Opt - + single @@ -106,7 +117,7 @@ function TFLayout() { function CreateRoomQuiz(props) { const toggleId = props.toggleId; const quizlist = props.quizlist; - if (quizlist[toggleId].sort === 'quiz') return ; + if (quizlist[toggleId].sort === 'Quiz') return ; else return ; } diff --git a/src/components/page/CreateRoom.js b/src/components/page/CreateRoom.js index 0f77ec4..833dc77 100644 --- a/src/components/page/CreateRoom.js +++ b/src/components/page/CreateRoom.js @@ -6,20 +6,28 @@ import { 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 [quizlist, setquizlist] = useState([{ sort: 'quiz' }]); + const [toggleId, settoggleId] = useState(0); + const [quizlist, setquizlist] = useState([ + { sort: 'Quiz' }, + { sort: 'True or False' }, + ]); const quizitem = quizlist.map((quizlist, index) => ( - + settoggleId(index)}> + + + )); - const toggleId = 0; return (
{/* Header */} diff --git a/src/scss/components/_createroom.scss b/src/scss/components/_createroom.scss index 854ac9f..f0fffc5 100644 --- a/src/scss/components/_createroom.scss +++ b/src/scss/components/_createroom.scss @@ -98,6 +98,9 @@ .selectOpt{ color: $main-black-main; } + .selectIcon{ + fill: $main-black-main; + } .ansItem{ padding: 15px; .ansred{ background-color: $accent2-main; } From 0adc8a484658a8eedce392acfa4900ccfc9d03bc Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Sat, 20 Feb 2021 22:57:48 +0900 Subject: [PATCH 09/15] =?UTF-8?q?sidebar=20active=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * material UI에서 제공하는 selected를 이용하여 active 효과 추가! --- src/components/page/CreateRoom.js | 8 +++++++- src/scss/components/_createroom.scss | 3 +++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/page/CreateRoom.js b/src/components/page/CreateRoom.js index 833dc77..9bc4731 100644 --- a/src/components/page/CreateRoom.js +++ b/src/components/page/CreateRoom.js @@ -20,7 +20,13 @@ const CreateRoom = () => { { sort: 'True or False' }, ]); const quizitem = quizlist.map((quizlist, index) => ( - settoggleId(index)}> + settoggleId(index)} + > diff --git a/src/scss/components/_createroom.scss b/src/scss/components/_createroom.scss index f0fffc5..c7a274a 100644 --- a/src/scss/components/_createroom.scss +++ b/src/scss/components/_createroom.scss @@ -44,6 +44,9 @@ color: $main-white-main; letter-spacing: 1.5px; } + .drawerActive{ + background-color: $primary-main !important; + } .main{ flex-grow:1; From c564947aed607cf6c53012f3758ed3af50609cf6 Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Sat, 20 Feb 2021 23:42:31 +0900 Subject: [PATCH 10/15] =?UTF-8?q?TF=20Layout=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * QuizLayout의 map함수만 제거하여 TFLayout 구현 To do * TF CSS 조정 * state 관리는 어떻게 .. ? * ansPaper의 check icon 색변경 + border주기 --- src/components/UI/CreateRoomUI.js | 101 +++++++++++++++++++++++++++++- 1 file changed, 99 insertions(+), 2 deletions(-) diff --git a/src/components/UI/CreateRoomUI.js b/src/components/UI/CreateRoomUI.js index 7bcb26c..9b29ad9 100644 --- a/src/components/UI/CreateRoomUI.js +++ b/src/components/UI/CreateRoomUI.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Toolbar, InputBase, @@ -111,12 +111,109 @@ function QuizLayout() { } function TFLayout() { - return
; + return ( + + + {/* main 위치조정 */} + + + + + {/* Title 입력 칸 */} + + + + + + {/* 퀴즈 옵션 설정하기 */} + + +
+ Time Limit + + + + + +
+ + +
+ Points + + + + + +
+ + + {/* 정답 설정하기 */} + + + + + + } + checkedIcon={} + /> + + + + + + + } + checkedIcon={} + /> + + + + + + + ); } function CreateRoomQuiz(props) { const toggleId = props.toggleId; const quizlist = props.quizlist; + // const [ansData, setansData] = useState([ + // { 0: true, 1: false, 2: false, 3: false }, + // { 0: true, 1: false }, + // ]); if (quizlist[toggleId].sort === 'Quiz') return ; else return ; } From 9f5914c01be45d1d783b247c70e6b1c3a077a420 Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Sun, 21 Feb 2021 15:18:10 +0900 Subject: [PATCH 11/15] =?UTF-8?q?TF=20layout=20CSS=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * option과 ans칸의 간격 조정 --- src/components/UI/CreateRoomUI.js | 6 +++--- src/scss/components/_createroom.scss | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/UI/CreateRoomUI.js b/src/components/UI/CreateRoomUI.js index 9b29ad9..9b7f5b3 100644 --- a/src/components/UI/CreateRoomUI.js +++ b/src/components/UI/CreateRoomUI.js @@ -135,7 +135,7 @@ function TFLayout() { {/* 퀴즈 옵션 설정하기 */} - +
Time Limit @@ -151,7 +151,7 @@ function TFLayout() {
- +
Points @@ -169,7 +169,7 @@ function TFLayout() { {/* 정답 설정하기 */} - + diff --git a/src/scss/components/_createroom.scss b/src/scss/components/_createroom.scss index c7a274a..77853cd 100644 --- a/src/scss/components/_createroom.scss +++ b/src/scss/components/_createroom.scss @@ -66,6 +66,8 @@ } .optContainer{ margin: 0 10% 2rem 10%; + display: flex; + justify-content: center; } .circleItem{ display: flex; @@ -104,6 +106,9 @@ .selectIcon{ fill: $main-black-main; } + .ansContainer{ + padding-top: 3rem; + } .ansItem{ padding: 15px; .ansred{ background-color: $accent2-main; } From 371d0b06aa93dc5f05e26a3a1cb4cb7707de4e21 Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Sun, 21 Feb 2021 15:41:32 +0900 Subject: [PATCH 12/15] =?UTF-8?q?=EC=B2=B4=ED=81=AC=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 체크 아이콘의 hover시 색바뀌던 효과 제거 * 체크 아이콘의 클릭시 색 바뀌던 효과 제거 * 체크 아이콘의 색 변경 --- src/components/UI/CreateRoomUI.js | 17 ++++++++++------- src/scss/components/_createroom.scss | 13 ++++++++++++- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/components/UI/CreateRoomUI.js b/src/components/UI/CreateRoomUI.js index 9b7f5b3..f95798b 100644 --- a/src/components/UI/CreateRoomUI.js +++ b/src/components/UI/CreateRoomUI.js @@ -22,9 +22,10 @@ function QuizLayout() { } - checkedIcon={} + icon={} + checkedIcon={} /> @@ -179,9 +180,10 @@ function TFLayout() { fullWidth /> } - checkedIcon={} + icon={} + checkedIcon={} /> @@ -194,9 +196,10 @@ function TFLayout() { fullWidth /> } - checkedIcon={} + className="ansInputCheck" + checked={false} + icon={} + checkedIcon={} /> diff --git a/src/scss/components/_createroom.scss b/src/scss/components/_createroom.scss index 77853cd..4fe03c5 100644 --- a/src/scss/components/_createroom.scss +++ b/src/scss/components/_createroom.scss @@ -113,7 +113,7 @@ padding: 15px; .ansred{ background-color: $accent2-main; } .ansblue{ background-color: $accent4-main; } - .ansyel{ background-color: $accent1-main; } + .ansyel{ background-color: darken($accent1-main, 1%); } .ansgren{ background-color: $accent3-main; } } .ansPaper{ @@ -125,6 +125,17 @@ 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; + } } } From cf9d5b9707d29a1cb35be062d829d8e88686a545 Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Wed, 24 Feb 2021 21:53:49 +0900 Subject: [PATCH 13/15] =?UTF-8?q?=EC=96=B4=EC=A0=95=EC=A9=A1=ED=95=9C=20st?= =?UTF-8?q?ate=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ansData의 state 관리 중 아직 오류가 이씀.. --- src/components/UI/CreateRoomUI.js | 49 +++++++++++++++++++++++-------- 1 file changed, 37 insertions(+), 12 deletions(-) diff --git a/src/components/UI/CreateRoomUI.js b/src/components/UI/CreateRoomUI.js index f95798b..7c028d9 100644 --- a/src/components/UI/CreateRoomUI.js +++ b/src/components/UI/CreateRoomUI.js @@ -14,16 +14,18 @@ import StarsIcon from '@material-ui/icons/Stars'; import CircleCheckedFilled from '@material-ui/icons/CheckCircle'; import CircleUnchecked from '@material-ui/icons/RadioButtonUnchecked'; -function QuizLayout() { +function QuizLayout(props) { const ans4 = ['ansred', 'ansblue', 'ansyel', 'ansgren']; - const ans4list = ans4.map((ans4) => ( + const ans4list = ans4.map((ans4, index) => ( } checkedIcon={} /> @@ -111,7 +113,7 @@ function QuizLayout() { ); } -function TFLayout() { +function TFLayout(props) { return ( @@ -181,7 +183,7 @@ function TFLayout() { /> } checkedIcon={} /> @@ -197,7 +199,7 @@ function TFLayout() { /> } checkedIcon={} /> @@ -213,12 +215,35 @@ function TFLayout() { function CreateRoomQuiz(props) { const toggleId = props.toggleId; const quizlist = props.quizlist; - // const [ansData, setansData] = useState([ - // { 0: true, 1: false, 2: false, 3: false }, - // { 0: true, 1: false }, - // ]); - if (quizlist[toggleId].sort === 'Quiz') return ; - else return ; + const defaultansData = [ + [ + { checked: true }, + { checked: false }, + { checked: false }, + { checked: false }, + ], + [{ checked: false }, { checked: true }], + ]; + const [ansData, setansData] = useState(defaultansData); + const handleChange = (e) => { + const selected = ansData[toggleId]; + const data = ansData; + setansData([ + ...data.slice(0, toggleId), + [ + ...selected.slice(0, e.target.value), + { checked: !selected[e.target.value].checked }, + ...selected.slice(e.target.value, selected.length), + ], + ...data.slice(toggleId + 1, data.length), + ]); + }; + if (quizlist[toggleId].sort === 'Quiz') + return ( + + ); + else + return ; } export default CreateRoomQuiz; From 82992febb5d010c5f7484cdea87e56165e63ef9a Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Thu, 25 Feb 2021 19:20:10 +0900 Subject: [PATCH 14/15] =?UTF-8?q?TF=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83?= =?UTF-8?q?=20handlechange=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 아직 불완전한 handlechange 적용되도록 바꿈 --- src/components/UI/CreateRoomUI.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/UI/CreateRoomUI.js b/src/components/UI/CreateRoomUI.js index 7c028d9..fc126dd 100644 --- a/src/components/UI/CreateRoomUI.js +++ b/src/components/UI/CreateRoomUI.js @@ -183,7 +183,9 @@ function TFLayout(props) { /> } checkedIcon={} /> @@ -199,7 +201,9 @@ function TFLayout(props) { /> } checkedIcon={} /> From e90877fa2ffc82d41f27795821e1648d6834e07a Mon Sep 17 00:00:00 2001 From: MOBUMIN Date: Fri, 5 Mar 2021 14:50:01 +0900 Subject: [PATCH 15/15] =?UTF-8?q?state=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 형진님이 알려주신 방법으로 state 관리 * 그러나 생명주기 문제에 부딪힌듯하다.. --- src/components/UI/CreateRoomUI.js | 50 +++++++++++++------------------ 1 file changed, 21 insertions(+), 29 deletions(-) diff --git a/src/components/UI/CreateRoomUI.js b/src/components/UI/CreateRoomUI.js index fc126dd..84c7b8c 100644 --- a/src/components/UI/CreateRoomUI.js +++ b/src/components/UI/CreateRoomUI.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Toolbar, InputBase, @@ -24,8 +24,8 @@ function QuizLayout(props) { } checkedIcon={} /> @@ -184,7 +184,7 @@ function TFLayout(props) { } checkedIcon={} @@ -202,7 +202,7 @@ function TFLayout(props) { } checkedIcon={} @@ -219,35 +219,27 @@ function TFLayout(props) { function CreateRoomQuiz(props) { const toggleId = props.toggleId; const quizlist = props.quizlist; - const defaultansData = [ - [ - { checked: true }, - { checked: false }, - { checked: false }, - { checked: false }, - ], - [{ checked: false }, { checked: true }], - ]; - const [ansData, setansData] = useState(defaultansData); - const handleChange = (e) => { - const selected = ansData[toggleId]; - const data = ansData; - setansData([ - ...data.slice(0, toggleId), - [ - ...selected.slice(0, e.target.value), - { checked: !selected[e.target.value].checked }, - ...selected.slice(e.target.value, selected.length), - ], - ...data.slice(toggleId + 1, data.length), - ]); + 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 ; + return ( + + ); } export default CreateRoomQuiz;