LAST

src/Admin.js

-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import AdminQuiz from './AdminQuiz'
 import AdminSetting from './AdminSetting'
 
 let QuizBtn = []
 
 function Admin() {
-
     const [result, setresult] = useState('')
     const [QuizBtnCount, setQuizBtnCount] = useState(4)
+    const indexRef = useRef(0)
+    const dbRef = useRef([])
 
+    useEffect(() => {
+        if (JSON.parse(localStorage.getItem('QnA'))) {
+            dbRef.current=JSON.parse(localStorage.getItem('QnA'))
+        }
+    }, [])
     function handleClickSetting() {
         setresult(<AdminSetting />)
     }
 
     function handleClickQuiz(e) {
-        (JSON.parse(localStorage.getItem('QnA')) === null) ? setresult(<AdminQuiz QuizNum={e.target.id} data={[{ Q: 'x', Choose: 'x', A: 'x' ,N :1},{ Q: 'x', Choose: 'x', A: 'x' ,N :2},{ Q: 'x', Choose: 'x', A: 'x' ,N :3}]} />) : setresult(<AdminQuiz QuizNum={e.target.id} data={JSON.parse(localStorage.getItem('QnA'))} />)
+        indexRef.current = Number(e.target.id) - 1
+        // console.log(dbRef.current, indexRef.current)
+
+        if(dbRef.current[e.target.id-1]){
+            setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />)  //설명 부탇드립니다.
+        }
+        else{
+            dbRef.current[e.target.id-1] = {'Q':'문제를 입력하세요', 'Choose':['0','0','0','0'], 'A':'정답을 입력하세요'}
+            setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />)
+        }
     }
 
     function handleClickAddQuiz() {
@@ -22,23 +37,28 @@ function Admin() {
             <button type='button' className='btn btn-outline-primary' id={QuizBtnCount} onClick={handleClickQuiz}>Quiz {QuizBtnCount}</button>
         )
         setQuizBtnCount(QuizBtnCount + 1)
-    }
+    } //퀴즈 추가버튼
+
+    function handleClickSave(QnAadmin) {
+        dbRef.current[indexRef.current] = QnAadmin
+        localStorage.setItem('QnA', JSON.stringify(dbRef.current))
 
+    } //설명 부탁드립니다.
     return (
         <>
-            <div className="container-fluid">
+ <div className="container-fluid bg-light">
                 <div className="row justify-content-md-center mt-5">
-                    <div className="col-2 text-center border py-5">
-                        <div className="mb-5">
-                            <h4>관리자페이지</h4>
+                    <div className="col-2 text-center border py-5 bg-white">
+                        <div className="py-3 border-top border-bottom">
+                            <h5 className="font-weight-bold">설정</h5>
                         </div>
-                        <div>
-                            <button type="button" className="btn btn-outline-info mb-5" onClick={handleClickSetting}>Setting</button>
+                        <div className="border-bottom py-4">
+                            <button type="button" className="btn btn-info" onClick={handleClickSetting}>Setting</button>
                         </div>
-                        <div class="btn-group-vertical">
-                            <button type="button" className="btn btn-outline-primary" id="1" onClick={handleClickQuiz}>Quiz 1</button>
-                            <button type="button" className="btn btn-outline-primary" id="2" onClick={handleClickQuiz}>Quiz 2</button>
-                            <button type="button" className="btn btn-outline-primary" id="3" onClick={handleClickQuiz}>Quiz 3</button>
+                        <div className="btn-group-vertical py-4">
+                            <button type="button" className="btn btn-outline-primary" id={1} onClick={handleClickQuiz}>Quiz 1</button>
+                            <button type="button" className="btn btn-outline-primary" id={2} onClick={handleClickQuiz}>Quiz 2</button>
+                            <button type="button" className="btn btn-outline-primary" id={3} onClick={handleClickQuiz}>Quiz 3</button>
                             {QuizBtn.map((element) => element)}
                             <button type="button" className="btn btn-outline-primary" onClick={handleClickAddQuiz}>+</button>
 

src/AdminQuiz.js

-import React, { useState} from 'react';
+import React, { useState, useEffect } from 'react';
 
 let list = []
-
-let QnAadmins = []
 let QnAadmin = {}
 let savechoose = {}
 
 function AdminQuiz(props) {
-    const [question, setQuestion] = useState('')
+
+    const [question, setQuestion] = useState(props.data.Q)
+    // const [choose, setChoose] = useState(props.data.Choose)
     const [choose, setChoose] = useState('')
-    const [answer, setAnswer] = useState('')
+    const [answer, setAnswer] = useState(props.data.A)
     const [selectOption, setselectOption] = useState(1)
+    // const [c, setC] = useState(props.data.Choose)       
+    console.log(props.data.Choose)
+    console.log(choose)
+    // console.log
+    // props.quizNum가 바뀔때마다 즉, Admin.js에서 퀴즈버튼을 바꿔누를때마다 useEffect가 발생하여 값을 업데이트 시켜줍니다.
+    useEffect(() => {
+        setQuestion(props.data.Q)
+        // setC(props.data.Choose)
+        setAnswer(props.data.A)
+        console.log(props.data.Choose)
+        console.log(choose)
+        // document.getElementById('3').value = c[2]
+        // document.getElementById('4').value = c[3]
+
+        // setcn(props.data.Choose)
+        // eslint-disable-next-line
+    }, [props.quizNum])
 
     const handleChangeQuestion = (event) => {
         QnAadmin['Q'] = event.target.value
         setQuestion(event.target.value)
     }
+
     const handleChangeChoose = (event) => {
         savechoose[event.target.id] = event.target.value
         setChoose(event.target.value)
+        // console.log(event.target.value)
     }
+
     const handleChangeanswer = (event) => {
         QnAadmin['A'] = event.target.value
         setAnswer(event.target.value)
@@ -33,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={ 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)} placeholder={(selectOption + 1) + '번 보기를 입력하세요'} onChange={handleChangeChoose} />
             </div>
         )
         setselectOption(selectOption + 1)
@@ -51,28 +71,22 @@ function AdminQuiz(props) {
             alert('정답이 입력되지 않았습니다.')
         }
         else {
-            // console.log(QnAadmin)
             QnAadmin['Choose'] = Object.values(savechoose)
-            QnAadmin['N'] = String(props.QuizNum)
-            QnAadmins.push(QnAadmin)
+            QnAadmin['N'] = String(props.quizNum)
+            props.fn(QnAadmin)
             QnAadmin = {}
-            localStorage.setItem('QnA', JSON.stringify(QnAadmins))
-            // console.log(QnAadmins)
             alert('입력이 완료되었습니다.')
         }
 
     }
 
-    // function handleChangeQuestion(){}
-
-
     return (
         <div className="" id="Quiz1">
-            <h2 className="p-3 border text-center">{String(props.QuizNum)}번 문제만들기</h2>
+            <h2 className="p-3 border text-center bg-white">{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" value={question} onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
                 </div>
                 <div className="p-3 ">
                     <span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span>
@@ -83,16 +97,16 @@ function AdminQuiz(props) {
                                     <input type="radio" checked={false} name="answer" />
                                 </div>
                             </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} />
+                            <input type="text" className="form-control" id='1' placeholder="1번 보기를 입력하세요" onChange={handleChangeChoose} />
                         </div>
-                    {list.map((element) => element)}
+                        {list.map((element, index) => 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" value={answer} onChange={handleChangeanswer} placeholder="정답을 입력하세요" />
                 </div>
 
                 <label for="inputLogin" className="d-flex justify-content-center">

src/AdminSetting.js

@@ -47,20 +47,19 @@ function AdminSetting() {
 
     }
     return (
-        <div className="col-8">
-            <h2 className="p-3 border text-center">관리자 설정 변경 창</h2>
-            
-            <div className="p-3 border">
+        <div className="">
+            <h2 className="p-3 border text-center bg-white">관리자 설정 변경 창</h2>
+            <div className="p-3 border bg-white">
                 <h4>변경할 비밀번호를 입력하세요</h4>
                 <input type="text" onChange={handleChangePassword} placeholder="New Password" />
 
             </div>
-            <div className="p-3 border">
+            <div className="p-3 border bg-white">
                 <h4>변경할 관리자 비밀번호를 입력하세요</h4>
                 <input type="text" onChange={handleChangeAdminPassword} placeholder="New Admin Password" />
 
             </div>
-            <div className="p-3 border">
+            <div className="p-3 border bg-white">
                 <h4>타이머를 설정하세요(초단위)</h4>
                 <input type="text" onChange={handleChangeTime} placeholder="Set Time" />
 

src/Home.js

@@ -4,12 +4,11 @@ import React, { useState } from 'react'
 import { Redirect } from 'react-router-dom';
 
 function Home() {
-    
-    let info=[]
-    if(JSON.parse(localStorage.getItem("Set")) === null){
-        info=[{password:"0319", AdminPassword:"0001",Time : "30010"}] //수정.추가
+    let info = []
+    if (JSON.parse(localStorage.getItem("Set")) === null) {
+        info = [{ password: "0319", AdminPassword: "0001", Time: "30010" }]
     }
-    else{
+    else {
         info = JSON.parse(localStorage.getItem("Set"))
     } //수정. 추가
 
@@ -61,7 +60,7 @@ function Home() {
             {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,18 +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
+
+    let Time=0
+    if (JSON.parse(localStorage.getItem("Set"))===null){
+        Time=30010
     }
-    else {
-        Time = Number(JSON.parse(localStorage.getItem("Set"))[0].Time)
-    } //수정. 추가. 새로 설정한 시간으로 설정
+    else{
+        Time=Number(JSON.parse(localStorage.getItem("Set"))[0].Time)
+    }
+
+
     const [question, setQuestion] = useState({
         ...localQnA[0]
     })
@@ -86,8 +87,7 @@ function Quiz() {
                             </div>
                             <p className="h3 text-center text-danger ">
                                 <Timer
-                                    initialTime={Time} // 수정. 추가. 새로설정한 시간으로 설정. 하지만 새로고침해야 적용됨
-                                    //    initialTime={Number(JSON.parse(localStorage.getItem("Set"))[0].Time)}
+                                    initialTime={Time}
                                     direction="backward"
                                     checkpoints={[
                                         {

src/compare.js

-import React from 'react';
-// import './App.css';
-import Home from './Home'
-import Quiz from './Quiz'
-import End from './End'
-import Admin from './Admin'
+import React,{ useState } from 'react'
 
-import { BrowserRouter as Router, Link, Switch, Route, Redirect } from 'react-router-dom';
 
-function App() {
-  return (
-    <Router>
-      <div className="container-fluid vh-100 bg-light">
-        <header className="border-bottom">
-          <Link to="/">
-            <button className="ml-3 btn btn-light btn-lg font-weight-bold text-dark">Home</button>
-          </Link>
-        </header>
-        <Switch>
-          <Route exact path="/" component={Home} />
+let Setadmins = []
+let Setadmin = {}
+
+function AdminSetting() {
+
+    const [password, setPassword] = useState('')
+    const [adminpassword, setAdminPassword] = useState('')
+    const [time, setTime] = useState('')
+    
     
-          <Route path="/quiz" component={Quiz} />
+    const handleChangePassword = (event) => {
+        Setadmin['password'] = event.target.value
+        setPassword(event.target.value)
 
-          <Route path="/end" component={End} />
+    }
+    const handleChangeAdminPassword = (event) => {
+        Setadmin['AdminPassword'] = event.target.value
+        setAdminPassword(event.target.value)
+    }
+    const handleChangeTime = (event) => {
+        Setadmin['Time'] = event.target.value
+        setTime(event.target.value)
+    }
 
-          <Route path="/admin" component={Admin} />
 
-          <Redirect path="/admin" to="/admin" />
-        </Switch>
+    function handleClick() {
+        if (!password) {
+            alert('비밀번호가 입력되지 않았습니다.')
+        }
+        else if (!adminpassword) {
+            alert('관리자 비밀번호가 입력되지 않았습니다.')
+        }
+        else if (!time) {
+            alert('제한시간이 입력되지 않았습니다.') //타임은 조건은 빼도 될 듯
+        }
+        else {
+            Setadmins.push(Setadmin)
+            localStorage.setItem('Set', JSON.stringify(Setadmins))
+            console.log(Setadmins)
+            alert('저장이 완료되었습니다.')
+            console.log(Setadmin)
+
+        }
+
+    }
+    return (
+        <div className="">
+            <h2 className="p-3 border text-center bg-white">관리자 설정 변경 창</h2>
+            <div className="p-3 border bg-white">
+                <h4>변경할 비밀번호를 입력하세요</h4>
+                <input type="text" onChange={handleChangePassword} placeholder="New Password" />
+
+            </div>
+            <div className="p-3 border bg-white">
+                <h4>변경할 관리자 비밀번호를 입력하세요</h4>
+                <input type="text" onChange={handleChangeAdminPassword} placeholder="New Admin Password" />
+
+            </div>
+            <div className="p-3 border bg-white">
+                <h4>타이머를 설정하세요(초단위)</h4>
+                <input type="text" onChange={handleChangeTime} placeholder="Set Time" />
+
+            </div>
+            <label for="inputLogin" className="d-flex justify-content-center">
+                <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
+            </label>
         </div>
-    </Router>
     )
 }
 
 
-export default App;
+export default AdminSetting
\ No newline at end of file

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';