import React from 'react'
import { Link } from 'react-router-dom';
import bg from './background_ex1.jpg'


function Home() {
    return (
        <>
            <div style={{backgroundImage:'url(' + bg + ')', backgroundColor : "grey" ,backgroundSize: "100%"}}>
                <div className="Main"></div>

                <div className="Box">
                    <div className="Name" style ={{color : "white", fontSize :'30px'}}>
                        이름을 입력하세요   
            <input style={{blockSize:'40px', marginLeft:'30px'}} onChange={(event) => sessionStorage.setItem('name', event.target.value)} />
                    </div>

                    {/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
                </div>

                <div className='Box2'>
                    <Link to="/quiz">
                        <button className="QuizStart" onClick={checking}>Quiz Start !</button>
                    </Link>
                </div>
            </div>
        </>

    )
}
function checking(event) {

    if (sessionStorage.getItem('name') === null || sessionStorage.getItem('name').length === 0) {
        alert('이름을 입력하세요')

    }
    else {
        alert('입력하신 이름은' + sessionStorage.getItem('name') + '입니다.')
    }
}

export default Home;