# 오퍼월 작동 플로우

사용자가 오퍼월을 열고 광고를 참여하는 전체 과정입니다.

> **📊 다이어그램 안내** 이 문서의 다이어그램은 Mermaid 형식으로 작성되어 있습니다.
>
> * **GitHub에서 보기**: 자동으로 렌더링됩니다.
> * **GitBook에서 보기**: 아래 코드를 복사하여 [Mermaid Live Editor](https://mermaid.live)에 붙여넣으면 확인할 수 있습니다.

## 오퍼월 열기부터 닫기까지

```mermaid
sequenceDiagram
    participant User as 사용자
    participant App as 앱
    participant SDK as AdchainSdk
    participant WebView as WebView
    participant Server as 애드체인 서버

    User->>App: 오퍼월 버튼 클릭
    App->>SDK: openOfferwall()

    alt 미로그인
        SDK-->>App: onError("Not logged in")
    else 로그인됨
        SDK->>SDK: 네이티브 화면 생성
        SDK->>WebView: 생성 및 설정
        WebView->>Server: GET 오퍼월 페이지
        Server-->>WebView: HTML/JS/CSS
        WebView->>WebView: 페이지 렌더링
        SDK-->>App: onOpen()

        Note over User,WebView: 사용자가 광고 탐색

        User->>WebView: 광고 클릭
        WebView->>Server: 광고 참여 기록
        Server-->>WebView: 참여 완료

        alt 외부 앱 열기 필요
            WebView->>SDK: JS Bridge: openWebView
            SDK->>App: 외부 브라우저 or 앱 열기
        end

        Note over User,WebView: 광고 완료 후

        WebView->>Server: 완료 보고
        Server->>Server: 포인트 지급
        WebView->>SDK: JS Bridge: missionProgressed
        SDK->>SDK: 이벤트 기록

        User->>WebView: 닫기 버튼 클릭
        WebView->>SDK: close()
        SDK->>SDK: WebView 정리
        SDK-->>App: onClose()
    end
```

## 오퍼월 내부 구조

```mermaid
graph TD
    OW[오퍼월 WebView] --> Header[상단 헤더]
    OW --> Daily[데일리 이벤트]
    OW --> Quiz[퀴즈 섹션]
    OW --> Ads[광고 목록]
    OW --> Mission[미션 현황]

    Header --> Balance[포인트 잔고]
    Header --> Close[닫기 버튼]

    Daily --> DailyCard1[퀴즈 1]
    Daily --> DailyCard2[퀴즈 2]

    Quiz --> QuizList[추천 퀴즈]

    Ads --> AI[AI 추천]
    Ads --> Category[카테고리별]

    AI --> Ad1[게임 광고]
    AI --> Ad2[쇼핑 광고]
    AI --> Ad3[앱 설치]

    Category --> Cat1[게임]
    Category --> Cat2[쇼핑]
    Category --> Cat3[금융]

    Mission --> Daily2[데일리 미션]
    Mission --> Weekly[위클리 미션]

    style OW fill:#4ecdc4
    style AI fill:#ff6b6b
    style Quiz fill:#45b7d1
```

## JavaScript Bridge 통신

WebView와 네이티브 앱 간의 주요 메시지들:

## 광고 참여 플로우

```mermaid
flowchart TD
    Start[사용자가 광고 클릭] --> Type{광고 타입}

    Type -->|CPI<br/>앱 설치| Install[앱스토어 열기]
    Type -->|CPA<br/>회원가입| Signup[가입 페이지]
    Type -->|CPV<br/>동영상| Video[동영상 재생]
    Type -->|CPQ<br/>퀴즈| Quiz[퀴즈 풀기]

    Install --> InstallCheck{설치 완료?}
    InstallCheck -->|Yes| Reward1[포인트 지급]
    InstallCheck -->|No| End1[종료]

    Signup --> SignupCheck{가입 완료?}
    SignupCheck -->|Yes| Reward2[포인트 지급]
    SignupCheck -->|No| End2[종료]

    Video --> VideoCheck{끝까지 시청?}
    VideoCheck -->|Yes| Reward3[포인트 지급]
    VideoCheck -->|No| End3[종료]

    Quiz --> QuizCheck{정답?}
    QuizCheck -->|Yes| Reward4[포인트 지급]
    QuizCheck -->|No| Retry[다시 시도]
    Retry --> Quiz

    Reward1 --> Update[잔고 업데이트]
    Reward2 --> Update
    Reward3 --> Update
    Reward4 --> Update

    Update --> Notify[사용자에게 알림]
    Notify --> Done[완료]

    style Reward1 fill:#95e1d3
    style Reward2 fill:#95e1d3
    style Reward3 fill:#95e1d3
    style Reward4 fill:#95e1d3
```

## 임베디드 오퍼월 vs 전체 화면

### 전체 화면 오퍼월

* 네이티브 화면을 새로 생성
* 전체 화면을 차지
* 닫기 버튼으로 종료

### 임베디드 오퍼월

* 기존 화면의 일부에 배치
* 탭이나 프래그먼트 안에서 사용
* 화면 전환 없이 계속 표시

## 성능 최적화

### 첫 로딩 속도

```mermaid
gantt
    title 오퍼월 첫 로딩 시간
    dateFormat  X
    axisFormat %s초

    section WebView 초기화
    WebView 생성 : 0, 500ms
    설정 적용 : 500ms

    section 콘텐츠 로드
    HTML 다운로드 : 1000ms
    JS/CSS 로드 : 1500ms
    API 호출 (광고 목록) : 1000ms
    이미지 로드 : 2000ms

    section 렌더링
    DOM 렌더링 : 500ms
    첫 화면 표시 : milestone, 0, 0s
```

평균 첫 로딩: 2-3초 (네트워크 상태에 따라 다름)

### 캐싱 전략

* **정적 리소스**: JS, CSS, 이미지 → 로컬 캐시
* **광고 목록**: 60초 캐시
* **사용자 포인트**: 실시간 조회

## 주의사항

* 백그라운드로 가면 일시정지됩니다
* 여러 오퍼월을 동시에 열면 안 됩니다
* destroy() 또는 cleanup()을 꼭 호출해야 합니다


---

# 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-4/offerwall-flow.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.