Commit a683b650 authored by baesangjune's avatar baesangjune
Browse files

.

parent ae61698c
...@@ -25,7 +25,7 @@ function Admin() { ...@@ -25,7 +25,7 @@ function Admin() {
// console.log(dbRef.current, indexRef.current) // console.log(dbRef.current, indexRef.current)
if(dbRef.current[e.target.id-1]){ if(dbRef.current[e.target.id-1]){
setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />) setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />) //설명 부탇드립니다.
} }
else{ else{
dbRef.current[e.target.id-1] = {'Q':'x', 'Choose':[0,0,0,0], 'A':'x'} dbRef.current[e.target.id-1] = {'Q':'x', 'Choose':[0,0,0,0], 'A':'x'}
...@@ -38,14 +38,14 @@ function Admin() { ...@@ -38,14 +38,14 @@ function Admin() {
<button type='button' className='btn btn-outline-primary' id={QuizBtnCount} onClick={handleClickQuiz}>Quiz {QuizBtnCount}</button> <button type='button' className='btn btn-outline-primary' id={QuizBtnCount} onClick={handleClickQuiz}>Quiz {QuizBtnCount}</button>
) )
setQuizBtnCount(QuizBtnCount + 1) setQuizBtnCount(QuizBtnCount + 1)
} } //퀴즈 추가버튼
function handleClickSave(QnAadmin) { function handleClickSave(QnAadmin) {
console.log(QnAadmin, indexRef.current) console.log(QnAadmin, indexRef.current)
dbRef.current[indexRef.current] = QnAadmin dbRef.current[indexRef.current] = QnAadmin
localStorage.setItem('QnA', JSON.stringify(dbRef.current)) localStorage.setItem('QnA', JSON.stringify(dbRef.current))
} } //설명 부탁드립니다.
return ( return (
<> <>
<div className="container-fluid bg-light"> <div className="container-fluid bg-light">
......
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
let list = [] let list = []
let QnAadmins = []
let QnAadmin = {} let QnAadmin = {}
let savechoose = {} let savechoose = {}
function AdminQuiz(props) { function AdminQuiz(props) {
const [question, setQuestion] = useState(props.data.Q) const [question, setQuestion] = useState(props.data.Q)
// setQuestion(props.data.Q)
// question = props.data.Q
const [choose, setChoose] = useState(props.data.Choose) const [choose, setChoose] = useState(props.data.Choose)
// setChoose(props.data.Choose)
// choose = props.data.Choose
const [answer, setAnswer] = useState(props.data.A) const [answer, setAnswer] = useState(props.data.A)
// setAnswer(props.data.A)
// answer = props.data.A
const [selectOption, setselectOption] = useState(1) const [selectOption, setselectOption] = useState(1)
// props.quizNum가 바뀔때마다 즉, Admin.js에서 퀴즈버튼을 바꿔누를때마다 useEffect가 발생하여 값을 업데이트 시켜줍니다.
useEffect(() => {
setQuestion(props.data.Q)
setChoose(props.data.Choose)
setAnswer(props.data.A)
},[props.quizNum])
// 만약 업데이트가 되었으면 question이랑 props.data.Q랑 값이 같아야 하는데
// admin페이지 가서 quiz 1에 값들 넣은 다음 콘솔찍어보고 quiz 2에도 값을 넣고 콘솔보면 어떤게 다른지 알 수 있을거야
// 마지막으로 quiz3 눌러보면 확실하게 알 수 있을거고 값이 처음만 업데이트되고 나중에는 업데이트가 안되고있어
console.log(question)
console.log(props.data.Q)
console.log(choose)
console.log(props.data.Choose)
console.log(answer)
console.log(props.data.A)
const handleChangeQuestion = (event) => { const handleChangeQuestion = (event) => {
QnAadmin['Q'] = event.target.value QnAadmin['Q'] = event.target.value
setQuestion(event.target.value) setQuestion(event.target.value)
} }
const handleChangeChoose = (event) => { const handleChangeChoose = (event) => {
savechoose[event.target.id] = event.target.value savechoose[event.target.id] = event.target.value
setChoose(event.target.value) setChoose(event.target.value)
} }
const handleChangeanswer = (event) => { const handleChangeanswer = (event) => {
QnAadmin['A'] = event.target.value QnAadmin['A'] = event.target.value
setAnswer(event.target.value) setAnswer(event.target.value)
...@@ -68,29 +60,22 @@ function AdminQuiz(props) { ...@@ -68,29 +60,22 @@ function AdminQuiz(props) {
alert('정답이 입력되지 않았습니다.') alert('정답이 입력되지 않았습니다.')
} }
else { else {
// console.log(QnAadmin)
QnAadmin['Choose'] = Object.values(savechoose) QnAadmin['Choose'] = Object.values(savechoose)
QnAadmin['N'] = String(props.QuizNum) QnAadmin['N'] = String(props.quizNum)
QnAadmins.push(QnAadmin) props.fn(QnAadmin)
QnAadmin = {} QnAadmin = {}
localStorage.setItem('QnA', JSON.stringify(QnAadmins))
// console.log(QnAadmins)
alert('입력이 완료되었습니다.') alert('입력이 완료되었습니다.')
} }
} }
// function handleChangeQuestion(){}
return ( return (
<>
<div className="" id="Quiz1"> <div className="" id="Quiz1">
<h2 className="p-3 border text-center">{String(props.QuizNum)} 문제만들기</h2> <h2 className="p-3 border text-center bg-white">{String(props.quizNum)} 문제만들기</h2>
<div className="p-3 borber"> <div className="p-3 borber">
<div className="p-3 "> <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" id="inputQuiz" className="form-control" onChange={handleChangeQuestion} value={question} placeholder={'문제를 입력하세요'} ></input> <input type="text" id="inputQuiz" className="form-control" value={question} onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
</div> </div>
<div className="p-3 "> <div className="p-3 ">
<span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span> <span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span>
...@@ -101,7 +86,7 @@ function AdminQuiz(props) { ...@@ -101,7 +86,7 @@ function AdminQuiz(props) {
<input type="radio" checked={false} name="answer" /> <input type="radio" checked={false} name="answer" />
</div> </div>
</div> </div>
<input type="text" className="form-control" id='1' value={choose} placeholder={'1번 보기를 입력하세요'} onChange={handleChangeChoose} /> <input type="text" className="form-control" id='1' value={choose} placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
</div> </div>
{list.map((element) => element)} {list.map((element) => element)}
<button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button> <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
...@@ -110,7 +95,7 @@ function AdminQuiz(props) { ...@@ -110,7 +95,7 @@ function AdminQuiz(props) {
<div className="p-3 "> <div className="p-3 ">
<span className="font-weight-bold mr-2 h3">정답:</span> <span className="font-weight-bold mr-2 h3">정답:</span>
<input type="text" onChange={handleChangeanswer} value={answer} placeholder={'정답 입력하세요'} /> <input type="text" value={answer} onChange={handleChangeanswer} placeholder="정답 입력하세요" />
</div> </div>
<label for="inputLogin" className="d-flex justify-content-center"> <label for="inputLogin" className="d-flex justify-content-center">
...@@ -118,7 +103,6 @@ function AdminQuiz(props) { ...@@ -118,7 +103,6 @@ function AdminQuiz(props) {
</label> </label>
</div> </div>
</div> </div>
</>
) )
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment