.

src/Admin.js

@@ -14,16 +14,17 @@ function Admin() {
     }
 
     function handleClickQuiz(e) {
+        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]} />)
+        // 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: '정답을 입력하세요' }} />)
+        // }
+        // else {
+        //     setresult(<AdminQuiz QuizNum={e.target.id} data={{ Q: '문제를 입력하세요', Choose: '보기를 입력하세요', A: '정답을 입력하세요' }} />)
 
-        }
+        // }
     }
 
     function handleClickAddQuiz() {

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 AdminQuiz from './AdminQuiz'
+import AdminSetting from './AdminSetting'
 
-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 QuizBtn = []
+
+function Admin() {
+
+    const [result, setresult] = useState('')
+    const [QuizBtnCount, setQuizBtnCount] = useState(4)
 
-          <Route path="/quiz" component={Quiz} />
 
-          <Route path="/end" component={End} />
+    function handleClickSetting() {
+        setresult(<AdminSetting />)
+    }
 
-          <Route path="/admin" component={Admin} />
+    function handleClickQuiz(e) {
+        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>
+        )
+        setQuizBtnCount(QuizBtnCount + 1)
+    }
+
+    return (
+        <>
+            <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>
+                        <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>
 
-          <Redirect path="/admin" to="/admin" />
-        </Switch>
                         </div>
-    </Router>
+                    </div>
+
+                    <div className="col-8 ">
+                        {result}
+                    </div>
+                </div>
+            </div>
+
+
+        </>
     )
 }
 
-
-export default App;
\ No newline at end of file
+export default Admin
\ No newline at end of file