# JavaScript Bridge

SDK의 오퍼월은 WebView로 작동하며, WebView와 앱 간 통신을 위해 JavaScript Bridge를 사용합니다.

## 개요

일반적으로는 JavaScript Bridge를 직접 다룰 필요가 없습니다. SDK가 자동으로 처리합니다. 하지만 고급 커스터마이징이 필요한 경우 알아두면 유용합니다.

## 지원하는 메시지 타입

WebView에서 앱으로 보낼 수 있는 메시지 타입:

* `openWebView` — 서브 WebView 열기
* `close` — WebView 닫기
* `customEvent` — 커스텀 이벤트 (v1.0.24+)
* `dataRequest` — 데이터 요청 (v1.0.24+)
* `missionCompleted` — 미션 완료 알림
* `missionProgressed` — 미션 진행 알림
* `quizCompleted` — 퀴즈 완료 알림

대부분은 SDK가 내부적으로 처리하며, 앱 코드에서 직접 받아 처리할 수 있는 건 `customEvent`와 `dataRequest`입니다.

## 커스텀 이벤트 처리

WebView가 보내는 커스텀 이벤트를 앱에서 받아 처리하려면 `AdchainOfferwallView`의 `onCustomEvent` prop을 사용합니다:

```typescript
import { AdchainOfferwallView } from '@1selfworld/adchain-sdk-core-react-native';

<AdchainOfferwallView
  style={{ flex: 1 }}
  placementId="custom_offerwall"
  onCustomEvent={(eventType, payload) => {
    console.log('커스텀 이벤트:', eventType, payload);

    // 예: 화면 이동
    if (eventType === 'navigate') {
      navigation.navigate(payload.screen, payload.params);
    }
  }}
/>
```

이벤트 타입과 페이로드 형식은 애드체인 팀과 사전 협의하여 정의합니다.

## 데이터 요청 처리

WebView가 앱에서 데이터를 가져가야 할 때 `onDataRequest`로 응답합니다:

```typescript
<AdchainOfferwallView
  style={{ flex: 1 }}
  placementId="custom_offerwall"
  onDataRequest={(requestType, params) => {
    if (requestType === 'user_points') {
      return { points: 12345, currency: 'KRW' };
    } else if (requestType === 'user_profile') {
      return { userId: 'user-123', nickname: 'Player1' };
    }
    return null;
  }}
/>
```

## 전체 화면 오퍼월과 커스텀 이벤트

`openOfferwall()`로 여는 전체 화면 오퍼월은 커스텀 이벤트 콜백을 지원하지 않습니다.

WebView ↔ 앱 양방향 통신이 필요하면 `<AdchainOfferwallView>` 임베디드 컴포넌트의 `onCustomEvent` / `onDataRequest` props를 사용하세요. 자세한 내용은 [임베디드 오퍼월 통합](/undefined-5/embedded-offerwall-integration.md)을 참고하세요.

## 보안 고려사항

JavaScript Bridge는 WebView와 앱 간 통신을 가능하게 하지만, 보안에 주의해야 합니다:

* 민감한 데이터(토큰, 비밀번호 등)를 전달하지 마세요
* WebView에서 받은 입력을 검증하세요
* HTTPS만 사용하세요

SDK는 기본적으로 안전하게 설정되어 있습니다.

## 디버깅

JavaScript Bridge 메시지를 로그로 보려면 Metro 콘솔에서 `console.log`로 직접 찍는 게 가장 빠릅니다. 네이티브 레벨 로그가 필요하면 `npx react-native log-android` 또는 `npx react-native log-ios`로 네이티브 출력을 확인할 수 있습니다 (`AdChain` 키워드로 필터링).

## 다음 단계

* [오프라인 지원](/undefined-3/offline-support.md)
* [API 레퍼런스](/api/react-native.md)
* [문제 해결](/undefined-6/common-issues.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://adchain-doc.1self.world/undefined-3/javascript-bridge.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.