사용자 활동이 일정 시간 없으면 화면을 dim하거나 세션을 잠그기 위한 훅
은행관리자 대시보드처럼 보안이 중요한 화면에선 일정 시간 무활동이면 자동 잠금이 표준입니다. useIdle(timeoutMs)는 mousemove mousedown keydown
touchstart wheel scroll 6개 활동 이벤트를 한 번에 구독하고, 마지막 활동 후 timeoutMs가 경과하면 true를 반환합니다. 활동 발생 setTimeout 리셋 즉시 idle=false로 복귀 다시 카운트 시작의 패턴을 한 effect 안에서 처리합니다. cleanup도 모두 챙겨, timeout이 살아있는 채 unmount되거나 timeoutMs prop이 바뀌면 안전하게 재시작합니다.
데모에서는 3/5/10/30초 preset으로 dimming 발생 시점을 직접 골라 볼 수 있고, idle 상태가 되면 화면 전체가 어두워지면서 "Are you still there?" 오버레이가 뜹니다. 어디든 한 번 움직이면 즉시 깨어납니다.
import type { Metadata } from "next";
import { UseIdleDemo } from "./-components/UseIdleDemo";
export const metadata: Metadata = {
title: "useIdle — 무활동 감지 훅 (데모)",
description: "mousemove·keydown 등 사용자 활동이 일정 시간 없으면 idle을 반환하는 훅의 라이브 시연.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="min-h-[100dvh] bg-white flex items-center justify-center">
<UseIdleDemo />
</main>
);
}