ddd

src/Admin.js

@@ -5,7 +5,7 @@ import AdminSetting from './AdminSetting'
 let QuizBtn = []
 
 function Admin() {
-
+    // QnA.length === 0 ? console.log(QnA.length) : QnA = JSON.parse(localStorage.getItem('QnA'))
     const [result, setresult] = useState('')
     const [QuizBtnCount, setQuizBtnCount] = useState(4)
 
@@ -14,7 +14,16 @@ function Admin() {
     }
 
     function handleClickQuiz(e) {
-        (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'))} />)
+
+        let QnA = JSON.parse(localStorage.getItem('QnA'))
+        if (QnA !== null) {
+            (QnA[e.target.id - 1] === undefined) ? setresult(<AdminQuiz QuizNum={e.target.id} data={{ Q: '문제를 입력하세요', Choose: '보기를 입력하세요', A: '정답을 입력하세요' }} />) : setresult(<AdminQuiz QuizNum={e.target.id} data={QnA[e.target.id - 1]} />)
+
+        }
+        else {
+            setresult(<AdminQuiz QuizNum={e.target.id} data={{ Q: '문제를 입력하세요', Choose: '보기를 입력하세요', A: '정답을 입력하세요' }} />)
+
+        }
     }
 
     function handleClickAddQuiz() {

src/AdminQuiz.js

-import React, { useState} from 'react';
+import React, { useState } from 'react';
 
 let list = []
 
@@ -7,9 +7,15 @@ let QnAadmin = {}
 let savechoose = {}
 
 function AdminQuiz(props) {
-    const [question, setQuestion] = useState('')
-    const [choose, setChoose] = useState('')
-    const [answer, setAnswer] = useState('')
+    const [question, setQuestion] = useState(props.data.Q)
+    // setQuestion(props.data.Q)
+    // question = props.data.Q
+    const [choose, setChoose] = useState(props.data.Choose)
+    // setChoose(props.data.Choose)
+    // choose = props.data.Choose
+    const [answer, setAnswer] = useState(props.data.A)
+    // setAnswer(props.data.A)
+    // answer = props.data.A
     const [selectOption, setselectOption] = useState(1)
 
     const handleChangeQuestion = (event) => {
@@ -18,7 +24,7 @@ function AdminQuiz(props) {
     }
     const handleChangeChoose = (event) => {
         savechoose[event.target.id] = event.target.value
-          setChoose(event.target.value)
+        setChoose(event.target.value)
     }
     const handleChangeanswer = (event) => {
         QnAadmin['A'] = event.target.value
@@ -33,7 +39,7 @@ function AdminQuiz(props) {
                         <input type="radio" checked={false} name="answer" />
                     </div>
                 </div>
-                <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} />
+                <input type="text" class="form-control" id={String(selectOption + 1)} value={choose[selectOption]} placeholder={(selectOption + 1) + '번 보기를 입력하세요'} onChange={handleChangeChoose} />
             </div>
         )
         setselectOption(selectOption + 1)
@@ -67,32 +73,33 @@ function AdminQuiz(props) {
 
 
     return (
+        <>       
         <div className="" id="Quiz1">
             <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"  onChange={handleChangeQuestion} placeholder={ props.data[props.QuizNum-1].Q==='x' ? '문제를 입력하세요' : props.data[props.QuizNum-1].Q} />
+                    <input type="text" id="inputQuiz" className="form-control" onChange={handleChangeQuestion} value={question} placeholder={'문제를 입력하세요'} ></input>
                 </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 className="input-group">
+                            <div className="input-group-prepend">
+                                <div className="input-group-text">
+                                    <input type="radio" checked={false} name="answer" />
+                                </div>
                             </div>
+                            <input type="text" className="form-control" id='1' value={choose} placeholder={'1번 보기를 입력하세요'} onChange={handleChangeChoose} />
                         </div>
-                        <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} />
+                        {list.map((element) => element)}
+                        <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
                     </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={ props.data[props.QuizNum-1].A==='x' ? '정답를 입력하세요' : props.data[props.QuizNum-1].A} />
+                    <input type="text" onChange={handleChangeanswer} value={answer} placeholder={'정답를 입력하세요'} />
                 </div>
 
                 <label for="inputLogin" className="d-flex justify-content-center">
@@ -100,6 +107,7 @@ function AdminQuiz(props) {
                 </label>
             </div>
         </div>
+        </>
     )
 }
 

src/Home.js

@@ -4,11 +4,11 @@ import React, { useState } from 'react'
 import { Redirect } from 'react-router-dom';
 
 function Home() {
-    
-    let info=[{password:"0319", AdminPassword:"0001",Time : "30010"}] //수정.추가
-    if(JSON.parse(localStorage.getItem("Set")) === null){
+    let info = []
+    if (JSON.parse(localStorage.getItem("Set")) === null) {
+        info = [{ password: "0319", AdminPassword: "0001", Time: "30010" }]
     }
-    else{
+    else {
         info = JSON.parse(localStorage.getItem("Set"))
     } //수정. 추가
 
@@ -32,14 +32,14 @@ function Home() {
         else if (!password) {
             alert('비밀번호를 입력하세요')
         }
-        else if (name === 'admin' && password === '0001') {
+        else if (name === 'admin' && password === info[0].AdminPassword) {
             console.log('done')
 
             return (setAdmin(true)
 
             )
         }
-        else if (password !== '0319') {
+        else if (password !== info[0].password) {
             alert('유효한 비밀번호를 입력하세요')
         }
         else {
@@ -58,9 +58,9 @@ function Home() {
         <div className="container-fluid bg-light p-5 h-100">
             {admin ? <Redirect to='/admin' /> : ''}
             {done ? <Redirect to='/quiz' /> : ''}
-            
+
             <div>
-                <h3 className="text-center pb-5 font-weight-bold text-danger" style={{'font-family':'sans-serif'}}>Korea University</h3>
+                <h3 className="text-center pb-5 font-weight-bold text-danger" style={{ 'font-family': 'sans-serif' }}>Korea University</h3>
             </div>
 
             <div className="row justify-content-center">

src/Quiz.js

@@ -6,11 +6,19 @@ import logo from './img_question.png'
 
 let localQnA = JSON.parse(localStorage.getItem('QnA'))
 
-
-
 let Answers = []
 
 function Quiz() {
+
+    let Time=0
+    if (JSON.parse(localStorage.getItem("Set"))===null){
+        Time=30010
+    }
+    else{
+        Time=Number(JSON.parse(localStorage.getItem("Set"))[0].Time)
+    }
+
+
     const [question, setQuestion] = useState({
         ...localQnA[0]
     })
@@ -57,7 +65,7 @@ function Quiz() {
                     </div>
                     <div className="col-md-auto">
                         <div className="h2 mt-2">
-                            {localQnA[0].Q}
+                            {question.Q}
                         </div>
                         <div className="mt-2">
                             <form>
@@ -79,7 +87,7 @@ function Quiz() {
                             </div>
                             <p className="h3 text-center text-danger ">
                                 <Timer
-                                    initialTime={3000}
+                                    initialTime={Time}
                                     direction="backward"
                                     checkpoints={[
                                         {

src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'react-dom'
-import './index.css';
 import App from './App';
 // import Quiz from './Quiz';
 import * as serviceWorker from './serviceWorker';