.

src/Admin.js

-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import AdminQuiz from './AdminQuiz'
 import AdminSetting from './AdminSetting'
 
@@ -8,23 +8,29 @@ function Admin() {
     // QnA.length === 0 ? console.log(QnA.length) : QnA = JSON.parse(localStorage.getItem('QnA'))
     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) {
-        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)
 
-        // 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: '정답을 입력하세요' }} />)
-
-        // }
+        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':'x', 'Choose':[0,0,0,0], 'A':'x'}
+            setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />)
+        }
     }
 
     function handleClickAddQuiz() {
@@ -34,21 +40,27 @@ function Admin() {
         setQuizBtnCount(QuizBtnCount + 1)
     }
 
+    function handleClickSave(QnAadmin) {
+        console.log(QnAadmin, indexRef.current)
+        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/compare.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) {
-        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':'x', 'Choose':[0,0,0,0], 'A':'x'}
+            setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />)
+        }
     }
 
     function handleClickAddQuiz() {
@@ -26,21 +40,28 @@ function Admin() {
         setQuizBtnCount(QuizBtnCount + 1)
     }
 
+    function handleClickSave(QnAadmin) {
+        console.log(QnAadmin, indexRef.current)
+        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>