.

src/App.js

 import React from 'react';
-import './App.css';
 import Home from './Home'
 import Quiz from './Quiz'
 import End from './End'
@@ -10,13 +9,12 @@ import { BrowserRouter as Router, Link, Switch, Route, Redirect } from 'react-ro
 function App() {
   return (
     <Router>
-      <header>
-        <Link to="/">
-          <button>Calculus</button>
-        </Link>
-      </header>
-      <hr />
-      <div>
+      <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} />
 

src/compare.js

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