미완성

src/Admin.js

 import React, { useState } from 'react';
-import Quiz from './Quiz';
+import AdminQuiz from './AdminQuiz';
+import AdminSetting from './AdminSetting'
 // import { Link } from 'react-router-dom';
 
 
-let list = []
+
 let QuizBtn = []
 
 function Admin() {
@@ -14,83 +15,31 @@ function Admin() {
     // let choose = []
     // let N = []
 
-
-    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(1)
+    const [result, setresult] = useState('')
+    // const [addQuiz, setaddQuiz] = useState('')
     const [QuizBtnCount, setQuizBtnCount] = useState(4)
 
 
 
-    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 handleClickSetting(){
 
+    function handleClickSetting() {
+        setresult(<AdminSetting />)
     }
 
-    function handleClick() {
-
-        alert('입력이 완료되었습니다')
-        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)
-
-    }
-
-
-    function addSelectOption() {
-        list.push(
-            <div className="input-group">
-                <div className="input-group-prepend">
-                    <div className="input-group-text">
-                        <input type="radio" id={selectOption + 1} name="answer" />
-                    </div>
-                </div>
-                <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
-            </div>
-        )
-        setselectOption(selectOption + 1)
-    }
-
-    function handleClickQuiz() {
-        let addQuiz = function () {
-            return <a className="nav-link" id="Quiz4-tab" data-toggle="pill" href="#Quiz4" role="tab" >Quiz4</a>
-        }
-        setaddQuiz(addQuiz)
+    function handleClickQuiz(){
+        setresult(<AdminQuiz/>)
     }
 
     function handleClickAddQuiz() {
         QuizBtn.push(
             <button type="button" className="btn btn-outline-primary" id={QuizBtnCount} onClick={handleClickQuiz}>Quiz {QuizBtnCount}</button>
         )
-        setQuizBtnCount(QuizBtnCount+1)
+        setQuizBtnCount(QuizBtnCount + 1)
     }
 
+
+
     return (
         <>
             <div className="container-fluid">
@@ -113,65 +62,16 @@ function Admin() {
                     </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 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="" id="Quiz1">
-                                <h2 className="p-3 border text-center">문제만들기</h2>
-                                <div className="p-3 borber">
-                                    <div className="p-3 ">
-                                        <span className="font-weight-bold mr-2 h3">1.</span>
-                                        <input type="text" className="form-control" onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
-                                    </div>
-                                    <div className="p-3 ">
-                                        <div className="input-group">
-                                            <div className="input-group-prepend">
-                                                <div className="input-group-text">
-                                                    <input type="radio" id={selectOption} name="answer" />
-                                                </div>
                                 </div>
-                                            <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
-                                        </div>
-                                        {list.map((element) => element)}
-                                        <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 type="text" onChange={handleChangeanswer} placeholder="정답을 입력하세요" />
                             </div>
+                            {result}
 
-                                    <label for="inputLogin" className="d-flex justify-content-center">
-                                        <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
-                                    </label>
-                                </div>
-                            </div>
+                            {/* <AdminSetting/>
+                            <AdminQuiz/> */}
                         </div>
                     </div>
                 </div>

src/AdminQuiz.js

+import React, { useState } from 'react';
+
+let list = []
+
+function AdminQuiz() {
+
+    const [question, setQuestion] = useState('')
+    const [choose, setChoose] = useState('')
+    const [answer, setAnswer] = useState('')
+    const [selectOption, setselectOption] = useState(1)
+
+    const handleChangeQuestion = (event) => {
+        setQuestion(event.target.value)
+    }
+    const handleChangeChoose = (event) => {
+        setChoose(event.target.value)
+    }
+    const handleChangeanswer = (event) => {
+        setAnswer(event.target.value)
+    }
+
+
+
+    function addSelectOption() {
+        list.push(
+            <div className="input-group">
+                <div className="input-group-prepend">
+                    <div className="input-group-text">
+                        <input type="radio" id={selectOption + 1} name="answer" />
+                    </div>
+                </div>
+                <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
+            </div>
+        )
+        setselectOption(selectOption + 1)
+    }
+
+    function handleClick() {
+
+        alert('입력이 완료되었습니다')
+        // 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)
+
+    }
+
+    // function handleChangeQuestion(){}
+
+
+    return (
+        <div className="" id="Quiz1">
+            <h2 className="p-3 border text-center">문제만들기</h2>
+            <div className="p-3 borber">
+                <div className="p-3 ">
+                    <span className="font-weight-bold mr-2 h3">1.</span>
+                    <input type="text" className="form-control" onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
+                </div>
+                <div className="p-3 ">
+                    <div className="input-group">
+                        <div className="input-group-prepend">
+                            <div className="input-group-text">
+                                <input type="radio" id={selectOption} name="answer" />
+                            </div>
+                        </div>
+                        <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
+                    </div>
+                    {list.map((element) => element)}
+                    <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 type="text" onChange={handleChangeanswer} placeholder="정답을 입력하세요" />
+                </div>
+
+                <label for="inputLogin" className="d-flex justify-content-center">
+                    <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
+                </label>
+            </div>
+        </div>
+    )
+}
+
+export default AdminQuiz

src/AdminSetting.js

+import React,{ useState } from 'react'
+
+
+
+function AdminSetting() {
+    const [password, setPassword] = useState('')
+    const [adminpassword, setAdminPassword] = useState('')
+    const [time, setTime] = useState('')
+    const handleChangePassword = (event) => {
+        setPassword(event.target.value)
+    }
+    const handleChangeAdminPassword = (event) => {
+        setAdminPassword(event.target.value)
+    }
+    const handleChangeTime = (event) => {
+        setTime(event.target.value)
+    }
+
+
+
+    function handleClick() {
+
+        alert('입력이 완료되었습니다')
+
+    }
+    return (
+        <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>
+    )
+}
+
+
+export default AdminSetting
\ No newline at end of file