[issue] setInterval을 어떻게 처리해야 깔끔할까요? about dailyreceipt-fe-web HOT 2 CLOSED

import { useState, useEffect } from "react";
import min25 from "assets/images/25min.png";
import min20 from "assets/images/20min.png";
import min15 from "assets/images/15min.png";
import min10 from "assets/images/10min.png";
import min5 from "assets/images/5min.png";

/**
 * 5/10/15/20/25분 단위로 줄어드는 시간에 맞춰 이미지 변화시키는 함수
 * transition을 이용해서 자연스럽게 이미지가 바뀌게끔 하고 싶은데 어떻게 해야될지 모르겠어요.ㅠ
 * 아직 라우팅에 서툴러서 이 내용을 브라우저단에서 확인하고 싶은데 어떻게 해야할지 잘 모르겠네여..미생을 구해쥬세여 선배님들 ㅎㅎ ㅠ
 */

export function TimerImage() {
  const timeStamp = [min5, min10, min15, min20, min25];
  const [timerImage, setTimerImage] = useState(timeStamp[0]);
  const [count, setCount] = useState(0);
  const increment = () => setCount((prevCount) => prevCount + 1);

  useEffect(() => {
    console.log(count);
    const interval = setInterval(() => {
      if (count % 5 === 0) {
        setTimerImage(timeStamp[count / 5]);
      }
      increment();
    }, 1000);
    return () => clearInterval(interval);
  }, [count]);

  return (
    <div>
      <img src={timerImage} alt={"temp"} />
    </div>
  );
}