Pokemon Card Flip - 10.framer-motion으로 타이머 바 만들기

hoj0806 2025. 3. 20. 20:47

카드 맞추기 게임에 타이머를 추가해 시간이 모두 흘렀을 경우 게임이 종료되는 기능을 만들어보자

import { motion } from "framer-motion";

const GameTimer: React.FC<{
  duration: number;
  setIsTimeOut: React.Dispatch<React.SetStateAction<boolean>>;
}> = ({ setIsTimeOut, duration }) => {
  return (
    <div className='mx-auto w-[1200px]'>
      <motion.div
        className='h-[20px] bg-red-500'
        initial={{ width: "100%" }}
        animate={{ width: "0%" }}
        transition={{ duration, ease: "linear" }}
        onAnimationComplete={() => {
          setIsTimeOut(true);
        }}
      />
    </div>
  );
};

export default GameTimer;

framer-motion 라이브러리를 통해 번거롭게 setTimeOut을 사용하지 않고 타이머바를 만들수 있었다

animate를 통해 initial 상태에서 어떻게 애니메이션이 진행될것인지 정의할수 있다

그리고 transition의 duration 값을 통해 몇초동안 해당 애니메이션이 진행될지 설정해줄수 있다

duration에 60을 넣는다면 타이머 바의 크기가 100% 에서 0%가지 줄어드는게 60초동안 진행된다는것이다

또한 onAnimationComplete를 통해 애니메이션이 종료된 후 동작할 코드를 작성해줄수 있다

나는 state를 이용해 타이머가 끝났는지 여부를 확인했다 애니메이션이 끝나면 isTimeOut값을 true로 변경시킨다

  const [isTimeOut, setIsTimeOut] = useState(false);
 
 <GameTimer setIsTimeOut={setIsTimeOut} duration={60} />

부모 컴포넌트에 GameTimer 컴포넌트를 작성한뒤 duration에 60, istimeOut를 변경하는 함수를 props로 보내줬다