16. 타이머 만들어 보았다.

import React, { Fragment, useRef } from "react";
import { useState, useEffect } from "react";

let initial = true;

function Solution() {
  const inputMin = useRef();
  const inputSec = useRef();
  const [min, setMin] = useState(0);
  const [sec, setSec] = useState(0);

  // useRef 로 받아오고, 계산을 다시 해서 min ,sec 로 넣어줘야겠다.
  const [start, setStart] = useState(false);

  const startTimer = () => {
    setStart(true);
    const inputMinData = inputMin.current.value;
    const inputSecData = inputSec.current.value;

    const total = +inputMinData * 60 + +inputSecData;

    setMin(Math.floor(total / 60));
    setSec(total % 60);
  };

  useEffect(() => {
    if (initial) {
      initial = false;
      return;
    }
    let count;
    if (start) {
      count = setInterval(() => {
        if (parseInt(sec) > 0) {
          setSec(+sec - 1);
        } else if (parseInt(sec) === 0) {
          if (parseInt(min) !== 0) {
            setMin(parseInt(min) - 1);
            setSec(59);
          }
        } else {
          clearInterval(count);
        }
      }, 1000);
    }
    return () => clearInterval(count);
  }, [start, sec, min]);

  const resetHandler = () => {
    setMin(0);
    setSec(0);
    setStart(false);
  };

  return (
    <Fragment>
      <label>
        <input type="number" ref={inputMin} />
      </label>
      <label>
        <input type="number" ref={inputSec} />
        Seconds
      </label>

      <button onClick={startTimer}>START</button>
      <button onClick={() => setStart((prev) => !prev)}>PAUSE / RESUME</button>
      <button onClick={resetHandler}>RESET</button>

      <h1 data-testid="running-clock">
        {String(min).length <= 1 ? 0 + String(min) : min} :
        {String(sec).length <= 1 ? 0 + String(sec) : sec}
      </h1>
    </Fragment>
  );
}

export default Solution;