No commit message

No commit message

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/App.js

 import React from 'react';
+import logo from './logo.svg';
 import './App.css';
-import Home from './Home'
-import Quiz from './Quiz'
-import End from './End'
-
-import { BrowserRouter as Router, Link, Switch, Route } from 'react-router-dom';
 
 function App() {
   return (
-    <Router>
-      <header>
-        <Link to="/">
-          <button>Calculus</button>
-        </Link>
-      </header>
-      <hr/>
-      <div>
-        <Switch>
-          <Route exact path="/">
-            <Home/>
-          </Route>
-          <Route path="/quiz">
-            <Quiz/>
-          </Route>
-          <Route path="/end">
-            <End/>
-          </Route>
-        </Switch>
-      </div>
-    </Router>
-  )
+    <div className="App">
+      <h2>어떤 페이지가 나올까요? ^ ^</h2>
+      궁금합니다^ ^
+    </div>
+  );
 }
 
-
-export default App;
+export default App;
\ No newline at end of file

src/Home.js

@@ -3,17 +3,31 @@ import { Link } from 'react-router-dom';
 
 
 function Home() {
+    state = {
+        value: ""
+    }
     return (
         <div className="Box">
             <div className="Name">
                 이름을 입력하세요
-            <input onChange={(event) => { console.log(event.target.value) }} />
+            <input onChange={(event) => {
+                console.log(event.target.value)
+                this.setState({
+                    value : event.target.value
+                })
+                }}/>
             </div>
-            <Link to="/quiz">
-                <button className="QuizStart">Quiz Start !</button>
+            {( this.state.value === null)
+                ? alert('이름을 입력하세요')    
+                : <Link to="/quiz">
+                <button className="QuizStart">QUiz Start !</button>
             </Link>
+            }
         </div>
-
+/* <Link to="/quiz">
+                <button className="QuizStart">Quiz Start !</button>
+        </Link> 
+                }*/
     )
 }
 

src/Quiz.js

 import React from 'react'
 import { Link } from 'react-router-dom';
+import Timer from 'react-compound-timer'; // Timer 를 쓰기위한 import --> npm i react-compound-timer로 설치 먼저
 
 const question = [
     { Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" },
@@ -48,12 +49,29 @@ class Quiz extends React.Component {
                     </div>)
                 }
                 <div className="App">정답을 입력하세요</div>
-                
+
                 {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
-                {(this.state.page === question.length-1)
+                {(this.state.page === question.length - 1)
                     ? <Link to="/end">제출</Link>
-                    : <button type="button" onClick={this.setQuestion}>다음</button>
+                    :  <button type="button" onClick={this.setQuestion}>다음</button>
                 }
+                <br />
+               <Timer
+                    initialTime={5000}
+                    direction="backward"
+                    checkpoints={[
+                        {
+                            time: 0,
+                            callback: () => this.setQuestion// callback 다음에 뭐라고 써야할까요....??
+                        }
+                    ]}
+                >
+                    {() => (
+                        <>
+                            <Timer.Seconds /> seconds
+                        </>
+                    )}
+                </Timer>
             </div>
         )
     }