Commit ad03b01f authored by baesangjune's avatar baesangjune
Browse files

.

parent be284605
import React, { useState } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import AdminQuiz from './AdminQuiz' import AdminQuiz from './AdminQuiz'
import AdminSetting from './AdminSetting' import AdminSetting from './AdminSetting'
...@@ -8,23 +8,29 @@ function Admin() { ...@@ -8,23 +8,29 @@ function Admin() {
// QnA.length === 0 ? console.log(QnA.length) : QnA = JSON.parse(localStorage.getItem('QnA')) // QnA.length === 0 ? console.log(QnA.length) : QnA = JSON.parse(localStorage.getItem('QnA'))
const [result, setresult] = useState('') const [result, setresult] = useState('')
const [QuizBtnCount, setQuizBtnCount] = useState(4) const [QuizBtnCount, setQuizBtnCount] = useState(4)
const indexRef = useRef(0)
const dbRef = useRef([])
useEffect(() => {
if (JSON.parse(localStorage.getItem('QnA'))) {
dbRef.current=JSON.parse(localStorage.getItem('QnA'))
}
}, [])
function handleClickSetting() { function handleClickSetting() {
setresult(<AdminSetting />) setresult(<AdminSetting />)
} }
function handleClickQuiz(e) { function handleClickQuiz(e) {
setresult(<AdminQuiz QuizNum={e.target.id} data={JSON.parse(localStorage.getItem('QnA'))} />) indexRef.current = Number(e.target.id) - 1
// console.log(dbRef.current, indexRef.current)
// let QnA = JSON.parse(localStorage.getItem('QnA'))
// if (QnA !== null) {
// (QnA[e.target.id - 1] === undefined) ? setresult(<AdminQuiz QuizNum={e.target.id} data={{ Q: '문제를 입력하세요', Choose: '보기를 입력하세요', A: '정답을 입력하세요' }} />) : setresult(<AdminQuiz QuizNum={e.target.id} data={QnA[e.target.id - 1]} />)
// } if(dbRef.current[e.target.id-1]){
// else { setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />)
// setresult(<AdminQuiz QuizNum={e.target.id} data={{ Q: '문제를 입력하세요', Choose: '보기를 입력하세요', A: '정답을 입력하세요' }} />) }
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]} />)
}
} }
function handleClickAddQuiz() { function handleClickAddQuiz() {
...@@ -34,21 +40,27 @@ function Admin() { ...@@ -34,21 +40,27 @@ function Admin() {
setQuizBtnCount(QuizBtnCount + 1) setQuizBtnCount(QuizBtnCount + 1)
} }
function handleClickSave(QnAadmin) {
console.log(QnAadmin, indexRef.current)
dbRef.current[indexRef.current] = QnAadmin
localStorage.setItem('QnA', JSON.stringify(dbRef.current))
}
return ( return (
<> <>
<div className="container-fluid"> <div className="container-fluid bg-light">
<div className="row justify-content-md-center mt-5"> <div className="row justify-content-md-center mt-5">
<div className="col-2 text-center border py-5"> <div className="col-2 text-center border py-5 bg-white">
<div className="mb-5"> <div className="py-3 border-top border-bottom">
<h4>관리자페이지</h4> <h5 className="font-weight-bold">설정</h5>
</div> </div>
<div> <div className="border-bottom py-4">
<button type="button" className="btn btn-outline-info mb-5" onClick={handleClickSetting}>Setting</button> <button type="button" className="btn btn-info" onClick={handleClickSetting}>Setting</button>
</div> </div>
<div class="btn-group-vertical"> <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={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={2} onClick={handleClickQuiz}>Quiz 2</button>
<button type="button" className="btn btn-outline-primary" id="3" onClick={handleClickQuiz}>Quiz 3</button> <button type="button" className="btn btn-outline-primary" id={3} onClick={handleClickQuiz}>Quiz 3</button>
{QuizBtn.map((element) => element)} {QuizBtn.map((element) => element)}
<button type="button" className="btn btn-outline-primary" onClick={handleClickAddQuiz}>+</button> <button type="button" className="btn btn-outline-primary" onClick={handleClickAddQuiz}>+</button>
......
import React, { useState } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import AdminQuiz from './AdminQuiz' import AdminQuiz from './AdminQuiz'
import AdminSetting from './AdminSetting' import AdminSetting from './AdminSetting'
let QuizBtn = [] let QuizBtn = []
function Admin() { function Admin() {
const [result, setresult] = useState('') const [result, setresult] = useState('')
const [QuizBtnCount, setQuizBtnCount] = useState(4) const [QuizBtnCount, setQuizBtnCount] = useState(4)
const indexRef = useRef(0)
const dbRef = useRef([])
useEffect(() => {
if (JSON.parse(localStorage.getItem('QnA'))) {
dbRef.current=JSON.parse(localStorage.getItem('QnA'))
}
}, [])
function handleClickSetting() { function handleClickSetting() {
setresult(<AdminSetting />) setresult(<AdminSetting />)
} }
function handleClickQuiz(e) { function handleClickQuiz(e) {
setresult(<AdminQuiz QuizNum={e.target.id} data={JSON.parse(localStorage.getItem('QnA'))} />) 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]} />)
}
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]} />)
}
} }
function handleClickAddQuiz() { function handleClickAddQuiz() {
...@@ -26,21 +40,28 @@ function Admin() { ...@@ -26,21 +40,28 @@ function Admin() {
setQuizBtnCount(QuizBtnCount + 1) setQuizBtnCount(QuizBtnCount + 1)
} }
function handleClickSave(QnAadmin) {
console.log(QnAadmin, indexRef.current)
dbRef.current[indexRef.current] = QnAadmin
localStorage.setItem('QnA', JSON.stringify(dbRef.current))
}
return ( return (
<> <>
<div className="container-fluid"> <div className="container-fluid bg-light">
<div className="row justify-content-md-center mt-5"> <div className="row justify-content-md-center mt-5">
<div className="col-2 text-center border py-5"> <div className="col-2 text-center border py-5 bg-white">
<div className="mb-5"> <div className="py-3 border-top border-bottom">
<h4>관리자페이지</h4> <h5 className="font-weight-bold">설정</h5>
</div> </div>
<div> <div className="border-bottom py-4">
<button type="button" className="btn btn-outline-info mb-5" onClick={handleClickSetting}>Setting</button> <button type="button" className="btn btn-info" onClick={handleClickSetting}>Setting</button>
</div> </div>
<div class="btn-group-vertical"> <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={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={2} onClick={handleClickQuiz}>Quiz 2</button>
<button type="button" className="btn btn-outline-primary" id="3" onClick={handleClickQuiz}>Quiz 3</button> <button type="button" className="btn btn-outline-primary" id={3} onClick={handleClickQuiz}>Quiz 3</button>
{QuizBtn.map((element) => element)} {QuizBtn.map((element) => element)}
<button type="button" className="btn btn-outline-primary" onClick={handleClickAddQuiz}>+</button> <button type="button" className="btn btn-outline-primary" onClick={handleClickAddQuiz}>+</button>
......
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