제스처 훅

import { useGesture, useGestureMotion } from '@hua-labs/motion-core'

function useGesture(options?: GestureOptions): GestureReturn

interface GestureReturn {
  // 상태
  isActive: boolean
  gesture: string | null    // 'pan' | 'pinch' | 'rotate' | 'swipe-up' | ...
  scale: number
  rotation: number
  deltaX: number
  deltaY: number
  distance: number
  velocity: number

  // 제어
  start: () => void
  stop: () => void
  reset: () => void

  // 이벤트 핸들러 (JSX에 직접 전달)
  onTouchStart: (e: React.TouchEvent | TouchEvent) => void
  onTouchMove: (e: React.TouchEvent | TouchEvent) => void
  onTouchEnd: (e: React.TouchEvent | TouchEvent) => void
  onMouseDown: (e: React.MouseEvent | MouseEvent) => void
  onMouseMove: (e: React.MouseEvent | MouseEvent) => void
  onMouseUp: (e: React.MouseEvent | MouseEvent) => void
}

import { useGesture } from '@hua-labs/motion-core'

function SwipeCard() {
  const gesture = useGesture({
    swipeThreshold: 80,
    onSwipe: (direction, distance, velocity) => {
      console.log(`${direction} 스와이프: ${distance}px, ${velocity}px/s`)
    }
  })

  return (
    <div
      onTouchStart={gesture.onTouchStart}
      onTouchMove={gesture.onTouchMove}
      onTouchEnd={gesture.onTouchEnd}
      onMouseDown={gesture.onMouseDown}
      onMouseMove={gesture.onMouseMove}
      onMouseUp={gesture.onMouseUp}
      style={{ userSelect: 'none', padding: 40 }}
    >
      스와이프해 보세요
    </div>
  )
}

import { useGesture } from '@hua-labs/motion-core'

function PinchImage() {
  const { scale, onTouchStart, onTouchMove, onTouchEnd } = useGesture({
    onPinch: (scale) => {
      console.log('스케일:', scale)
    }
  })

  return (
    <img
      src="/photo.jpg"
      style={{ transform: `scale(${scale})`, touchAction: 'none' }}
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
    />
  )
}

import { useGesture } from '@hua-labs/motion-core'

function TapArea() {
  const gesture = useGesture({
    onTap: (x, y) => console.log(`탭: ${x}, ${y}`),
    onDoubleTap: (x, y) => console.log(`더블탭: ${x}, ${y}`),
    onLongPress: (x, y) => console.log(`롱프레스: ${x}, ${y}`)
  })

  return (
    <div
      onTouchStart={gesture.onTouchStart}
      onTouchEnd={gesture.onTouchEnd}
      onMouseDown={gesture.onMouseDown}
      onMouseUp={gesture.onMouseUp}
    >
      터치 영역
    </div>
  )
}

function useGestureMotion(options: GestureMotionOptions): {
  ref: RefObject<HTMLElement | null>
  gestureState: GestureState
  motionStyle: CSSProperties
  isActive: boolean
}

interface GestureMotionOptions {
  gestureType: 'hover' | 'drag' | 'pinch' | 'swipe' | 'tilt'
  duration?: number         // CSS transition 지속 시간 (기본값: 300ms)
  easing?: string           // CSS 이징 (기본값: 'ease-out')
  sensitivity?: number      // 감도 배율 (기본값: 1)
  enabled?: boolean         // 활성화 (기본값: true)
  onGestureStart?: () => void
  onGestureEnd?: () => void
}

interface GestureState {
  isActive: boolean
  x: number
  y: number
  deltaX: number
  deltaY: number
  scale: number
  rotation: number
}

import { useGestureMotion } from '@hua-labs/motion-core'

function DraggableCard() {
  const { ref, motionStyle, isActive } = useGestureMotion({
    gestureType: 'drag',
    sensitivity: 1.5,
    onGestureStart: () => console.log('드래그 시작'),
    onGestureEnd: () => console.log('드래그 종료')
  })

  return (
    <div
      ref={ref}
      style={{
        ...motionStyle,
        width: 200,
        height: 200,
        background: isActive ? '#e0f2fe' : '#f0f9ff',
        cursor: 'grab'
      }}
    >
      드래그해 보세요
    </div>
  )
}

import { useGestureMotion } from '@hua-labs/motion-core'

function TiltCard() {
  const { ref, motionStyle } = useGestureMotion({
    gestureType: 'tilt',
    sensitivity: 2
  })

  return (
    <div ref={ref} style={{ ...motionStyle, perspective: 1000 }}>
      기울여 보세요
    </div>
  )
}