Quiz.js

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import Timer from 'react-compound-timer'; // 타이머쓰기위해 import


const QnA = [
    { Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "", N: 1 },
    { Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "", N: 2 },
    { Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "", N: 3 }
]

function Quiz() {
    let [question, setQuestionss] = useState({
        ...QnA[0],
        i: 0,
        page: 0,
    })
    let [selected, setSelected] = useState("")  //선택한 답을 보여줄 것들

    function setQuestion() {
        setQuestionss({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
    }
    let handleChange = (ev) => {
        ev.preventDefault()  //새로고침 안되도록
        setSelected(ev.target.value)  //selected값 변경
        let slt = ev.target.value  //slt에 선택한값 받아옴

        let count = question.Choose.length  //이거 정확히 뭘로할지 모르겠어요 ㅜㅜ

        // let checked_index = -1;
        let checked_value = '';
        checked_value = slt;

        //localStorage.setItem('번문제 답' + checked_value, checked_value)
        for (let i = 0; i < count; i++) {
            if (ev.target.checked) {  //이거 맞는지도 잘..
                // checked_index = i;
                checked_value = slt;
                localStorage.setItem(question.i + 1 + '번문제 답', checked_value)
            }
        }
    }
    return (
        <div className="Quiz">
            <h2>Q:{question.Q}</h2>
            <div>
                <form onSubmit={handleChange}>
                    {question.Choose.map((a, index) =>
                        <div key={index}>
                            <input type="radio" name='answer' id={'anwer' + a} value={a} onClick={handleChange} />
                            <label htmlFor={a}> {a}</label>
                        </div>
                    )}
                    <input hidden type="submit" value="확인" />    {/*버튼 숨김*/}
                </form>
                <p>선택한 답 :<span style={{color : "green", fontWeight : "bold", fontSize: "30px"}}> {selected}</span>  {/* 선택한 값 보여줌 */}
                </p>
            </div>


            <div className="App">정답을 입력하세요</div>


            {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
            {(question.page === QnA.length - 1)
                ? <Link to="/end">제출</Link>
                : <button type="button" onClick={setQuestion} >다음</button>

            }

            {/* <input onKeyPress="this.enterkey()"/> */}


            
            <Timer
                initialTime={3050}
                direction="backward"
                checkpoints={[
                    {
                        time: 0,
                        callback: setQuestion
                        //  history.go(1)
                    }
                ]}
            >
                {() => (
                    <>
                        <Timer.Seconds /> seconds
                        </>
                )}
            </Timer>     {/* npm i react-compound-timer */}

        </div>
    )



}


export default Quiz;