@makestory/gesture-manager

@makestory/gesture-manager

@makestory/gesture-manager는 웹 애플리케이션에서 다양한 제스처(터치 및 클릭 동작)를 쉽게 관리할 수 있도록 도와주는 경량화된 라이브러리입니다. 단일 탭(Single Tap), 더블 탭(Double Tap), 플릭(Flick) 등과 같은 제스처를 감지하여 효율적으로 처리할 수 있습니다.

📦 설치

npm install @makestory/gesture-manager

또는

yarn add @makestory/gesture-manager

🚀 특징

• 터치 이벤트 지원: 모바일 환경에서의 터치 제스처 감지.
• 제스처 타입: press, singleTap, doubleTap, flickLeftToRight, flickRightToLeft, flickTopToBottom, flickBottomToTop 등 다양한 이벤트 지원.
• 유연한 API: 손쉬운 이벤트 등록 및 해제.
• 경량성: 최소한의 코드로 빠르게 동작.

✨ 사용법

이벤트 등록

import GestureManager from '@makestory/gesture-manager';

// 제스처 이벤트 등록
GestureManager.on('.gesture-target', {
  singleTap: event => {
    console.log('Single tap detected!', event);
  },
  doubleTap: event => {
    console.log('Double tap detected!', event);
  },
  flickLeftToRight: event => {
    console.log('Flick from left to right!', event);
  },
});

이벤트 해제

특정 제스처 이벤트를 해제하려면 다음과 같이 사용할 수 있습니다:

// 모든 제스처 이벤트 해제
GestureManager.off('.gesture-target');

// 특정 제스처 이벤트 해제
GestureManager.off('.gesture-target', 'doubleTap');

📖 API

GestureManager.on(selector: string, handler: object | function)

• selector: 이벤트를 등록할 DOM 요소를 선택하는 CSS 셀렉터 문자열.
• handler: 제스처 이벤트 핸들러 객체 또는 함수. 객체는 각 이벤트 타입(singleTap, doubleTap 등)을 키로 가지며, 해당하는 콜백 함수를 값으로 가집니다.

GestureManager.off(selector: string, eventType?: string)

• selector: 이벤트를 해제할 DOM 요소를 선택하는 CSS 셀렉터 문자열.
• eventType: 선택적으로 해제할 이벤트 타입을 지정 (press, singleTap, doubleTap 등). 지정하지 않으면 모든 이벤트가 해제됩니다.

📋 지원하는 제스처 타입

• press: 길게 누름.
• singleTap: 한 번 가볍게 터치.
• doubleTap: 두 번 빠르게 터치.
• flickLeftToRight: 왼쪽에서 오른쪽으로 빠르게 스와이프.
• flickRightToLeft: 오른쪽에서 왼쪽으로 빠르게 스와이프.
• flickTopToBottom: 위에서 아래로 빠르게 스와이프.
• flickBottomToTop: 아래에서 위로 빠르게 스와이프.

🔧 브라우저 지원

@makestory/gesture-manager는 최신 브라우저와 모바일 환경을 지원합니다. 터치 이벤트를 기본으로 하며, 터치를 지원하지 않는 환경에서는 마우스 이벤트로 대체하여 동작합니다.