타이머 기능 최종 완성본
component
-Button.jsx
-Input.jsx
page
-Timer.jsx
css
-Timer.css
App.js
component - <Input.jsx>
import React from 'react'
function Input({className, type, value, onChange, placeholder}) {
return (
<div>
<input
className={className}
type={type}
value={value}
onChange={onChange}
placeholder={placeholder}
/>
</div>
)
}
export default Input
component - <Button.jsx>
import React from 'react'
function Button({type, className, name, onClick}) {
return (
<div>
<button type={type} className={className} onClick={onClick}>
{name}
</button>
</div>
)
}
export default Button
page - <Timer.jsx>
import React, {useCallback, useEffect, useState} from 'react'
import '../css/Timer.css'
import Input from '../component/Input'
import Button from '../component/Button'
function Timer() {
const [timeOut, setTimeOut] = useState(true)
const [startView, setStartView] = useState(true)
const [stopBool, setStopBool] = useState(true)
const [second, setSecond] = useState(0)
const [minuts, setMinuts] = useState(0)
const [hour, setHour] = useState(0)
const [secondInput, setSecondInput] = useState()
const [minutsInput, setMinutsInput] = useState()
const [hourInput, setHourInput] = useState()
const changeSecond = event => {
setSecondInput(parseInt(event.target.value))
}
const changeMinuts = event => {
setMinutsInput(parseInt(event.target.value))
}
const changeHour = event => {
setHourInput(parseInt(event.target.value))
}
const reduceSecond = () => setSecond(second => Math.max(second - 1, 0))
const reduceMinuts = () => setMinuts(minuts => Math.max(minuts - 1, 0))
const reduceHour = () => setHour(hour => Math.max(hour - 1), 0)
const secondTimer = String(second).padStart(2, 0)
const minutsTimer = String(minuts).padStart(2, 0)
const hourTimer = String(hour).padStart(2, 0)
const resetInput = () => {
setSecondInput()
setMinutsInput()
setHourInput()
}
const timeSecondDelay = useCallback(() => {
setTimeout(() => {
reduceMinuts()
setSecond(59)
}, 1000)
}, [])
const timeMinutesDelay = useCallback(() => {
setTimeout(() => {
reduceHour()
setMinuts(59)
}, 1000)
}, [])
const timerStart = () => {
if (secondInput === undefined || minutsInput === undefined || hourInput === undefined) {
alert('시/분/초를 입력해주세요.')
resetInput()
} else if (secondInput > 59 || minutsInput > 59 || hourInput > 59) {
alert('최대 59까지 입력 가능합니다.')
resetInput()
} else if (secondInput < 0 || minutsInput < 0 || hourInput < 0) {
alert('최소 0까지 입력 가능합니다.')
resetInput()
} else {
setTimeOut(true)
setSecond(secondInput)
setMinuts(minutsInput)
setHour(hourInput)
}
}
const timeStop = () => {
setStopBool(stopBool => !stopBool)
}
const timeReset = () => {
setStopBool(true)
setTimeOut(false)
setStartView(true)
resetInput()
}
useEffect(() => {
let reduce
if (stopBool === true) {
reduce = setInterval(reduceSecond, 1000)
return () => clearInterval(reduce)
} else {
return () => clearInterval(reduce)
}
})
useEffect(() => {
if (second === 0) {
timeSecondDelay()
if (minuts === 0) {
timeMinutesDelay()
if (hour === 0) {
setTimeOut(false)
setStartView(false)
resetInput()
}
}
}
}, [second, minuts, hour, timeSecondDelay, timeMinutesDelay])
useEffect(() => {
setStartView(true)
}, [])
return (
<div className="timerDiv">
{timeOut ? (
<div className="timerTrueDiv">
<h1>{`${hourTimer} : ${minutsTimer} : ${secondTimer}`}</h1>
<div className="timerControlButton">
<Button
className={'timerStopButton'}
name={stopBool ? 'STOP' : 'RESTART'}
onClick={timeStop}
/>
<Button className={'timerResetButton'} name={'RESET'} onClick={timeReset} />
</div>
</div>
) : (
<div className="timerFalseDiv">
<div>{startView ? <h1>00 : 00 : 00</h1> : <h1>TIME OUT!!!</h1>}</div>
<div>
<div className="timerInputDiv">
<Input
className={'timerHourInput'}
type={'number'}
value={hourInput || ''}
placeholder={'00(시)'}
onChange={changeHour}
/>
<Input
className={'timerMinutsInput'}
type={'number'}
value={minutsInput || ''}
placeholder={'00(분)'}
onChange={changeMinuts}
/>
<Input
className={'timerSecondInput'}
value={secondInput || ''}
type={'number'}
placeholder={'00(초)'}
onChange={changeSecond}
/>
</div>
<div>
<Button
className={'timerStartButton'}
name={'START'}
onClick={timerStart}
/>
</div>
</div>
</div>
)}
</div>
)
}
export default Timer
Timer.css
body {
background: linear-gradient(to right bottom, darkkhaki, white);
}
.timerDiv {
margin: 100px 100px 100px 500px;
padding: 100px;
border: 10px double rgb(231, 222, 87);
border-radius: 50%;
width: 300px;
height: 300px;
text-align: center;
background-color: rgb(241, 241, 247);
box-shadow: 10px 10px 0px 0px rgb(236, 174, 16);
}
.timerTrueDiv {
font-size: 25px;
margin-top: 60px;
}
.timerFalseDiv {
margin-top: 60px;
font-size: 25px;
}
.timerControlButton {
display: flex;
}
.timerInputDiv {
display: flex;
margin-left: 5px;
}
.timerHourInput {
width: 85px;
height: 25px;
}
.timerMinutsInput {
margin-left: 10px;
width: 85px;
height: 25px;
}
.timerSecondInput {
margin-left: 10px;
width: 85px;
height: 25px;
}
.timerStartButton {
width: 130px;
height: 40px;
font-size: 20px;
margin-top: 20px;
font-weight: bold;
background-color: darkorange;
color: white;
border: none;
border-radius: 10px;
}
.timerStopButton, .timerResetButton {
width: 130px;
height: 40px;
font-size: 20px;
margin: 20px 0px 0px 15px;
font-weight: bold;
background-color: darkorange;
color: white;
border: none;
border-radius: 10px;
}
.timerStartButton:hover, .timerStopButton:hover, .timerResetButton:hover {
border: 8px solid rgb(255, 179, 36);
}
App.js
import React from 'react'
import Timer from './page/Timer.jsx'
function App() {
return (
<div>
<Timer />
</div>
)
}
export default App
타이머 최종 완성본
'개인 공부 > 타이머' 카테고리의 다른 글
4. HOUR, STOP/RESTART, RESET (0) | 2024.02.07 |
---|---|
3. Time Input (0) | 2024.01.26 |
2. padStart, setTimeout (0) | 2024.01.26 |
1. Basic Timer (0) | 2024.01.25 |