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

No commit message

No commit message
parent 1147516b
This diff is collapsed.
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> </div>
</Link> );
</header>
<hr/>
<div>
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route path="/quiz">
<Quiz/>
</Route>
<Route path="/end">
<End/>
</Route>
</Switch>
</div>
</Router>
)
} }
export default App;
export default App;
\ No newline at end of file
...@@ -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: "" },
...@@ -48,12 +49,29 @@ class Quiz extends React.Component { ...@@ -48,12 +49,29 @@ class Quiz extends React.Component {
</div>) </div>)
} }
<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