Home.js

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


function Home() {
    return (
        <>
    
            <div style={{ backgroundImage: 'url(' + bg + ')', width:'100%', height:'900%' ,backgroundSize: "100%", backgroundRepeat: 'no-repeat' }}>
                <div style={{ boxAlign: 'center' }} className="Main"></div>

                <div className="Box">
                    <div className="Name" style={{ padding: '10px', fontSize: '40px' }}>
                        이름을 입력하세요
                    <input style={{ marginLeft: '30px', inlineSize: '200px', blockSize: '40px', fontSize: '40px' }} 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;