[useCountdown] 초 단위 카운트다운 훅

제작 과정

한 줄 요약

{ seconds, isRunning, start, pause, reset }를 돌려주는 작은 훅. 실행 중일 때만 1초 간격으로 seconds를 줄이고, 0이 되면 스스로 멈춥니다.

이럴 때 필요해요

인증코드 재전송 대기(60초), OTP 만료, 세일 종료, 게임 제한시간처럼 '초가 줄어드는' UI가 필요할 때 컴포넌트마다 setInterval을 다시 짜지 않으려고.

어떻게 동작하나

isRunning이 true일 때만 1초 interval을 걸고, seconds를 1씩 감소.
seconds가 0에 닿으면 interval을 정리하고 isRunning을 false로(자동 정지).
start/pause/reset로 제어 reset(sec)으로 시작값을 바꿔 다시 채움.

놓치기 쉬운 것

effect 의존성은 isRunning만 seconds를 넣으면 매초 interval이 재생성돼 어긋남(함수형 업데이트로 줄임).
0 도달 시 정지를 훅 안에서 처리해야 화면이 음수로 내려가지 않음.
언마운트정지 시 interval cleanup 필수.

이런 곳에 써요

인증코드 재전송 카운트OTP 만료
플래시세일/이벤트 종료 타이머

import type { Metadata } from "next"; import { UseCountdownDemo } from "./-components/UseCountdownDemo"; export const metadata: Metadata = { title: "useCountdown 훅 (데모)", description: "초 단위 카운트다운 훅 useCountdown — isRunning 동안 1초마다 감소, 0에서 자동 정지. start/pause/reset 제어 + 진행 링(SVG stroke-dashoffset)으로 시각화.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-rose-50/40"> <UseCountdownDemo /> </main> ); }