4. HOUR, STOP/RESTART, RESET

<추가 사항>

※시 추가

※타이머 정지/재시작 추가

※리셋 기능 추가

 

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