end

package-lock.json

@@ -3651,6 +3651,8 @@
     },
     "@testing-library/jest-dom": {
       "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz",
+      "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==",
       "requires": {
         "@babel/runtime": "^7.5.1",
         "chalk": "^2.4.1",
@@ -3675,6 +3677,8 @@
     },
     "@testing-library/react": {
       "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz",
+      "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==",
       "requires": {
         "@babel/runtime": "^7.8.4",
         "@testing-library/dom": "^6.15.0",
@@ -3682,7 +3686,9 @@
       }
     },
     "@testing-library/user-event": {
-      "version": "7.2.1"
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
+      "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
     },
     "@types/babel__core": {
       "version": "7.1.9",
@@ -5085,6 +5091,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.1.tgz",
+      "integrity": "sha512-bxUooHBSbvefnIZfjD0LE8nfdPKrtiFy2sgrxQwUZ0UpFzpjVbVMUxaGIoo9XWT4B2LG1HX6UQg0UMOakT0prQ=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -12298,6 +12309,8 @@
     },
     "react": {
       "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -12509,6 +12522,8 @@
     },
     "react-dom": {
       "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
+      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -12545,6 +12560,8 @@
     },
     "react-router-dom": {
       "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
       "requires": {
         "@babel/runtime": "^7.1.2",
         "history": "^4.9.0",
@@ -12567,6 +12584,8 @@
     },
     "react-scripts": {
       "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
+      "integrity": "sha512-JpTdi/0Sfd31mZA6Ukx+lq5j1JoKItX7qqEK4OiACjVQletM1P38g49d9/D0yTxp9FrSF+xpJFStkGgKEIRjlQ==",
       "requires": {
         "@babel/core": "7.9.0",
         "@svgr/webpack": "4.3.3",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "bootstrap": "^4.5.1",
     "react": "^16.13.1",
     "react-compound-timer": "^1.2.0",
     "react-dom": "^16.13.1",

src/End.js

@@ -9,7 +9,7 @@ function End() {
     let score = 0
     const answers = JSON.parse(localStorage.getItem('Answers'))
     const solutions = JSON.parse(localStorage.getItem('Solutions'))
-    for (let i = 0; i < answers.length ; i++) {
+    for (let i = 0; i < answers.length; i++) {
 
         if (answers[i] === solutions[i]) {
 
@@ -25,35 +25,34 @@ function End() {
 
     return (
         <>
-            <div className="card" style={{ fontSize: '30px', textAlign: "center" }} >
-                <div className='card-header'>
-                    -채점표-
-                <div className='card-body'>
-                        <h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>
-
+            <div className="container">
+                <h2>채점표</h2>
+                <table className="table table-bordered" >
+                    <thead>
+                        <tr>
+                            <th>응시자</th>
+                            <th>{localStorage.getItem('name')}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
                         {scores.map((score, index) => {
 
-                        return (score===1) ? <p className='card-text'>Quiz {index+1} : 'O' </p>  : <p className='card-text'>Quiz {index+1} : 'X' </p>
-                                // if (score === 1) {
-                                //     return <p className='card-text'>Quiz {index+1} : 'O' </p>
-                                // }
-                                // else { return <p className='card-text'>Quiz {index+1} : 'X' </p> }
+                            return (score === 1) ? <tr><td>Quiz {index + 1}</td> <td> O </td></tr> : <tr><td>Quiz {index + 1}</td> <td> X</td></tr>
+                        })}
+                        <tr>
+                            <td>총점</td>
+                            <td>{score}점</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
 
 
             
-                        })}
-                        <p className='card-text'>Total Score : {score}</p>
-                    </div>
-                    <div style={{ marginTop: '100px' }} className="Box text-center">
-                        <img src={tr} alt="수고" />
 
-                    </div>
-                </div>
-            </div>
         </>
 
     )
 }
 
 export default End;
-

src/Home.js

@@ -46,8 +46,28 @@ function Home() {
                 KOREA UNIVERSITY
             </div>
 
+            <div className="d-flex justify-content-center ">
+
+                <table className="table table-bordered dark-table" style={{ width: "400px" }}>
+                    <thead className="text-center">
+                        <tr style={{ height: "0 px" }}>정보 입력</tr>
+                    </thead>
+                    <tbody className="text-center">
+                        <tr>
+                            <td>이름 입력<input className="ml-2 inputBox" onChange={handleChangename} /></td>
+                        </tr>
+                        <tr>
+                            <td>비밀번호<input type='password' className="ml-2 inputBox" onChange={handleChangepassword} /></td>
+                        </tr>
+                        <tr>
+                            <td><button className="mt-4 btn btn-dark" onClick={checking}>Login</button></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </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%" }}>
+            {/* <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>
@@ -57,7 +77,7 @@ function Home() {
                 </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> */}
 
             {/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
             {/* </div> */}

src/index.js

@@ -4,6 +4,7 @@ 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>