K
KRYFT Problem Bank
모바일 보통 코딩

터치 제스처 구현

스와이프, 핀치 줌 등 제스처 처리

40분
85점
#3730

문제 설명

웹에서 모바일 터치 제스처를 구현하세요.

구현할 제스처

  • Tap (탭)
  • Double Tap (더블 탭)
  • Long Press (길게 누르기)
  • Swipe (스와이프 - 4방향)
  • Pinch Zoom (핀치 줌)
  • Rotate (회전)

요구사항

  • TouchEvent API 사용
  • 마우스 이벤트 폴백
  • 제스처 인식 임계값 설정
  • 이벤트 위임 지원
  • 메모리 누수 방지

인터페이스


const gesture = new GestureHandler(element);

gesture.on("tap", (e) => console.log("tapped"));
gesture.on("swipe", (e) => console.log(e.direction));
gesture.on("pinch", (e) => console.log(e.scale));

gesture.destroy();  // 정리

평가 기준

  • 제스처 인식 정확도
  • 성능 (부드러움)
  • API 설계
실행 버튼을 눌러 코드를 실행하세요.