npm package: @ohbyeongmun/react-native-webview-sdk
Description: React Native WebView 통합 SDK로서 다음 기능을 제공합니다:
Latest version: 1.0.8

# 🚀 React Native WebView SDK

React Native WebView 통합 SDK로서 다음 기능을 제공합니다:

- 🔗 **Bridge** — Native ↔ Web 양방향 통신
- 🔐 **Social Login** — Google / Kakao / Naver 통합 로그인
- 🔔 **Firebase Push** — Foreground & Background 알림 처리
- ⏪ **BackHandler** — Android 물리 뒤로가기 버튼 처리

---

## 📦 Installation

```bash
npm install @ohbyeongmun/react-native-webview-sdk
# OR
yarn add @ohbyeongmun/react-native-webview-sdk
```

---

## 🧭 Structure Overview

| Module    | Path           | Description |
|------------|----------------|--------------|
| Bridge    | `src/bridge`   | Native ↔ Web 통신 및 BackHandler |
| Auth      | `src/auth`     | Google / Kakao / Naver 로그인 |
| Firebase  | `src/firebase` | Firebase 푸시 알림 처리 |

---

## 🔧 Import Example

```ts
import { Bridge, Auth, Firebase } from "@ohbyeongmun/react-native-webview-sdk";
```

---

## 🧱 Bridge Example

```tsx
import React, { useRef, useEffect } from "react";
import { WebView } from "react-native-webview";
import { Bridge } from "@ohbyeongmun/react-native-webview-sdk";

const App = () => {
  const webviewRef = useRef<WebView>(null);

  useEffect(() => {
    Bridge.setWebViewRef(webviewRef);

    // 웹에서 보낸 이벤트 수신
    Bridge.on("web:ping", (data) => {
      console.log("📩 From Web:", data);
    });
  }, []);

  return <WebView ref={webviewRef} source={{ uri: "https://example.com" }} />;
};
```

---

## ⏪ BackHandler Example

```tsx
import React, { useRef, useState } from "react";
import { BackHandler } from "react-native";
import { WebView } from "react-native-webview";
import { handleBackPress } from "@ohbyeongmun/react-native-webview-sdk";

const App = () => {
  const webViewRef = useRef<WebView>(null);
  const [backPressCount, setBackPressCount] = useState(0);
  const [isRoot, setIsRoot] = useState(true);

  React.useEffect(() => {
    const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
      return handleBackPress(isRoot, backPressCount, setBackPressCount, webViewRef);
    });

    return () => backHandler.remove();
  }, [isRoot, backPressCount]);

  return <WebView ref={webViewRef} source={{ uri: "https://example.com" }} />;
};
```

✅ 기능 요약  
- 루트 페이지일 경우 “앱 종료 확인” 다이얼로그 표시  
- 루트가 아닐 경우 WebView 내 `goBack()` 호출  
- 2초 내 두 번 클릭 시 앱 종료  

---

## 🔐 Google Login

```ts
import { Auth } from "@ohbyeongmun/react-native-webview-sdk";

Auth.configureGoogleSignIn({
  webClientId: "YOUR_WEB_CLIENT_ID",
  iosClientId: "YOUR_IOS_CLIENT_ID",
});

// 로그인 실행
await Auth.googleLogin(webviewRef);
```

✅ 결과는 WebView로 전달됩니다:

```json
{
  "event": "auth:googleSuccess",
  "payload": {
    "user": { "id": "123", "email": "user@gmail.com" }
  }
}
```

---

## 🥪 Naver Login

```ts
import { Auth } from "@ohbyeongmun/react-native-webview-sdk";

Auth.initializeNaverLogin({
  appName: "MyApp",
  consumerKey: "YOUR_CLIENT_ID",
  consumerSecret: "YOUR_CLIENT_SECRET",
  serviceUrlSchemeIOS: "myapp",
});

// 로그인 실행
await Auth.onNaverLogin(webviewRef);
```

✅ 성공 시 WebView로 전달되는 메시지 예시:

```json
{
  "type": "naverLoginSuccess",
  "data": {
    "token": { "accessToken": "abcd1234" },
    "profile": { "email": "user@naver.com" }
  }
}
```

---

## 🔔 Firebase Push Notifications

```ts
import { Firebase } from "@ohbyeongmun/react-native-webview-sdk";

Firebase.initializeFirebasePush(webviewRef, {
  channelId: "메몬앱",
  channelName: "메몬 알림 채널",
  channelDescription: "메몬 관련 알림",
  defaultNoticeUrl: "https://metamonster.co.kr/notice",
  defaultTitle: "📢 메몬앱 알림",
});
```

✅ 주요 기능
- 푸시 권한 요청 (`requestUserPermission`)
- FCM 토큰 획득 (`getFcmToken`)
- Foreground / Background 알림 처리
- WebView로 이벤트 전달 (`firebasePushReceived`, `firebasePushNavigate`)

---

## 📚 Web Message Events

| Event | Description |
|--------|--------------|
| `firebasePushReceived` | 앱 실행 중 푸시 수신 |
| `firebasePushNavigate` | 알림 클릭 시 WebView 이동 |
| `auth:googleSuccess` | Google 로그인 성공 |
| `naverLoginSuccess` | Naver 로그인 성공 |

---

## 🏷 Keywords

```
react-native, webview, sdk, social-login, google-login, kakao-login, naver-login,
firebase, push-notification, bridge, typescript, backhandler
```

---

## 🧑‍💻 Maintainer
**Author:** @ohbyeongmun  
**License:** ISC  
**Version:** 1.0.8