@makecode/gesture-manager

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

📦 설치

``bash
npm install @makecode/gesture-manager
`

또는

`bash
yarn add @makecode/gesture-manager
`

🚀 특징

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

✨ 사용법

$3

`typescript
import GestureManager from '@makecode/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);
},
});
`

$3

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

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

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

📖 API

$3

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

$3

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

📋 지원하는 제스처 타입

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

🔧 브라우저 지원

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