Pointer Events 하나로 터치·마우스 드래그의 상하좌우 스와이프를 감지하는 훅.
한 줄 요약
bind 객체를 타겟에 펼쳐 붙이면 상하좌우 스와이프 콜백과 실시간 드래그 오프셋방향을 주는 훅입니다.
손가락 제스처로 화면 요소를 넘기거나 치워야 할 때 카드 스택(수락/거절), 모바일 갤러리 넘김, 바텀시트 dismiss 등.
pointerdown에서 시작점을 잡고 pointer capture한다.
pointermove로 누적 delta와 우세 축 방향을 추적한다.
pointerup에서 threshold를 넘으면 해당 방향 콜백을 부른다.
콜백은 ref에 보관해 매 렌더 최신 핸들러를 호출한다.
우세 축(x vs y) 판정으로 대각선 흔들림을 흡수한다.
세로 스크롤과 충돌하면 touch-action으로 의도를 명시한다.
마우스 사용자를 위해 화면 버튼 등 대체 경로도 둔다.
Tinder식 카드 덱
모바일 이미지 캐러셀바텀시트
import type { Metadata } from "next";
import { UseSwipeDemo } from "./-components/UseSwipeDemo";
export const metadata: Metadata = {
title: "useSwipe — 방향 스와이프 감지 훅 (데모)",
description:
"Pointer Events로 상하좌우 스와이프를 감지하는 useSwipe 훅. 카드를 밀어 수락/거절하는 Tinder식 인터랙션, 실시간 드래그 오프셋·방향 피드백, threshold 조절을 보여줍니다.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-white">
<UseSwipeDemo />
</main>
);
}