> For the complete documentation index, see [llms.txt](https://adpopcornssp.gitbook.io/ssp-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adpopcornssp.gitbook.io/ssp-sdk/sdk/react-native/undefined-4.md).

# 리워드 비디오 광고

## 1. 인스턴스 생성

placementId를 파라미터로 넘겨주고 리워드비디오 광고 관련 인스턴스를 생성한다.

```typescript
AdPopcornRewardVideoAd.createInstance('YOUR_APP_KEY', 'PLACEMENT_ID');
```

## 2. 광고 요청

리워드 비디오  광고 노출을 원하는 시점에 <mark style="color:red;">`loadAd()`</mark> API를 호출하여 서버에 광고를 요청합니다.

```typescript
AdPopcornRewardVideoAd.loadAd('PLACEMENT_ID');
```

## 3. 광고 노출

리워드비디오 광고 노출 시점에 <mark style="color:red;">`showAd()`</mark> API를 추가하여 광고를 노출합니다.

```typescript
AdPopcornRewardVideoAd.showAd('PLACEMENT_ID');
```

## 4. 이벤트 연동

```typescript
    // Reward Video 이벤트
    const rvLoadedSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoAdLoaded, (e) => console.log('[RewardVideo] Loaded:', e.placementId));
    const rvFailedSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoAdLoadFailed, (e) => console.log('[RewardVideo] LoadFailed:', e.placementId, e.errorCode, e.errorMessage));
    const rvOpenedSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoAdOpened, (e) => console.log('[RewardVideo] Opened:', e.placementId));
    const rvOpenFailSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoAdOpenFalied, (e) => console.log('[RewardVideo] OpenFailed:', e.placementId));
    const rvClosedSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoAdClosed, (e) => console.log('[RewardVideo] Closed:', e.placementId));
    const rvClickedSub = Platform.OS === 'android' ? AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoAdClicked, (e) => console.log('[RewardVideo] Clicked:', e.placementId)) : null;
    const rvCompletedSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoPlayCompleted, (e) => console.log('[RewardVideo] PlayCompleted:', e.placementId));
    const rvPlusSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardPlusCompleted, (e) => console.log('[RewardVideo] RewardPlusCompleted:', e.resultCode, e.reward));

```

| 이벤트                                                          | 설명                        |
| ------------------------------------------------------------ | ------------------------- |
| <mark style="color:red;">`OnRewardVideoAdLoaded`</mark>      | 리워드 비디오 로딩 성공             |
| ㄴevent.placementId                                           | 리워드 비디오 로딩 성공한 지면 키       |
| <mark style="color:red;">`OnRewardVideoAdLoadFailed`</mark>  | 리워드 비디오 로딩 실패             |
| ㄴevent.placementId                                           | 리워드 비디오 로딩 실패한 지면 키       |
| ㄴevent.errorCode                                             | 리워드 비디오 로딩 실패 에러코드        |
| ㄴevent.errorMessage                                          | 리워드 비디오 로딩 실패 에러 메시지      |
| <mark style="color:red;">`OnRewardVideoAdOpened`</mark>      | 리워드 비디오 노출                |
| ㄴevent.placementId                                           | 노출된 리워드 비디오 광고 지면 키       |
| <mark style="color:red;">`OnRewardVideoAdOpenFalied`</mark>  | 리워드 비디오 노출 실패             |
| ㄴevent.placementId                                           | 노출 실패한 리워드 비디오 광고 지면 키    |
| <mark style="color:red;">`OnRewardVideoAdClosed`</mark>      | 리워드 비디오 닫기                |
| ㄴevent.placementId                                           | 리워드 비디오 광고 닫은 지면 키        |
| <mark style="color:red;">`OnRewardVideoAdClicked`</mark>     | 리워드 비디오 클릭                |
| ㄴevent.placementId                                           | 리워드 비디오 광고 클릭한 지면 키       |
| <mark style="color:red;">`OnRewardVideoPlayCompleted`</mark> | 리워드 비디오 재생 완료             |
| ㄴ event.placementId                                          | 리워드 비디오 재생 완료한 지면 키       |
| <mark style="color:red;">`OnRewardPlusCompleted`</mark>      | 리워드 플러스 활성화된 지면의 적립 요청 완료 |
| ㄴ event.resultCode                                           | 적립 요청 결과 코드               |
| ㄴ event.reward                                               | 적립 요청된 포인트                |

* <mark style="color:red;">`OnRewardVideoAdClicked`</mark> **:** 클릭 이벤트의 경우 Android에서만 제공됩니다.

## 5. 샘플 코드

```typescript
import React, { useEffect } from 'react';
import { Platform, SafeAreaView, ScrollView, StyleSheet, Text, View, Button } from 'react-native';
import {
  AdPopcornSSP,
  AdPopcornRewardVideoAd,
  AdPopcornSSPEvents,
  AdPopcornRewardVideoAdEvents,
} from 'react-native-adpopcorn-ssp';

const APP_KEY_ANDROID = '663451319';
const APP_KEY_IOS = '397261446';

function App(): JSX.Element {
  useEffect(() => {
    // SSP 초기화 이벤트
    const initSub = AdPopcornSSP.addListener(AdPopcornSSPEvents.OnAdPopcornSSPSDKDidInitialize, () => {
      console.log('[SSP] SDK Initialized');
      if (Platform.OS === 'ios') {
        AdPopcornRewardVideoAd.createInstance(APP_KEY_IOS, 'iOS_REWARD_VIDEO');
      } else {
        AdPopcornRewardVideoAd.createInstance(APP_KEY_ANDROID, 'REWARD_VIDEO');
      }
    });

    // Reward Video 이벤트
    const rvLoadedSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoAdLoaded, (e) => console.log('[RewardVideo] Loaded:', e.placementId));
    const rvFailedSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoAdLoadFailed, (e) => console.log('[RewardVideo] LoadFailed:', e.placementId, e.errorCode, e.errorMessage));
    const rvOpenedSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoAdOpened, (e) => console.log('[RewardVideo] Opened:', e.placementId));
    const rvOpenFailSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoAdOpenFalied, (e) => console.log('[RewardVideo] OpenFailed:', e.placementId));
    const rvClosedSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoAdClosed, (e) => console.log('[RewardVideo] Closed:', e.placementId));
    const rvClickedSub = Platform.OS === 'android' ? AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoAdClicked, (e) => console.log('[RewardVideo] Clicked:', e.placementId)) : null;
    const rvCompletedSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardVideoPlayCompleted, (e) => console.log('[RewardVideo] PlayCompleted:', e.placementId));
    const rvPlusSub = AdPopcornRewardVideoAd.addListener(AdPopcornRewardVideoAdEvents.OnRewardPlusCompleted, (e) => console.log('[RewardVideo] RewardPlusCompleted:', e.resultCode, e.reward));

    // SDK 초기화
    const appKey = Platform.OS === 'ios' ? APP_KEY_IOS : APP_KEY_ANDROID;
    AdPopcornSSP.init(appKey);
    AdPopcornSSP.setUserId('react-native-test-user');

    return () => {
      initSub.remove();
      rvLoadedSub.remove();
      rvFailedSub.remove();
      rvOpenedSub.remove();
      rvOpenFailSub.remove();
      rvClosedSub.remove();
      rvClickedSub?.remove();
      rvCompletedSub.remove();
      rvPlusSub.remove();
    };
  }, []);

  const loadReward = () => {
    const pid = Platform.OS === 'ios' ? 'iOS_REWARD_VIDEO' : 'REWARD_VIDEO';
    AdPopcornRewardVideoAd.loadAd(pid);
  };
  const showReward = () => {
    const pid = Platform.OS === 'ios' ? 'iOS_REWARD_VIDEO' : 'REWARD_VIDEO';
    AdPopcornRewardVideoAd.showAd(pid);
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={{ paddingBottom: 100 }}>
        <Text style={styles.title}>AdPopcorn SSP Example</Text>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Reward Video</Text>
          <Button title="Load Reward Video" onPress={loadReward} />
          <Button title="Show Reward Video" onPress={showReward} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}
```