timer

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
+    "react-compound-timer": "^1.2.0",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"

src/Quiz.js

 import React from 'react'
 import { Link } from 'react-router-dom';
+import Timer from 'react-compound-timer';
 
 const question = [
     { Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" },
@@ -41,19 +42,41 @@ class Quiz extends React.Component {
         return (
             <div className="Quiz">
                 <h2>Q:{this.state.Q}</h2>
+                {this.answerbox()}
                 {this.state.Choose.map((a) =>
                     <div>
-                        <input type="radio" name='answer' id={a} value={a} /*ref={this.textInput}*/ />
+                        <input type="radio" name='answer'  id={'anwer'+a} value={a} /*ref={this.textInput}  input 네임을 문제단위로 바꾸어주어야 함. */ />
                         <label for={a}>{a}</label>
-                    </div>)
+                    </div>)                   
+
                 }
-                <div className="App">정답을 입력하세요</div>
+                <div className="App" class='left'>정답을 입력하세요</div>
+
                 
                 {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
                 {(this.state.page === question.length-1)
                     ? <Link to="/end">제출</Link>
                     : <button type="button" onClick={this.setQuestion}>다음</button>
+                    
                 }
+                                
+               <Timer
+                    initialTime={5000}
+                    direction="backward"
+                    checkpoints={[
+                        {
+                            time: 0,
+                            callback: () =>  this.setQuestion,
+                        }
+                    ]}
+                >
+                    {() => (
+                        <>
+                            <Timer.Seconds /> seconds
+                        </>
+                    )}
+                </Timer> {/* npm i react-compound-timer */}
+               
             </div>
         )
     }