수정2

src/App.js

@@ -11,7 +11,7 @@ function App() {
     <Router>
       <header>
         <Link to="/">
-          <button>Home</button>
+          <button>Calculus</button>
         </Link>
       </header>
       <hr/>

src/End.js

@@ -2,7 +2,7 @@ import React from 'react'
 // import tr from './End-Image01.jpg';
 // import './End.css'
 import  'bootstrap'
-
+import 'bootstrap/dist/css/bootstrap.css';
 // import { Link } from 'react-router-dom';
 
 function End() {
@@ -29,7 +29,7 @@ function End() {
         <>
 
             <div className="container">
-                <h2>채점표</h2>
+                <h2 style={{ fontSize: '40px', textAlign: 'center'}}>채점표</h2>
                 <table className="table table-bordered" >
                     <thead>
                         <tr>

src/Home.js

+// import bg from './img_study.jpg'
+// import korea from './img_korea.jpg'
 import React, { useState } from 'react'
 import { Redirect } from 'react-router-dom';
-import './Home.css'
 
 
 function Home() {
     const [name, setName] = useState('')
+    const [password, SetPassword] = useState('')
     const [done, setDone] = useState(false)
 
-    const handleChange = (event) => {
+    const handleChangename = (event) => {
         setName(event.target.value)
     }
+    const handleChangepassword = (event) => {
+        SetPassword(event.target.value)
+    }
 
-    function checking(event) {
+    function checking() {
         if (!name) {
             alert('이름을 입력하세요')
         }
+        else if (!password) {
+            alert('비밀번호를 입력하세요')
+        }
+        else if (password !== '0319') {
+            alert('유효한 비밀번호를 입력하세요')
+        }
         else {
-            alert('입력하신 이름은' + name + '입니다.')
+            alert('입력하신 이름은 ' + name + '입니다.')
             localStorage.setItem('name', name)
+            localStorage.setItem('password', password)
             setDone(true)
         }
+
     }
 
     return (
         <>
+
             {done ? <Redirect to='/quiz' /> : ''}
-            <div className="Main">
-            {/* <div className="Main"></div> */}
-
-                <div className="Box">
-                    <div className="Name">
-                        이름을 입력하세요
-                        <input className="inputBox" onChange={handleChange} />
-                        <div className='Box2'>
-                            <button className="QuizStart" onClick={checking}>Quiz Start !</button>
-                        </div>
-                    </div>
-                    {/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
+            {/* <div style={{ backgroundImage: 'url(' + bg + ')', backgroundColor: "grey", backgroundSize: "100%", width: "100%", height: "880px", backgroundRepeat: 'no-repeat' }}>
+                <div className="Main"></div> */}
+            <div style={{ fontSize: '70px', marginBottom: '100px', textAlign: 'center', backgroundColor: '#AE0E36' }}>
+                {/* <img alt='korea' src={korea} width='10%'/> */}
+                KOREA UNIVERSITY
+            </div>
+
+            {/* <div className="Box" style={{ border: 'solid', position: 'absolute', top: "300px", left: "68%"}} > */}
+                <div className="Name" style={{boxShadow: '5px 5px 5px 5px gray', border: 'solid', fontSize: '30px', position: "absolute", top: "300px", left: "68%" }}>
+                    이름(Name)
+                        <input style={{ padding: '5px', border: 'solid', borderRight: 'none', borderBottom: 'none', borderTop: 'none', marginLeft: '105px', inlineSize: '160px', blockSize: '40px', fontSize: '40px' }} onChange={handleChangename} />
+                </div>
+                <div className="Name" style={{ boxShadow: '5px 5px 5px 5px gray',border: 'solid', fontSize: '30px', position: "absolute", top: "360px", left: "68%" }}>
+                    비밀번호(Password)
+                        <input type='password' style={{ padding: '5px', border: 'solid', borderRight: 'none', borderBottom: 'none', borderTop: 'none', marginLeft: '0px', inlineSize: '160px', blockSize: '40px', fontSize: '40px' }} onChange={handleChangepassword} />
+                </div>
+                <div className='Box2'>
+                    <button style={{boxShadow: '5px 5px 5px 5px gray', marginLeft: '82%', marginTop: '10%', blockSize: '50px', inlineSize: '175px', fontSize: '35px' }} className="QuizStart" onClick={checking}>Start !</button>
                 </div>
 
-                <div>계산수학</div>
+                {/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
+            {/* </div> */}
 
 
-            </div>
+            {/* </div> */}
         </>
 
     )

src/Quiz.css

@@ -19,33 +19,6 @@
 
 }
 
-.Quiz-Main {
-    font-size: '80px';
-    margin-bottom: '100px'; 
-    text-align: "center"; 
-    background-color: 'yellow';
-}
-
-.Quiz-figth {
-        position: "absolute"; 
-        left: "1050px"; 
-        top: '200px';
-}
-
-.Quiz-logo {
-    margin-left: "450px";
-}
-
-.Quiz-answer {
-    font-size: "75px";
-    margin-left: "30px";
-}
-
-.answer {
-    margin-left: "475px"; 
-    width: "25px";
-    height: "25px";
-}
 /* .Name {} */
 
 .Box {

src/Quiz.js

@@ -10,7 +10,9 @@ const QnA = [
     { Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "2", N: 3 }
 ]
 
-
+let Answers = []
+let Solutions = [4, 3, 2]
+localStorage.setItem('Solutions', JSON.stringify(Solutions))
 
 function Quiz() {
     let [question, setQuestion] = useState({
@@ -28,35 +30,34 @@ function Quiz() {
         ev.preventDefault()  //새로고침 안되도록
         setSelected(ev.target.value)  //selected값 변경
 
-        let checked_number = ev.target.id;
+        Answers[question.N - 1] = Number(ev.target.id) + 1
 
-                localStorage.setItem('답'+(question.N), Number(checked_number)+1)
-                localStorage.setItem('정답' + (question.N), QnA[question.N-1].A)
-                
+        localStorage.setItem('Answers', JSON.stringify(Answers))
     }
     return (
         <>
-            <div className="Quiz-Main">미적분학 퀴즈</div>
-            <img src={fight} className="Quiz-fitgh" alt="lion" />
+            <div style={{ fontSize: '80px', marginBottom: '100px', textAlign: "center", backgroundColor: 'red' }}>미적분학 퀴즈</div>
+            <img src={fight} style={{ position: "absolute", left: "1050px", top: '200px' }} alt="lion" />
             <div className="Quiz" >
-                <h1><img src={logo} className="Quiz-logo" width='75' height='75' alt='question' /> <span className="Quiz-answer">{question.Q}</span></h1>
+                <h1><img src={logo} style={{ marginLeft: "450px" }} width='75' height='75' alt='question' /> <span style={{ fontSize: "75px", marginLeft: "30px" }}>{question.Q}</span></h1>
                 {/* <div style={{ marginTop: "30px", marginBottom: "30px", marginLeft:'450px', fontSize:'40px' }}>정답을 선택하세요</div> */}
 
                 <div>
                     <form>
                         {question.Choose.map((a, index) =>
                             <div key={index}>
-                                <input type="radio" className='answer' id={index} value={a} onClick={handleChange}/>
+                                <input type="radio" name='answer' id={index} value={a} onClick={handleChange} style={{ marginLeft: "475px", width: "25px", height: "25px" }} />
                                 <label htmlFor={a} style={{ fontSize: "40px", marginLeft: "22px" }}>{a}</label>
                             </div>
                         )}
                         <input hidden type="submit" value="확인" />    {/*버튼 숨김*/}
                     </form>
-                    <p style={{ fontSize: "40px", marginLeft: "480px" }}>Answer :<span style={{ color: "green", fontWeight: "bold", fontSize: "90px", marginLeft: "30px" }}> {selected}</span>  {/* 선택한 값 보여줌 */}<span style={{ marginLeft: "50px" }}>            {(question.page === QnA.length - 1)
-                        ? <Link to="/end">제출</Link>
-                        : <button type="button" onClick={handleQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
+                    <p style={{ fontSize: "40px", marginLeft: "480px" }}>Answer :<span style={{ color: "green", fontWeight: "bold", fontSize: "90px", marginLeft: "30px" }}> {selected}</span>  {/* 선택한 값 보여줌 */}<span style={{ marginLeft: "50px" }}>
+                        {(question.page === QnA.length - 1)
+                            ? <Link to="/end">제출</Link>
+                            : <button type="button" onClick={handleQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
 
-                    }</span>
+                        }</span>
                     </p>
                 </div>
 

src/index.js

@@ -4,7 +4,6 @@ import './index.css';
 import App from './App';
 // import Quiz from './Quiz';
 import * as serviceWorker from './serviceWorker';
-import 'bootstrap/dist/css/bootstrap.css';
 
 ReactDOM.render(
   <React.StrictMode>