Merge branch 'Sangjune' into jiwon

src/Admin.js

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import AdminQuiz from './AdminQuiz'
 import AdminSetting from './AdminSetting'
 
-
 let QuizBtn = []
 
 function Admin() {
@@ -10,13 +9,12 @@ function Admin() {
     const [result, setresult] = useState('')
     const [QuizBtnCount, setQuizBtnCount] = useState(4)
 
-
     function handleClickSetting() {
         setresult(<AdminSetting />)
     }
 
     function handleClickQuiz(e) {
-        setresult(<AdminQuiz QuizNum={e.target.id} data={JSON.parse(localStorage.getItem('QnA'))} />)
+        (JSON.parse(localStorage.getItem('QnA')) === null) ? setresult(<AdminQuiz QuizNum={e.target.id} data={{Q:'x' , Choose:'x', A:'x'}} />) : setresult(<AdminQuiz QuizNum={e.target.id} data={JSON.parse(localStorage.getItem('QnA'))} />)
     }
 
     function handleClickAddQuiz() {

src/AdminQuiz.js

-import React, { useState, useEffect } from 'react';
-// import Admin from './Admin'
+import React, { useState} from 'react';
 
 let list = []
 
 let QnAadmins = []
 let QnAadmin = {}
-
 let savechoose = {}
 
-
 function AdminQuiz(props) {
 
     const [question, setQuestion] = useState('')
@@ -19,19 +16,19 @@ function AdminQuiz(props) {
     const [c, setc] = useState([])
     const [a, seta] = useState('')
 
-    useEffect(()=>{
-        setQuestion('')
-        if(props.data[props.QuizNum-1]){
-            setq(props.data[props.QuizNum-1].Q)
-            setc(props.data[props.QuizNum-1].Choose)
-            seta(props.data[props.QuizNum-1].A)
-        }
-        else {
-            setq('보기를 입력하세요')
-            setc(['보기를 입력하세요','보기를 입력하세요','보기를 입력하세요','보기를 입력하세요'])
-            seta('보기를 입력하세요')
-        }
-    },[props.QuizNum])
+    // useEffect(()=>{
+    //     setQuestion('')
+    //     if(props.data[props.QuizNum-1]){
+    //         setq(props.data[props.QuizNum-1].Q)
+    //         setc(props.data[props.QuizNum-1].Choose)
+    //         seta(props.data[props.QuizNum-1].A)
+    //     }
+    //     else {
+    //         setq('보기를 입력하세요')
+    //         setc(['보기를 입력하세요','보기를 입력하세요','보기를 입력하세요','보기를 입력하세요'])
+    //         seta('보기를 입력하세요')
+    //     }
+    // },[props.QuizNum])
 
     const handleChangeQuestion = (event) => {
         QnAadmin['Q'] = event.target.value
@@ -56,7 +53,7 @@ function AdminQuiz(props) {
                         <input type="radio" checked={false} name="answer" />
                     </div>
                 </div>
-                <input type="text" class="form-control" id={String(selectOption + 1)} placeholder={c[1]} onChange={handleChangeChoose} />
+                <input type="text" class="form-control" id={String(selectOption + 1)} placeholder={ props.data[props.QuizNum-1].Choose===null ? (selectOption+1)+'번 보기를 입력하세요' : props.data[props.QuizNum-1].Choose[selectOption]} onChange={handleChangeChoose} />
             </div>
         )
         setselectOption(selectOption + 1)
@@ -80,41 +77,42 @@ function AdminQuiz(props) {
             QnAadmins.push(QnAadmin)
             QnAadmin = {}
             localStorage.setItem('QnA', JSON.stringify(QnAadmins))
-            console.log(QnAadmins)
-            // setselectOption(1)
+            // console.log(QnAadmins)
             alert('입력이 완료되었습니다.')
         }
 
     }
 
+    // function handleChangeQuestion(){}
+
+
     return (
         <div className="" id="Quiz1">
-            <h2 className="p-3 border text-center bg-white font-weight-bold">{String(props.QuizNum)}번 문제만들기</h2>
+            <h2 className="p-3 border text-center">{String(props.QuizNum)}번 문제만들기</h2>
             <div className="p-3 borber">
                 <div className="p-3 ">
                     <span className="font-weight-bold mr-2 h3">1. 문제 입력하기</span>
-                    <input type="text" id="inputQuiz" className="form-control" value={question} onChange={handleChangeQuestion} placeholder={q} />
+                    <input type="text" id="inputQuiz" className="form-control"  onChange={handleChangeQuestion} placeholder={ props.data[props.QuizNum-1].Q==='x' ? '문제를 입력하세요' : props.data[props.QuizNum-1].Q} />
                 </div>
                 <div className="p-3 ">
                     <span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span>
                     <div className="p-3 ">
-                        <div className="input-group">
-                            <div className="input-group-prepend">
-                                <div className="input-group-text">
-                                    <input type="radio" checked={false} name="answer" />
-                                </div>
+                    <div className="input-group">
+                        <div className="input-group-prepend">
+                            <div className="input-group-text">
+                            <input type="radio" checked={false} name="answer" />
                             </div>
-                            <input type="text" className="form-control" id='1' value={choose} placeholder={c[0]} onChange={handleChangeChoose} />
                         </div>
-                        {list.map((element) => element)}
-                        <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
+                        <input type="text" className="form-control" id='1' placeholder={ props.data[props.QuizNum-1].Choose==='x' ? '1번 보기를 입력하세요' : props.data[props.QuizNum-1].Choose[0]} onChange={handleChangeChoose} />
                     </div>
+                    {list.map((element) => element)}
+                    <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
+                </div>
                 </div>
-
 
                 <div className="p-3 ">
                     <span className="font-weight-bold mr-2 h3">정답:</span>
-                    <input type="text" value={answer} onChange={handleChangeanswer} placeholder={a} />
+                    <input type="text" value={answer} onChange={handleChangeanswer} placeholder={ props.data[props.QuizNum-1].A==='x' ? '정답를 입력하세요' : props.data[props.QuizNum-1].A} />
                 </div>
 
                 <label for="inputLogin" className="d-flex justify-content-center">

src/AdminSetting.js

@@ -43,25 +43,24 @@ function AdminSetting() {
             alert('저장이 완료되었습니다.')
             console.log(Setadmin)
 
-            // setDoneset(true)
         }
 
     }
     return (
-        <div>
-            <h2 className="p-3 border text-center bg-white font-weight-bold">관리자 설정 변경 창</h2>
+        <div className="col-8">
+            <h2 className="p-3 border text-center">관리자 설정 변경 창</h2>
             <div className="p-3 border">
-                <h2>변경할 비밀번호를 입력하세요</h2>
+                <h4>변경할 비밀번호를 입력하세요</h4>
                 <input type="text" onChange={handleChangePassword} placeholder="New Password" />
 
             </div>
             <div className="p-3 border">
-                <h2>변경할 관리자 비밀번호를 입력하세요</h2>
+                <h4>변경할 관리자 비밀번호를 입력하세요</h4>
                 <input type="text" onChange={handleChangeAdminPassword} placeholder="New Admin Password" />
 
             </div>
             <div className="p-3 border">
-                <h2>타이머를 설정하세요(초단위)</h2>
+                <h4>타이머를 설정하세요(초단위)</h4>
                 <input type="text" onChange={handleChangeTime} placeholder="Set Time" />
 
             </div>

src/App.js

 import React from 'react';
-// import './App.css';
 import Home from './Home'
 import Quiz from './Quiz'
 import End from './End'

src/Quiz.js

@@ -3,8 +3,11 @@ import { Link, Redirect } from 'react-router-dom';
 import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
 import logo from './img/img_question.png'
 
+
 let localQnA = JSON.parse(localStorage.getItem('QnA'))
 
+
+
 let Answers = []
 
 function Quiz() {
@@ -27,17 +30,11 @@ function Quiz() {
             localStorage.setItem('Answers', JSON.stringify(Answers))
             localStorage.setItem("Solutions", JSON.stringify(Solutions))
         }
+        // eslint-disable-next-line
     }, [])
 
 
 
-    //그걸 로컬에 저장
-    //foreach 쓰기
-    let finalQnA = localQnA.map((x, index) => {
-        //delete x.A                       //A 삭제
-        return { ...x, N: index + 1 }    //N 추가
-    })
-
     function handleQuestion() {
         setQuestion({ ...localQnA[question.N] })
         setSelected("") //페이지 넘어가면 selected 초기화
@@ -82,7 +79,7 @@ function Quiz() {
                             </div>
                             <p className="h3 text-center text-danger ">
                                 <Timer
-                                    initialTime={30010}
+                                    initialTime={3000}
                                     direction="backward"
                                     checkpoints={[
                                         {