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 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;
\ No newline at end of file
export default App;
......@@ -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>
}*/
)
}
......
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>
)
}
......
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