.

src/Admin.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import AdminQuiz from './AdminQuiz'
 import AdminSetting from './AdminSetting'
 
-let QuizBtn=[]
+let QuizBtn = []
 
 function Admin() {
 
@@ -14,9 +14,9 @@ function Admin() {
     }
 
     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() {
         QuizBtn.push(
             <button type='button' className='btn btn-outline-primary' id={QuizBtnCount} onClick={handleClickQuiz}>Quiz {QuizBtnCount}</button>
@@ -26,33 +26,33 @@ function Admin() {
 
     return (
         <>
-        <div className="container-fluid">
-        <div className="row justify-content-md-center mt-5">
+            <div className="container-fluid">
+                <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>
-                    <div>
-                        <button type="button" className="btn btn-outline-info mb-5" onClick={handleClickSetting}>Setting</button>
+                        <div className="mb-5">
+                            <h4>관리자페이지</h4>
+                        </div>
+                        <div>
+                            <button type="button" className="btn btn-outline-info mb-5" 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>
+                            {QuizBtn.map((element) => element)}
+                            <button type="button" className="btn btn-outline-primary" onClick={handleClickAddQuiz}>+</button>
+
+                        </div>
                     </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>
-                        {QuizBtn.map((element) => element)}
-                        <button type="button" className="btn btn-outline-primary" onClick={handleClickAddQuiz}>+</button>
 
+                    <div className="col-8 ">
+                        {result}
                     </div>
                 </div>
-
-                <div className="col-8 ">
-                                         {result}
-                </div>
             </div>
-        </div>
 
 
-    </>
+        </>
     )
 }
 

src/AdminQuiz.js

-import React, { useState, useEffect } from 'react';
+import React, { useState} from 'react';
 
 let list = []
 
@@ -12,23 +12,6 @@ function AdminQuiz(props) {
     const [choose, setChoose] = useState('')
     const [answer, setAnswer] = useState('')
     const [selectOption, setselectOption] = useState(1)
-    const [q, setq] = useState('')
-    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])
 
     const handleChangeQuestion = (event) => {
         QnAadmin['Q'] = event.target.value
@@ -51,7 +34,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)
@@ -90,7 +73,7 @@ function AdminQuiz(props) {
             <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>
@@ -101,7 +84,7 @@ function AdminQuiz(props) {
                             <input type="radio" checked={false} name="answer" />
                             </div>
                         </div>
-                        <input type="text" className="form-control" id='1' value={choose} placeholder={c[0]} onChange={handleChangeChoose} />
+                        <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>
@@ -110,7 +93,7 @@ function AdminQuiz(props) {
 
                 <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/Quiz.js

@@ -17,27 +17,21 @@ function Quiz() {
     const [selected, setSelected] = useState("")  //선택한 답을 보여줄 것
 
     const [timeout, settimeout] = useState(false)
-//for each 사용하기
+    //for each 사용하기
     let Solutions = []          //빈 배열
     console.log(localQnA)
     localQnA.map((x) => {      //A만 꺼내서 q에 추가
         // Answers.push(0)
         return Solutions.push(x.A)
     })
-    useEffect(()=>{for (let i=1 ; i <= Solutions.length;i++){
-        Answers.push(0)
-        localStorage.setItem('Answers',JSON.stringify(Answers))
-        localStorage.setItem("Solutions", JSON.stringify(Solutions)) 
-    }},[])
-    
-      
-  
-  //그걸 로컬에 저장
-//foreach 쓰기
-    let finalQnA = localQnA.map((x, index) => {
-        //delete x.A                       //A 삭제
-        return { ...x, N: index + 1 }    //N 추가
-    })
+    useEffect(() => {
+        for (let i = 1; i <= Solutions.length; i++) {
+            Answers.push(0)
+            localStorage.setItem('Answers', JSON.stringify(Answers))
+            localStorage.setItem("Solutions", JSON.stringify(Solutions))
+        }
+        // eslint-disable-next-line
+    }, [])