<추가 사항>
※시 추가
※타이머 정지/재시작 추가
※리셋 기능 추가
component
-Button.jsx
-Input.jsx
page
-Timer.jsx
css
-Timer.css
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 MAX_TIME = 59
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 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('시/분/초를 입력해주세요.')
} else if (secondInput > MAX_TIME || minutsInput > MAX_TIME || hourInput > MAX_TIME) {
alert('최대 59까지 입력 가능합니다.')
} else {
setTimeOut(true)
setSecond(secondInput)
setMinuts(minutsInput)
setHour(hourInput)
}
}
const timeStop = () => { //타이머 정지, 재시작
setStopBool(stopBool => !stopBool)
}
const timeReset = () => { //타이머 리셋
setStopBool(true)
setTimeOut(false)
setStartView(true)
setSecondInput()
setMinutsInput()
setHourInput()
}
useEffect(() => {
let reduce
if (stopBool === true) { //타이머 시작(start), 재시작(restart)일 경우
reduce = setInterval(reduceSecond, 1000)
return () => clearInterval(reduce)
} else { //타이머 정지(stop)일 경우
return () => clearInterval(reduce)
}
})
useEffect(() => {
if (second === 0) {
timeSecondDelay()
if (minuts === 0) {
timeMinutesDelay()
if (hour === 0) {
setTimeOut(false)
setStartView(false)
setSecondInput()
setMinutsInput()
setHourInput()
}
}
}
}, [second, minuts, hour, timeSecondDelay, timeMinutesDelay])
useEffect(() => {
setStartView(true)
}, [])
return (
<div>
{timeOut ? (
<div>
<h2>{`${hourTimer} : ${minutsTimer} : ${secondTimer}`}</h2>
<Button name={stopBool ? 'stop' : 'restart'} onClick={timeStop} />
<Button name={'reset'} onClick={timeReset} />
</div>
) : (
<div>
<div>{startView ? <h2>00 : 00 : 00</h2> : <h2>Time Out!!!</h2>}</div>
<div className="timerDiv">
<Input
type={'number'}
value={hourInput || ''}
placeholder={'시'}
onChange={changeHour}
/>
<Input
className={'timerInput'}
type={'number'}
value={minutsInput || ''}
placeholder={'분'}
onChange={changeMinuts}
/>
<Input
className={'timerInput'}
value={secondInput || ''}
type={'number'}
placeholder={'초'}
onChange={changeSecond}
/>
<Button className={'timerButton'} name={'Start'} onClick={timerStart} />
</div>
</div>
)}
</div>
)
}
export default Timer
'개인 공부 > 타이머' 카테고리의 다른 글
COMPLETE TIMER (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 |