file: use-is-mobile.md

# useIsMobile

현재 디바이스가 모바일인지 감지하는 React Hook입니다.


## 개요

useIsMobile은 현재 디바이스가 모바일인지 감지하는 React Hook입니다. 미디어 쿼리와 User Agent를 조합하여 정확한 모바일 감지를 제공합니다.

## Import

```tsx
import { useIsMobile } from '@inpock/ids';
```

## 기본 사용법

```tsx
function ResponsiveComponent() {
  const { isMobile, isLoading } = useIsMobile();

  if (isLoading) {
    return <Skeleton />;
  }

  return isMobile ? <MobileView /> : <DesktopView />;
}
```

## 반환 값

| Property | Type | Description |
|----------|------|-------------|
| `isMobile` | `boolean` | 모바일 디바이스 여부 |
| `isLoading` | `boolean` | 감지 진행 중 여부 (SSR 하이드레이션 대응) |

## 예시

### 조건부 렌더링

```tsx
function Navigation() {
  const { isMobile } = useIsMobile();

  return (
    <nav>
      {isMobile ? (
        <MobileMenu />
      ) : (
        <DesktopMenu />
      )}
    </nav>
  );
}
```

### 조건부 props

```tsx
function Card({ children }) {
  const { isMobile } = useIsMobile();

  return (
    <Box
      padding={isMobile ? 16 : 24}
      direction={isMobile ? 'column' : 'row'}
    >
      {children}
    </Box>
  );
}
```

### SSR 하이드레이션 처리

```tsx
function ResponsiveLayout() {
  const { isMobile, isLoading } = useIsMobile();

  // 로딩 중에는 기본 레이아웃 표시 (SSR과 일치)
  if (isLoading) {
    return <DefaultLayout />;
  }

  return isMobile ? <MobileLayout /> : <DesktopLayout />;
}
```

## 구현 세부사항

- **브레이크포인트**: 768px
- **감지 방식**: `matchMedia` API + User Agent 문자열 검사
- **SSR 대응**: 클라이언트 하이드레이션 전까지 `isLoading: true` 반환

## Best Practices

✅ **올바른 사용법**
- 레이아웃 분기에 사용
- isLoading 상태 처리로 하이드레이션 불일치 방지
- 모바일 전용 기능 활성화/비활성화에 사용

❌ **피해야 할 사용법**
- CSS 미디어 쿼리로 해결 가능한 스타일링에는 CSS 사용 권장
- 빈번한 리렌더링이 발생하는 컴포넌트에서 주의