Admin.js

import React, { useState } from 'react';

// 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 [password, setPassword] = useState('')
    const [adminpassword, setAdminPassword] = useState('')
    const [time, setTime] = useState('')
    const [addQuiz, setaddQuiz ] = 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)
    }
    const handleChangePassword = (event) => {
        setPassword(event.target.value)
    }
    const handleChangeAdminPassword = (event) => {
        setAdminPassword(event.target.value)
    }
    const handleChangeTime = (event) => {
        setTime(event.target.value)
    }


    function handleClick() {

        alert('입력이 완료되었습니다')
        localStorage.setItem('N', number)
        localStorage.setItem('Q', question)
        localStorage.setItem('Choose', choose)
        localStorage.setItem('Answer', answer)
        localStorage.setItem('P', password)
        localStorage.setItem('AP', adminpassword)
        localStorage.setItem('T', time * 1000)

        setDone(true)


    }
    function handleClickQuiz() {
        let addQuiz =function(){
        return <a className="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Quiz4</a>
        }
        setaddQuiz(addQuiz)
    }

    return (
        <>
            {done ? alert('모두 입력되었습니다.') : ''}
            <div className="row">
                <div className="col-3">
                    <div className="container-fluid ">
                        <div className="navbar-header p-3">
                            <a className="navbar-brand" href="/admin">관리자 페이지</a>
                        </div>
                        <div className="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <li className="dropdown p-4 mb-3">
                                <a className="dropdown-toggle" data-toggle="dropdown" href="-pills-profile-tab">관리자 설정 변경하기
                                <span className="caret"></span></a>
                                <ul className="dropdown-menu">
                                    <a className="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Setting</a>
                                </ul>
                            </li>
                            <li className="dropdown p-4">
                                <a className="dropdown-toggle" data-toggle="dropdown" href="-pills-profile-tab">Quiz 입력하기
                                <span className="caret"></span></a>
                                <ul className="dropdown-menu">
                                    <a className="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Quiz1</a>
                                    <a className="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Quiz2</a>
                                    <a className="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Quiz3</a>
                                    {addQuiz}
                                    <button class="btn btn-danger navbar-btn" onClick={handleClickQuiz} >Quiz 추가</button>
                                    
                                </ul>
                            </li>

                        </div>
                    </div>
                </div>
                <div className="col-9">
                    <div className="tab-content" id="v-pills-tabContent">
                        <div className="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                            <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={handleChangePassword} placeholder="New Password" />

                                            </div>
                                            <div className="p-3 border">
                                                <h2>변경할 관리자 비밀번호를 입력하세요</h2>
                                                <input type="text" onChange={handleChangeAdminPassword} placeholder="New Admin Password" />

                                            </div>
                                            <div className="p-3 border">
                                                <h2>타이머를 설정하세요(초단위)</h2>
                                                <input type="text" onChange={handleChangeTime} placeholder="Set Time" />

                                            </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>

                        </div>
                        <div className="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">

                            <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="Nunber" />

                                        </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>
                        <div className="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">

                            <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="Nunber" />

                                        </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>
                        <div className="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                            <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="Nunber" />

                                        </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>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Admin