home 수정

src/Home.js

-import React from 'react'
-import { Link } from 'react-router-dom';
 import bg from './img_study.jpg'
+import React, { useState } from 'react'
+import { Redirect } from 'react-router-dom';
 
 
 function Home() {
+    const [name, setName] = useState('')
+    const [done, setDone] = useState(false)
+
+    const handleChange = (event) => {
+        setName(event.target.value)
+    }
+
+    function checking(event) {
+        if (!name) {
+            alert('이름을 입력하세요')
+        }
+        else {
+            alert('입력하신 이름은' + name + '입니다.')
+            localStorage.setItem('name', name)
+            setDone(true)
+        }
+    }
+
     return (
         <>
-            <div style={{ backgroundImage: 'url(' + bg + ')', backgroundColor: "grey", backgroundSize: "100%", width: "100%", height: "880px", backgroundRepeat:'no-repeat' }}>
+            {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%"}}>
+                    <div className="Name" style={{ fontSize: '30px', position: "absolute", top: "330px", left: "38%" }}>
                         이름을 입력하세요
-                        <input style={{ marginLeft: '30px', inlineSize: '200px', blockSize: '40px', fontSize: '40px' }} onChange={(event) => localStorage.setItem('name', event.target.value)} />
+                        <input style={{ marginLeft: '30px', inlineSize: '200px', blockSize: '40px', fontSize: '40px' }} onChange={handleChange} />
                         <div className='Box2'>
-                            <Link to="/quiz">
-                                <button style={{marginTop:'35%',blockSize:'100px', inlineSize:'200px', fontSize:'35px' }} className="QuizStart" onClick={checking}>Quiz Start !</button>
-                            </Link>
+                            <button style={{ marginTop: '35%', blockSize: '100px', inlineSize: '200px', fontSize: '35px' }} className="QuizStart" onClick={checking}>Quiz Start !</button>
                         </div>
                     </div>
                     {/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
@@ -30,15 +47,6 @@ function Home() {
 
     )
 }
-function checking() {
-
-    if (localStorage.getItem('name') === null || localStorage.getItem('name').length === 0) {
-        alert('이름을 입력하세요')
-
-    }
-    else {
-        alert('입력하신 이름은' + localStorage.getItem('name') + '입니다.')
-    }
-}
 
 export default Home;
+