npm package: @hua-labs/animation
Description: HUA Animation - 외부 의존성 없는 순수 TypeScript
Author: HUA Labs
Latest version: 0.1.1
Deprecated: ⚠️ DEPRECATED: This package has been renamed to @hua-labs/motion-core. Please migrate to @hua-labs/motion-core for the latest features and updates. See: https://github.com/HUA-Labs/HUA-Labs-public

# HUA Animation SDK

순수 TypeScript로 구현된 애니메이션 라이브러리입니다. 외부 의존성 없이 모든 애니메이션 효과를 제공합니다.

## 설치

```bash
pnpm add @hua-labs/animation
```

## 기본 사용법

### 가장 간단한 애니메이션

```tsx
import { useFadeIn } from '@hua-labs/animation'

function SimpleAnimation() {
  const animation = useFadeIn() // 설정 없이 바로 사용!

  return (
    <div ref={animation.ref} className="w-20 h-20 bg-blue-500 rounded">
      페이드인! ✨
    </div>
  )
}
```

### 기본 애니메이션 훅들

```tsx
import { useFadeIn, useSlideUp, useBounceIn, useScaleIn } from '@hua-labs/animation'

function AnimatedCard() {
  const fadeIn = useFadeIn({ delay: 0.2 })
  const slideUp = useSlideUp({ delay: 0.4 })
  const bounceIn = useBounceIn({ delay: 0.6 })
  const scaleIn = useScaleIn({ delay: 0.8 })

  return (
    <div className="space-y-4">
      <div ref={fadeIn.ref} style={fadeIn.style}>페이드인</div>
      <div ref={slideUp.ref} style={slideUp.style}>슬라이드업</div>
      <div ref={bounceIn.ref} style={bounceIn.style}>바운스인</div>
      <div ref={scaleIn.ref} style={scaleIn.style}>스케일인</div>
    </div>
  )
}
```

### 스프링 애니메이션

```tsx
import { useSpring } from '@hua-labs/animation'

function SpringButton() {
  const spring = useSpring({
    from: { scale: 1 },
    to: { scale: 1.1 },
    config: { tension: 300, friction: 20 }
  })

  return (
    <button 
      ref={spring.ref}
      style={spring.style}
      className="px-4 py-2 bg-blue-500 text-white rounded"
    >
      스프링 버튼
    </button>
  )
}
```

### 반복 애니메이션

```tsx
import { useRepeat } from '@hua-labs/animation'

function PulsingIcon() {
  const pulse = useRepeat({
    effect: 'pulse',
    duration: 2000,
    delay: 0.1
  })

  return (
    <div ref={pulse.ref} style={pulse.style}>
      🔴
    </div>
  )
}
```

## 고급 기능

### 스프링 애니메이션

```tsx
import { useSpring } from '@hua-labs/animation'

function SpringButton() {
  const spring = useSpring({
    from: 0,
    to: 1,
    type: 'bounce'
  })

  return (
    <div ref={spring.ref} className="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded">
      스프링! 🌊
    </div>
  )
}
```

### 커스텀 애니메이션

```tsx
import { useMotion } from '@hua-labs/animation'

function CustomAnimation() {
  const animation = useMotion(
    { opacity: 0, scale: 0.5, rotate: -180 },
    { opacity: 1, scale: 1, rotate: 0 },
    { duration: 1000, ease: 'easeOutBack' }
  )

  return (
    <div ref={animation.ref} className="w-20 h-20 bg-green-500 rounded">
      커스텀! 🎨
    </div>
  )
}
```

## 특징

- ✅ **외부 의존성 없음**: 순수 TypeScript 구현
- ✅ **타입 안전성**: 완전한 TypeScript 지원
- ✅ **성능 최적화**: 60fps 보장
- ✅ **메모리 효율성**: 자동 정리 및 최적화
- ✅ **접근성**: 스크린 리더 지원
- ✅ **반응형**: 모든 디바이스 지원
- ✅ **초보자 친화적**: 설정 없이 바로 사용 가능
- ✅ **에러 처리**: 안전한 애니메이션 실행

## 🎯 초보자 가이드

### ✅ 시작하기 전에 확인하세요
- [ ] Node.js가 설치되어 있나요? (v16 이상)
- [ ] React 프로젝트가 있나요? (Next.js, Create React App 등)
- [ ] TypeScript를 사용하고 있나요? (권장)

### 🚀 단계별 진행
1. **첫 번째**: useFadeIn으로 간단한 애니메이션 만들기
2. **두 번째**: useSlideUp으로 슬라이드 효과 추가하기
3. **세 번째**: useRepeat으로 반복 애니메이션 시도하기
4. **네 번째**: useSpring으로 물리 기반 애니메이션 도전하기

### 첫 번째 애니메이션 만들기

1. **설치하기**
```bash
npm install @hua-labs/animation
```

2. **가장 간단한 애니메이션**
```tsx
import { useFadeIn } from '@hua-labs/animation'

function MyFirstAnimation() {
  const animation = useFadeIn() // 설정 없이!

  return (
    <div ref={animation.ref} className="p-4 bg-blue-500 text-white rounded">
      안녕하세요! ✨
    </div>
  )
}
```

**💡 ref란?** 
- `ref={animation.ref}`는 애니메이션을 적용할 요소를 지정하는 방법입니다
- 복사해서 그대로 사용하시면 됩니다!

3. **호버 효과 추가하기**
```tsx
import { useRepeat } from '@hua-labs/animation'

function HoverButton() {
  const animation = useRepeat({ effect: 'pulse' })

  return (
    <button ref={animation.ref} className="px-4 py-2 bg-green-500 text-white rounded">
      마우스를 올려보세요! 🖱️
    </button>
  )
}
```

### 🎨 애니메이션 종류

| 애니메이션 | 설명 | 사용법 |
|-----------|------|--------|
| `useFadeIn` | 부드럽게 나타나기 | `useFadeIn()` |
| `useSlideUp` | 아래에서 위로 슬라이드 | `useSlideUp()` |
| `useBounceIn` | 바운스하며 나타나기 | `useBounceIn()` |
| `useScaleIn` | 크기가 커지며 나타나기 | `useScaleIn()` |
| `useSpring` | 물리 기반 애니메이션 | `useSpring({ type: 'bounce' })` |
| `useRepeat` | 반복 애니메이션 | `useRepeat({ effect: 'pulse' })` |

### 💡 팁

- **기본값 활용**: 설정 없이 바로 사용 가능
- **하나씩 추가**: 복잡한 애니메이션은 단계적으로
- **성능 고려**: 너무 많은 애니메이션은 피하기

## API 문서

자세한 API 문서는 [docs/](./docs/) 폴더를 참조하세요.