Commit 41108b12 authored by 김민수's avatar 김민수
Browse files

No commit message

No commit message
parent 1147516b
This source diff could not be displayed because it is too large. You can view the blob instead.
import React from 'react'; import React from 'react';
import logo from './logo.svg';
import './App.css'; 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() { function App() {
return ( return (
<Router> <div className="App">
<header> <h2>어떤 페이지가 나올까요? ^ ^</h2>
<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> </div>
</Router> );
)
} }
export default App; export default App;
...@@ -3,17 +3,31 @@ import { Link } from 'react-router-dom'; ...@@ -3,17 +3,31 @@ import { Link } from 'react-router-dom';
function Home() { function Home() {
state = {
value: ""
}
return ( return (
<div className="Box"> <div className="Box">
<div className="Name"> <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> </div>
<Link to="/quiz"> {( this.state.value === null)
<button className="QuizStart">Quiz Start !</button> ? alert('이름을 입력하세요')
: <Link to="/quiz">
<button className="QuizStart">QUiz Start !</button>
</Link> </Link>
}
</div> </div>
/* <Link to="/quiz">
<button className="QuizStart">Quiz Start !</button>
</Link>
}*/
) )
} }
......
import React from 'react' import React from 'react'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Timer from 'react-compound-timer'; // Timer 를 쓰기위한 import --> npm i react-compound-timer로 설치 먼저
const question = [ const question = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" }, { Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" },
...@@ -50,10 +51,27 @@ class Quiz extends React.Component { ...@@ -50,10 +51,27 @@ class Quiz extends React.Component {
<div className="App">정답을 입력하세요</div> <div className="App">정답을 입력하세요</div>
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */} {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{(this.state.page === question.length-1) {(this.state.page === question.length - 1)
? <Link to="/end">제출</Link> ? <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> </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