A

src/Admin.js

@@ -3,65 +3,58 @@ import AdminQuiz from './AdminQuiz'
 import AdminSetting from './AdminSetting'
 
 
-let QuizBtn=[]
+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 name={e.target.id} />)
     }
-    
-    function handleClickAddQuiz(){
-        QuizBtnCount.push(
+
+    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">
-                        <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 className="container-fluid">
+                <div className="row justify-content-md-center mt-5 ">
+                    <div className="col-2 text-center border">
+                        <div className="my-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>
                     </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>
-            
+                    <div className="col-8">
                         {result}
-
                     </div>
                 </div>
             </div>
-        </div>
 
 
-    </>
+        </>
     )
 }
 

src/AdminQuiz.js

 import React, { useState } from 'react';
+// import Admin from './Admin'
 
 let list = []
 
@@ -8,7 +9,7 @@ let QnAadmin = {}
 let c = {}
 
 
-function AdminQuiz() {
+function AdminQuiz(props) {
 
 
     const [question, setQuestion] = useState('')
@@ -46,13 +47,13 @@ function AdminQuiz() {
                         <input type="radio" name="answer" />
                     </div>
                 </div>
-                <input type="text" class="form-control"  id={String(selectOption + 1)}  placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
+                <input type="text" class="form-control" id={String(selectOption + 1)} placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
             </div>
         )
         setselectOption(selectOption + 1)
     }
 
-  
+
     function handleClick() {
         if (!question) {
             alert('문제가 입력되지 않았습니다.')
@@ -64,9 +65,11 @@ function AdminQuiz() {
             alert('정답이 입력되지 않았습니다.')
         }
         else {
+            // let data = localStorage.getItem('QnA')
+            // data=data?JSON.parse(data):''
+            // QnAadmins.push(data)
             console.log(QnAadmin)
-            QnAadmin['Choose']=Object.values(c)                                                                                                                                                                                                           
-
+            QnAadmin['Choose'] = Object.values(c)
             QnAadmins.push(QnAadmin)
             localStorage.setItem('QnA', JSON.stringify(QnAadmins))
             console.log(QnAadmins)
@@ -80,25 +83,29 @@ function AdminQuiz() {
 
     return (
         <div className="" id="Quiz1">
-            <h2 className="p-3 border text-center">문제만들기</h2>
+            <h2 className="p-3 border text-center">{String(props.name)}번 문제만들기</h2>
             <div className="p-3 borber">
                 <div className="p-3 ">
-                    <span className="font-weight-bold mr-2 h3">1.</span>
+                    <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" />
+                    <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" id={selectOption} name="answer" />
+                                </div>
                             </div>
+                            <input type="text" className="form-control" id='1' placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
                         </div>
-                        <input type="text" className="form-control" id='1' placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
+                        {list.map((element) => element)}
+                        <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
                     </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="정답을 입력하세요" />

src/App2.js

-import React from 'react';
-import './App.css';
-
-function App() {
-    return (
-
-        <div>
-            <header>
-                <Link to="/">
-                    <button>Calculus</button>
-                </Link>
-            </header>
-            <hr />
-        </div>
-
-        
-  )
-}
-
-
-export default App;
\ No newline at end of file