AdminSetting.js

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

function AdminSetting() {


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

    const [password, setPassword] = useState('')
    const [adminpassword, setAdminPassword] = useState('')
    const [time, setTime] = useState('')
    const [done, setDone] = useState(false)

    const handleChangePassword = (event) => {
        setPassword(event.target.value)
    }
    const handleChangeAdminPassword = (event) => {
        setAdminPassword(event.target.value)
    }
    const handleChangeTime = (event) => {
        setTime(event.target.value)
    }

    function handleClick() {
        if (!password) {
            alert('비밀번호를 입력하세요')
        }
        else if (!adminpassword) {
            alert('관리자 비밀번호를 입력하세요')
        }
        else if (!time) {
            alert('타이머를 설정해주세요')
        }
        else {
            alert('입력이 완료되었습니다')
            localStorage.setItem('P', password)
            localStorage.setItem('AP', adminpassword)
            localStorage.setItem('T', time*1000)
            setDone(true)
        }
    }

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


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

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

    export default AdminSetting