COMPLETE TIMER

타이머 기능 최종 완성본

 

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

 

타이머 최종 완성본