Admin.js

import React, { useState } from 'react';
import { Container, Nav } from 'react-bootstrap';
// import { Link } from 'react-router-dom';

function Admin() {


    // let QnAadmin = []
    // let Q = []
    // let choose = []
    // let N = []

    const [number, setNumber] = useState('')
    const [question, setQuestion] = useState('')
    const [choose, setChoose] = useState('')
    const [answer, setAnswer] = useState('')
    const [done, setDone] = useState(false)

    const handleChangenumber = (event) => {
        setNumber(event.target.value)
    }
    const handleChangequestion = (event) => {
        setQuestion(event.target.value)
    }
    const handleChangechoose = (event) => {
        setChoose(event.target.value)
    }
    const handleChangeanswer = (event) => {
        setAnswer(event.target.value)
    }

    function handleClick() {

        alert('입력이 완료되었습니다')
        localStorage.setItem('N', number)
        localStorage.setItem('Q', question)
        localStorage.setItem('Choose', choose)
        localStorage.setItem('Answer', answer)
        setDone(true)


    }

    return (
        <>
            {done ? alert('모두 입력되었습니다.') : ''}

            <Nav 
                activeKey="/home"
            >
                <Nav.Item>
                    <Nav.Link href="/AdminSetting">Setting</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="link-1">Link</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="link-2">Link</Nav.Link>
                </Nav.Item>
            </Nav>

            <div>
                <div className="container">
                    <div className="row d-flex justify-content-center">
                        <div className="col-8">

                            <h1 className="p-3 border">관리자 문제제출 창</h1>
                            <div className="p-3 border">
                                <h2>문제번호를 입력하세요</h2>
                                <input type="text" onChange={handleChangenumber} placeholder="Number" />

                            </div>
                            <div className="p-3 border">
                                <h2>문제를 입력하세요</h2>
                                <input type="text" onChange={handleChangequestion} placeholder="Question" />

                            </div>
                            <div className="p-3 border">
                                <h2>보기를 입력하세요(배열형태)</h2>
                                <input type="text" onChange={handleChangechoose} placeholder="Choose" />

                            </div>
                            <div className="p-3 border">
                                <h2>답을 입력하세요</h2>
                                <input type="text" onChange={handleChangeanswer} placeholder="Answer" />

                            </div>

                            <label for="inputLogin" className="d-flex justify-content-center">
                                <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
                            </label>

                        </div>
                    </div>
                </div>
                {/* <div className="p-3 border">
                    <h2>패스워드를 입력하세요</h2>
                    <input type="text" onChange={handleChangeanswer} placeholder="Answer" />

                </div> */}
            </div>
        </>
    )
}

export default Admin