.

src/AdminSetting.js

@@ -47,20 +47,19 @@ function AdminSetting() {
 
     }
     return (
-        <div className="col-8">
-            <h2 className="p-3 border text-center">관리자 설정 변경 창</h2>
-            
-            <div className="p-3 border">
+        <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">
+            <div className="p-3 border bg-white">
                 <h4>변경할 관리자 비밀번호를 입력하세요</h4>
                 <input type="text" onChange={handleChangeAdminPassword} placeholder="New Admin Password" />
 
             </div>
-            <div className="p-3 border">
+            <div className="p-3 border bg-white">
                 <h4>타이머를 설정하세요(초단위)</h4>
                 <input type="text" onChange={handleChangeTime} placeholder="Set Time" />
 

src/compare.js

-import React, { useState, useEffect, useRef } from 'react';
-import AdminQuiz from './AdminQuiz'
-import AdminSetting from './AdminSetting'
+import React,{ useState } from 'react'
 
-let QuizBtn = []
 
-function Admin() {
+let Setadmins = []
+let Setadmin = {}
 
-    const [result, setresult] = useState('')
-    const [QuizBtnCount, setQuizBtnCount] = useState(4)
-    const indexRef = useRef(0)
-    const dbRef = useRef([])
+function AdminSetting() {
 
-    useEffect(() => {
-        if (JSON.parse(localStorage.getItem('QnA'))) {
-            dbRef.current=JSON.parse(localStorage.getItem('QnA'))
-        }
-    }, [])
-    function handleClickSetting() {
-        setresult(<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 handleClickQuiz(e) {
-        indexRef.current = Number(e.target.id) - 1
-        // console.log(dbRef.current, indexRef.current)
 
-        if(dbRef.current[e.target.id-1]){
-            setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />)
+    function handleClick() {
+        if (!password) {
+            alert('비밀번호가 입력되지 않았습니다.')
         }
-        else{
-            dbRef.current[e.target.id-1] = {'Q':'x', 'Choose':[0,0,0,0], 'A':'x'}
-            setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />)
+        else if (!adminpassword) {
+            alert('관리자 비밀번호가 입력되지 않았습니다.')
         }
-    }
-
-    function handleClickAddQuiz() {
-        QuizBtn.push(
-            <button type='button' className='btn btn-outline-primary' id={QuizBtnCount} onClick={handleClickQuiz}>Quiz {QuizBtnCount}</button>
-        )
-        setQuizBtnCount(QuizBtnCount + 1)
-    }
+        else if (!time) {
+            alert('제한시간이 입력되지 않았습니다.') //타임은 조건은 빼도 될 듯
+        }
+        else {
+            Setadmins.push(Setadmin)
+            localStorage.setItem('Set', JSON.stringify(Setadmins))
+            console.log(Setadmins)
+            alert('저장이 완료되었습니다.')
+            console.log(Setadmin)
 
-    function handleClickSave(QnAadmin) {
-        console.log(QnAadmin, indexRef.current)
-        dbRef.current[indexRef.current] = QnAadmin
-        localStorage.setItem('QnA', JSON.stringify(dbRef.current))
+        }
 
     }
     return (
-        <>
-            <div className="container-fluid bg-light">
-                <div className="row justify-content-md-center mt-5">
-                    <div className="col-2 text-center border py-5 bg-white">
-                        <div className="py-3 border-top border-bottom">
-                            <h5 className="font-weight-bold">설정</h5>
-                        </div>
-                        <div className="border-bottom py-4">
-                            <button type="button" className="btn btn-info" onClick={handleClickSetting}>Setting</button>
-                        </div>
-                        <div className="btn-group-vertical py-4">
-                            <button type="button" className="btn btn-outline-primary" id={1} onClick={handleClickQuiz}>Quiz 1</button>
-                            <button type="button" className="btn btn-outline-primary" id={2} onClick={handleClickQuiz}>Quiz 2</button>
-                            <button type="button" className="btn btn-outline-primary" id={3} onClick={handleClickQuiz}>Quiz 3</button>
-                            {QuizBtn.map((element) => element)}
-                            <button type="button" className="btn btn-outline-primary" onClick={handleClickAddQuiz}>+</button>
-
-                        </div>
-                    </div>
+        <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 className="col-8 ">
-                        {result}
-                    </div>
-                </div>
             </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 Admin
\ No newline at end of file
+
+export default AdminSetting
\ No newline at end of file