Pointer Events로 press-and-hold를 감지하고, 일찍 떼거나 움직이면 취소하는 재사용 훅.
한 줄 요약
요소를 일정 시간 누르고 있으면 콜백을 실행하고, 그 전에 떼거나 일정 거리 이상 움직이면 취소하는 훅입니다.
단순 클릭과 구분되는 '버티는' 입력이 필요할 때 모바일의 꾹 눌러 삭제/즐겨찾기, 실수 방지가 필요한 위험 액션, 컨텍스트 메뉴 트리거 등.
pointerdown에서 타이머를 시작한다.
delay가 지나면 콜백을 발화한다.
일찍 떼거나 moveThreshold 이상 움직이면 타이머를 취소한다.
최신 콜백옵션을 ref에 보관해 stale closure를 막는다.
타이머 cleanup을 빠뜨리면 언마운트 후 발화한다.
터치 스크롤과 충돌하지 않게 move 임계값을 둔다.
마우스터치펜을 한 번에 처리하려면 Pointer Events가 표준.
꾹 눌러 삭제/보관 같은 모바일 제스처
위험 동작의 hold-to-confirm 버튼
import type { Metadata } from "next";
import { UseLongPressDemo } from "./-components/UseLongPressDemo";
export const metadata: Metadata = {
title: "useLongPress — 길게 누르기 감지 훅 (데모)",
description:
"요소를 일정 시간 누르고 있으면 발화하는 useLongPress 훅. Pointer Events로 터치·마우스를 함께 처리하고, 일찍 떼거나 움직이면 취소합니다.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-white">
<UseLongPressDemo />
</main>
);
}