3. Time Input

<추가 사항>

※Input 컴포넌트 추가

※Start, Time out 화면 나타내기

※분/초 입력해서 타이머 실행

※최대 입력 숫자 59로 지정

 

component

  -Button.jsx

  -Input.jsx

page

  -Timer.jsx

css

  -Timer.css

 

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

 

page - <Timer.jsx>

import React, {useCallback, useEffect, useState} from 'react'
import '../css/Timer.css'
import Button from '../component/Button'
import Input from '../component/Input'

function Timer() {
  const MAX_TIME = 59 //최대 입력 숫자 지정

  const [timeOut, setTimeOut] = useState(false)
  const [startView, setStartView] = useState(true) //Start, Time out 화면 유무

  const [second, setSecond] = useState(0)
  const [minuts, setMinuts] = useState(0)

  const [secondInput, setSecondInput] = useState() //초 입력
  const [minutsInput, setMinutsInput] = useState() //분 입력

  const changeSecond = event => {
    setSecondInput(parseInt(event.target.value))
  }

  const changeMinuts = event => {
    setMinutsInput(parseInt(event.target.value))
  }

  const reduceSecond = () => setSecond(second => Math.max(second - 1, 0))
  const reduceMinuts = () => setMinuts(minuts => Math.max(minuts - 1, 0))

  const secondTimer = String(second).padStart(2, 0)
  const minutsTimer = String(minuts).padStart(2, 0)

  const timeDelay = useCallback(() => {
    setTimeout(() => {
      reduceMinuts()
      setSecond(59)
    }, 1000)
  }, [])

  const handleResetTimerButton = () => {
    if (secondInput === undefined || minutsInput === undefined) { //분/초를 입력 안했을 시
      alert('분/초를 입력해주세요.')
    } else if (secondInput > MAX_TIME || minutsInput > MAX_TIME) { //최대 59를 넘었을 시
      alert('최대 59까지 입력 가능합니다.')
    } else {
      setTimeOut(true)
      setSecond(secondInput)
      setMinuts(minutsInput)
    }
  }

  useEffect(() => {
    const reduce = setInterval(reduceSecond, 1000)
    return () => clearInterval(reduce)
  })

  useEffect(() => {
    if (second === 0) {
      timeDelay()
      if (minuts === 0) {
        setTimeOut(false)
        setStartView(false)
        setSecondInput()
        setMinutsInput()
      }
    }
  }, [second, minuts, timeDelay])

  useEffect(() => {
    setStartView(true)
  }, [])

  return (
    <div>
      {timeOut ? (
        <div>
          <h2>{`${minutsTimer} : ${secondTimer}`}</h2>
        </div>
      ) : (
        <div>
          <div>{startView ? <h2>Start!!!</h2> : <h2>Time Out!!!</h2>}</div>
          <div className="timerDiv">
            <Input
              type={'number'}
              value={minutsInput}
              placeholder={'분'}
              onChange={changeMinuts}
            />
            <Input
              className={'timerInput'}
              value={secondInput}
              type={'number'}
              placeholder={'초'}
              onChange={changeSecond}
            />
            <Button
              className={'timerButton'}
              name={'Start'}
              onClick={handleResetTimerButton}
            />
          </div>
        </div>
      )}
    </div>
  )
}

export default Timer

 

Timer.css

.timerDiv {
  display: flex;
  align-items: center;
}

.timerInput {
  margin-left: 10px;
}

.timerButton {
  margin-left: 10px;
}