Admin.js

import React, { useState } from 'react';
import AdminQuiz from './AdminQuiz'
import AdminSetting from './AdminSetting'


let QnAadmins = []
let QnAadmin = {}

let Setadmins = []
let Setadmin = {}

function Admin() {

    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 [selectOption, setselectOption] = useState('')


    const handleChangeQuestion = (event) => {
       
        QnAadmin['Q'] = event.target.value

        setQuestion(event.target.value)
        
    }
    const handleChangechoose = (event) => {
      
        QnAadmin['Choose'] = event.target.value

        setChoose(event.target.value)


    }
    const handleChangeanswer = (event) => {
        
        QnAadmin['A'] = event.target.value
      
        setAnswer(event.target.value)

  

    }
    const handleChangePassword = (event) => {
        Setadmin['password'] = event.target.value
        setPassword(event.target.value)

    }
    const handleChangeAdminPassword = (event) => {
        Setadmin['AdminPassword'] = event.target.value
        setAdminPassword(event.target.value)
    }
    const handleChangeTime = (event) => {
        Setadmin['Time'] = event.target.value
        setTime(event.target.value)
    }


    function handleClickQnA() {
        if (!question) {
            alert('문제가 입력되지 않았습니다.')
        }
        else if (!choose) {
            alert('보기가 입력되지 않았습니다.')
        }
        else if (!answer) {
            alert('정답이 입력되지 않았습니다.')
        }
        else {
            console.log(QnAadmin)
            QnAadmins.push(QnAadmin)
            localStorage.setItem('QnA', JSON.stringify(QnAadmins))
            console.log(QnAadmins)
            alert('입력이 완료되었습니다.')
        }

    }
    function handleClicksetting() {
        if (!password) {
            alert('비밀번호가 입력되지 않았습니다.')
        }
        else if (!adminpassword) {
            alert('관리자 비밀번호가 입력되지 않았습니다.')
        }
        else if (!time) {
            alert('제한시간이 입력되지 않았습니다.') //타임은 조건은 빼도 될 듯
        }
        else {
            Setadmins.push(Setadmin)
            localStorage.setItem('Set', JSON.stringify(Setadmins))
            console.log(Setadmins)
            alert('저장이 완료되었습니다.')
            console.log(Setadmin)

            // setDoneset(true)
        }

    }
    function addSelectOption() {
        let list = function () {
            return <div className="input-group">
                <div className="input-group-prepend">
                    <div className="input-group-text">
                        <input type="radio" id="option" />
                    </div>
                </div>
                <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
            </div>
        }
        setselectOption(list)
    }
    function handleClickQuiz() {
        let addQuiz = function () {
            return <a className="nav-link" id="Quiz4-tab" data-toggle="pill" href="#Quiz" role="tab" >Quiz4</a>
        }   
        setaddQuiz(addQuiz)
    }

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

            <div className="row justify-content-md-center mt-5 ">
                <div className="col-2 text-center border">
                    <div className="container-fluid ">
                        <div className="navbar-header p-3 ">
                            <p className="navbar-brand border-bottom ">관리자 페이지</p>
                        </div>
                        <div className="nav flex-column nav-pills" id="v-pills-tab" role="tablist">

                            <p className="navbar-text border-bottom">관리자 설정 변경하기</p>

                            <a className="nav-link" id="setting-tab" data-toggle='pill' href="#setting">Setting</a>


                            <p className="navbar-text border-bottom">Quiz 입력하기</p> {/*Quiz1 버튼에 무언갈 쓰고 Quiz2를 누르면 초기화되도록하기*/}

                            <a className="nav-link" id="Quiz-tab" data-toggle="pill" href="#Quiz" >Quiz1</a>
                            <a className="nav-link" id="Quiz-tab" data-toggle="pill" href="#Quiz" >Quiz2</a>
                            <a className="nav-link" id="Quiz-tab" data-toggle="pill" href="#Quiz" >Quiz3</a>
                            {addQuiz}
                            <button className="btn btn-danger navbar-btn" onClick={handleClickQuiz} >Quiz 추가</button>


                        </div>
                    </div>
                </div>
                <div className="col-8">
                    <div className="tab-content" id="v-pills-tabContent">
                        <div className="tab-pane fade show active" id="setting" role="tabpanel" >
                            <div>
                                <div className="container">
                                    <div className="row d-flex justify-content-center">
                                        <div className="col-8">

                                            <h2 className="p-3 border text-center bg-danger">관리자 설정변경</h2>
                                            <div className="p-3 border">
                                                <h3>변경할 비밀번호를 입력하세요</h3>
                                                <input className='p-2' type="text" onChange={handleChangePassword} placeholder="New Password" />

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

                                            </div>
                                            <div className="p-3 border">
                                                <h3>타이머를 설정하세요(초단위)</h3>
                                                <input className='p-2' 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={handleClicksetting}>작성완료</button>
                                            </label>

                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                        <div className="tab-pane fade" id="Quiz" role="tabpanel">
                            <div className="container">
                                <div className="row d-flex justify-content-center">
                                    <div className="col-8">

                                        <h2 className="p-3 border text-center bg-danger">문제만들기</h2>

                                        <div className="p-3 borber">
                                            <div className="p-3 ">
                                                <span className="font-weight-bold mr-2 h3">1.</span>
                                                {/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */}
                                                <input className='p-2' type="text" onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />

                                            </div>

                                            <div className="p-3 ">
                                                <div className="input-group">
                                                    <div className="input-group-prepend">
                                                        <div className="input-group-text p-3">
                                                            <input type="radio" id="option" />
                                                        </div>
                                                    </div>
                                                    <input type="text" className="form-control p-4" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
                                                </div>
                                                {selectOption}

                                                <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>

                                            </div>

                                            <div className="p-3 ">
                                                <span className="font-weight-bold mr-2 h3">정답:</span>
                                                <input className='p-2' type="text" onChange={handleChangeanswer} placeholder="정답을 입력하세요" />
                                            </div>

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

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </>
    )
}

export default Admin