.

src/Admin.js

@@ -6,30 +6,30 @@ let QuizBtn=[]
 
 function Admin() {
 
-    const[result, setresult] = useState('')
-    const[QuizBtnCount, setQuizBtnCount] = useState(4)
+    const [result, setresult] = useState('')
+    const [QuizBtnCount, setQuizBtnCount] = useState(4)
 
-    function handleClickSetting(){
-        setresult(<AdminSetting/>)
+    function handleClickSetting() {
+        setresult(<AdminSetting />)
     }
 
-    function handleClickQuiz(){
-        setresult(<AdminQuiz/>)
+    function handleClickQuiz(e) {
+        setresult(<AdminQuiz QuizNum={e.target.id} data={JSON.parse(localStorage.getItem('QnA'))} />)
     }
     
-    function handleClickAddQuiz(){
+    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">
-            <div className="row justify-content-md-center mt-5 ">
-                <div className="col-2 text-center border">
-                    <div className="my-5">
+        <div className="row justify-content-md-center mt-5">
+                    <div className="col-2 text-center border py-5">
+                    <div className="mb-5">
                         <h4>관리자페이지</h4>
                     </div>
                     <div>
@@ -45,16 +45,8 @@ function Admin() {
                     </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 className="row d-flex justify-content-center">
-                            </div>
-                        </div>
-            
-                        {result}
-
-                    </div>
+                <div className="col-8 ">
+                                         {result}
                 </div>
             </div>
         </div>

src/compare.js

-import React, { useState, useEffect } from 'react';
-// import Admin from './Admin'
+import React, { useState } from 'react';
+import AdminQuiz from './AdminQuiz'
+import AdminSetting from './AdminSetting'
 
-let list = []
+let QuizBtn=[]
 
-let QnAadmins = []
-let QnAadmin = {}
-let savechoose = {}
+function Admin() {
 
-function AdminQuiz(props) {
+    const [result, setresult] = useState('')
+    const [QuizBtnCount, setQuizBtnCount] = useState(4)
 
-    const [question, setQuestion] = useState('')
-    const [choose, setChoose] = useState('')
-    const [answer, setAnswer] = useState('')
-    const [selectOption, setselectOption] = useState(1)
-    const [q, setq] = useState('')
-    const [c, setc] = useState([])
-    const [a, seta] = useState('')
-
-    useEffect(()=>{
-        setQuestion('')
-        if(props.data[props.QuizNum-1]){
-            setq(props.data[props.QuizNum-1].Q)
-            setc(props.data[props.QuizNum-1].Choose)
-            seta(props.data[props.QuizNum-1].A)
-        }
-        else {
-            setq('보기를 입력하세요')
-            setc(['보기를 입력하세요','보기를 입력하세요','보기를 입력하세요','보기를 입력하세요'])
-            seta('보기를 입력하세요')
-        }
-    },[props.QuizNum])
-
-    const handleChangeQuestion = (event) => {
-        QnAadmin['Q'] = event.target.value
-        setQuestion(event.target.value)
-    }
-    const handleChangeChoose = (event) => {
-        savechoose[event.target.id] = event.target.value
-        setChoose(event.target.value)
-    }
-    const handleChangeanswer = (event) => {
-        QnAadmin['A'] = event.target.value
-        setAnswer(event.target.value)
+    function handleClickSetting() {
+        setresult(<AdminSetting />)
     }
 
-    function addSelectOption() {
-        list.push(
-            <div className="input-group">
-                <div className="input-group-prepend">
-                    <div className="input-group-text">
-                        <input type="radio" checked={false} name="answer" />
-                    </div>
-                </div>
-                <input type="text" class="form-control" id={String(selectOption + 1)} placeholder={c[1]} onChange={handleChangeChoose} />
-            </div>
-        )
-        setselectOption(selectOption + 1)
+    function handleClickQuiz(e) {
+        setresult(<AdminQuiz QuizNum={e.target.id} data={JSON.parse(localStorage.getItem('QnA'))} />)
     }
 
-
-    function handleClick() {
-        if (!question) {
-            alert('문제가 입력되지 않았습니다.')
-        }
-        else if (!choose) {
-            alert('보기가 입력되지 않았습니다.')
-        }
-        else if (!answer) {
-            alert('정답이 입력되지 않았습니다.')
-        }
-        else {
-            // console.log(QnAadmin)
-            QnAadmin['Choose'] = Object.values(savechoose)
-            QnAadmin['N'] = String(props.QuizNum)
-            QnAadmins.push(QnAadmin)
-            QnAadmin = {}
-            localStorage.setItem('QnA', JSON.stringify(QnAadmins))
-            console.log(QnAadmins)
-            // setselectOption(1)
-            alert('입력이 완료되었습니다.')
-        }
-
+    function handleClickAddQuiz() {
+        QuizBtn.push(
+            <button type='button' className='btn btn-outline-primary' id={QuizBtnCount} onClick={handleClickQuiz}>Quiz {QuizBtnCount}</button>
+        )
+        setQuizBtnCount(QuizBtnCount + 1)
     }
 
     return (
-        <div className="" id="Quiz1">
-            <h2 className="p-3 border text-center">{String(props.QuizNum)}번 문제만들기</h2>
-            <div className="p-3 borber">
-                <div className="p-3 ">
-                    <span className="font-weight-bold mr-2 h3">1. 문제 입력하기</span>
-                    <input type="text" id="inputQuiz" className="form-control" value={question} onChange={handleChangeQuestion} placeholder={q} />
-                </div>
-                <div className="p-3 ">
-                    <span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span>
-                    <div className="p-3 ">
-                        <div className="input-group">
-                            <div className="input-group-prepend">
-                                <div className="input-group-text">
-                                    <input type="radio" checked={false} name="answer" />
-                                </div>
-                            </div>
-                            <input type="text" className="form-control" id='1' value={choose} placeholder={c[0]} onChange={handleChangeChoose} />
+        <>
+            <div className="container-fluid">
+                <div className="row justify-content-md-center mt-5">
+                    <div className="col-2 text-center border py-5">
+                        <div className="mb-5">
+                            <h4>관리자페이지</h4>
+                        </div>
+                        <div>
+                            <button type="button" className="btn btn-outline-info mb-5" onClick={handleClickSetting}>Setting</button>
+                        </div>
+                        <div class="btn-group-vertical">
+                            <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>
-                        {list.map((element) => element)}
-                        <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
                     </div>
-                </div>
 
-                <div className="p-3 ">
-                    <span className="font-weight-bold mr-2 h3">정답:</span>
-                    <input type="text" value={answer} onChange={handleChangeanswer} placeholder={a} />
+                    <div className="col-8 ">
+                        {result}
+                    </div>
                 </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
+export default Admin
\ No newline at end of file