merge직전

src/Home.js

-import bg from './img_study.jpg'
+// import bg from './img_study.jpg'
+// import korea from './img_korea.jpg'
 import React, { useState } from 'react'
 import { Redirect } from 'react-router-dom';
 
 
 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() {
         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 style={{ backgroundImage: 'url(' + bg + ')', backgroundColor: "grey", backgroundSize: "100%", width: "100%", height: "880px", backgroundRepeat: 'no-repeat' }}>
-                {/* <div className="Main"></div> */}
-
-                <div className="Box">
-                    <div className="Name" style={{ fontSize: '30px', position: "absolute", top: "330px", left: "38%" }}>
-                        이름을 입력하세요
-                        <input style={{ marginLeft: '30px', inlineSize: '200px', blockSize: '40px', fontSize: '40px' }} onChange={handleChange} />
-                        <div className='Box2'>
-                            <button style={{ marginTop: '35%', blockSize: '100px', inlineSize: '200px', fontSize: '35px' }} 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>
 
+                {/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
+            {/* </div> */}
 
-            </div>
+
+            {/* </div> */}
         </>
 
     )

src/Quiz.js

@@ -36,7 +36,7 @@ function Quiz() {
     }
     return (
         <>
-            <div style={{ fontSize: '80px', marginBottom: '100px', textAlign: "center", backgroundColor: 'yellow' }}>미적분학 퀴즈</div>
+            <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} style={{ marginLeft: "450px" }} width='75' height='75' alt='question' /> <span style={{ fontSize: "75px", marginLeft: "30px" }}>{question.Q}</span></h1>