compare.js

import React,{ useState } from 'react'


let Setadmins = []
let Setadmin = {}

function AdminSetting() {

    const [password, setPassword] = useState('')
    const [adminpassword, setAdminPassword] = useState('')
    const [time, setTime] = useState('')
    
    
    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 handleClick() {
        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)

        }

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

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

            </div>
            <div className="p-3 border bg-white">
                <h4>타이머를 설정하세요(초단위)</h4>
                <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>
    )
}


export default AdminSetting