모바일 UX 개선: Pull to Refresh, Swipe Actions, Haptic Feedback

🤖 1705 in / 728 out / 2433 total tokens

v0.29.0에서 모바일 사용자 경험을 대폭 개선했다. 당겨서 새로고침, 스와이프 액션, 햅틱 진동 피드백을 지원하는 세 가지 핵심 기능을 추가했다.

usePullToRefresh 훅은 스크롤이 최상단일 때 아래로 당기는 제스처를 감지해 onRefresh 콜백을 실행한다. threshold 설정으로 트리거 거리를 조절할 수 있다. useHaptic 훅은 navigator.vibrate API를 활용해 tap, success, error 등 다양한 진동 패턴을 제공하며 미지원 기기에서는 조용히 무시된다.

SwipeableCard 컴포넌트는 터치 제스처로 좌우 스와이프 액션을 처리한다. 왼쪽 스와이프는 즐겨찾기(노란색), 오른쪽은 공유(파란색) 같은 빠른 액션에 활용할 수 있다. 배경색이 스와이프 거리에 따라 점진적으로 노출되는 시각적 피드백도 구현했다.

const HAPTIC_PATTERNS = {
  tap: [10],
  success: [10, 50, 10],
  error: [50, 100, 50],
  warning: [30],
  medium: [20],
  heavy: [30, 10, 30],
} as const;
 
// useHaptic 사용 예시
const { trigger } = useHaptic();
onSwipeLeft={() => { trigger('medium'); toggleFavorite(); }}

세 기능 모두 훅이나 컴포넌트 형태로 캡슐화해 재사용성을 높였고, vitest로 단위 테스트도 작성했다. 모바일에서 네이티브 앱 같은 경험을 주는 게 목표다.