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


function Home() {
    return (
        <>
            <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={(event) => localStorage.setItem('name', event.target.value)} />
                        <div className='Box2'>
                            <Link to="/quiz">
                                <button style={{marginTop:'35%',blockSize:'100px', inlineSize:'200px', fontSize:'35px' }} className="QuizStart" onClick={checking}>Quiz Start !</button>
                            </Link>
                        </div>
                    </div>
                    {/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
                </div>

                <div>계산수학</div>


            </div>
        </>

    )
}
function checking() {

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

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

export default Home;