유틸리티 훅

import {
  useInView,
  useMouse,
  useReducedMotion,
  useReducedMotionObject,
  useWindowSize,
} from '@hua-labs/motion-core'

function useInView<T extends HTMLElement = HTMLDivElement>(
  options?: InViewOptions
): InViewReturn<T>

interface InViewOptions {
  threshold?: number | number[]   // 기본값: 0
  rootMargin?: string             // 기본값: '0px'
  triggerOnce?: boolean           // 기본값: false
  initialInView?: boolean         // 기본값: false
}

interface InViewReturn<T extends HTMLElement = HTMLDivElement> {
  ref: RefObject<T | null>
  inView: boolean
  entry: IntersectionObserverEntry | null
}

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

function LazyImage() {
  const { ref, inView } = useInView({
    threshold: 0.1,
    triggerOnce: true
  })

  return (
    <div ref={ref}>
      {inView ? (
        <img src="/photo.jpg" alt="사진" />
      ) : (
        <div style={{ height: 300, background: '#f0f0f0' }} />
      )}
    </div>
  )
}

// 스크롤 애니메이션에 활용
function AnimatedSection() {
  const { ref, inView } = useInView({ threshold: 0.2 })

  return (
    <section
      ref={ref}
      style={{
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : 'translateY(20px)',
        transition: 'all 600ms ease-out'
      }}
    >
      섹션 내용
    </section>
  )
}

function useMouse(options?: MouseOptions): MouseReturn

interface MouseOptions {
  targetRef?: RefObject<HTMLElement | null>  // 특정 요소 내 상대 좌표 계산용
  throttle?: number                          // 업데이트 스로틀 (ms, 기본값: 0)
}

interface MouseReturn {
  x: number           // viewport 기준 X 좌표 (px)
  y: number           // viewport 기준 Y 좌표 (px)
  elementX: number    // 요소 내 상대 X 좌표 (0~1)
  elementY: number    // 요소 내 상대 Y 좌표 (0~1)
  isOver: boolean     // 마우스가 타겟 요소 위에 있는지 여부
}

import { useRef } from 'react'
import { useMouse } from '@hua-labs/motion-core'

function MouseParallax() {
  const containerRef = useRef<HTMLDivElement>(null)
  const { elementX, elementY } = useMouse({
    targetRef: containerRef,
    throttle: 16  // ~60fps
  })

  const offsetX = (elementX - 0.5) * 20  // -10 ~ 10
  const offsetY = (elementY - 0.5) * 20

  return (
    <div ref={containerRef} style={{ position: 'relative', overflow: 'hidden' }}>
      <div
        style={{
          transform: `translate(${offsetX}px, ${offsetY}px)`,
          transition: 'transform 100ms ease-out'
        }}
      >
        패럴랙스 레이어
      </div>
    </div>
  )
}

// 전역 마우스 위치
function CursorTracker() {
  const { x, y } = useMouse()

  return (
    <div
      style={{
        position: 'fixed',
        left: x - 10,
        top: y - 10,
        width: 20,
        height: 20,
        borderRadius: '50%',
        background: 'rgba(0,0,0,0.3)',
        pointerEvents: 'none'
      }}
    />
  )
}

function useReducedMotion(): boolean

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

function AnimatedBanner() {
  const prefersReducedMotion = useReducedMotion()

  return (
    <div
      style={{
        animation: prefersReducedMotion
          ? 'none'
          : 'slideIn 600ms ease-out forwards'
      }}
    >
      배너
    </div>
  )
}

function useReducedMotionObject(): { prefersReducedMotion: boolean }

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

function LegacyComponent() {
  const { prefersReducedMotion } = useReducedMotionObject()
  return <div>{prefersReducedMotion ? '모션 없음' : '모션 있음'}</div>
}

function useWindowSize(options?: WindowSizeOptions): WindowSizeReturn

interface WindowSizeOptions {
  debounce?: number       // 디바운스 시간 (ms, 기본값: 100)
  initialWidth?: number   // 초기 너비 (SSR용, 기본값: 0)
  initialHeight?: number  // 초기 높이 (SSR용, 기본값: 0)
}

interface WindowSizeReturn {
  width: number     // 현재 윈도우 너비 (px)
  height: number    // 현재 윈도우 높이 (px)
  isMounted: boolean // 클라이언트 마운트 여부
}

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

function ResponsiveComponent() {
  const { width, height, isMounted } = useWindowSize({ debounce: 200 })

  if (!isMounted) return null  // SSR 대응

  const isMobile = width < 768

  return (
    <div>
      <p>뷰포트: {width} × {height}</p>
      <p>{isMobile ? '모바일' : '데스크탑'}</p>
    </div>
  )
}