> ## Documentation Index
> Fetch the complete documentation index at: https://docs.adrop.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 배너 광고

> REST API를 사용하여 배너 광고를 요청하는 방법을 안내합니다.

배너 광고는 HTML 형식으로 반환되므로 웹 프로젝트에서 직접 렌더링할 수 있습니다. 다른 플랫폼에서는 WebView를 사용하여 렌더링할 수 있습니다.

## 요청 파라미터

### 헤더

<ParamField header="Authorization" type="string" required>
  App Key (adrop\_service.json에서 확인)
</ParamField>

### 쿼리 파라미터

<ParamField query="unit" type="string" required>
  광고 유닛 ID
</ParamField>

<ParamField query="uid" type="string">
  사용자 고유 식별자. 광고 노출 빈도 제어와 타겟팅에 사용됩니다.
</ParamField>

<ParamField query="pf" type="string">
  플랫폼. `android`, `ios`, `web` 중 하나
</ParamField>

<ParamField query="lcl" type="string">
  로케일. 예: `ko_KR`, `en_US`
</ParamField>

<ParamField query="theme" type="string">
  테마 모드. `light` 또는 `dark`
</ParamField>

<ParamField query="contextId" type="string">
  문맥 타겟팅 ID (타겟팅 광고 요청 시 필수)
</ParamField>

<ParamField query="adId" type="string">
  광고 식별자 (내 기기에서 보기 시 필수)
</ParamField>

## 응답

<ResponseField name="code" type="integer" required>
  응답 코드. `0`은 성공을 의미합니다.
</ResponseField>

<ResponseField name="msg" type="string" required>
  응답 메시지
</ResponseField>

<ResponseField name="result" type="object">
  광고 데이터

  <Expandable title="result 속성">
    <ResponseField name="id" type="string">
      광고 ID
    </ResponseField>

    <ResponseField name="format" type="string">
      광고 포맷. `banner`
    </ResponseField>

    <ResponseField name="type" type="string">
      광고 타입. `display` 또는 `video`
    </ResponseField>

    <ResponseField name="unit" type="string">
      광고 유닛 ID
    </ResponseField>

    <ResponseField name="w" type="integer">
      광고 너비 (px)
    </ResponseField>

    <ResponseField name="h" type="integer">
      광고 높이 (px)
    </ResponseField>

    <ResponseField name="ad" type="string">
      HTML 광고 콘텐츠
    </ResponseField>

    <ResponseField name="target" type="string">
      브라우저 타겟. `external` 또는 `internal`
    </ResponseField>

    <ResponseField name="carouselActivated" type="boolean">
      캐러셀 활성화 여부
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseExample>
  ```json 성공 응답 theme={null}
  {
      "code": 0,
      "msg": "OK",
      "result": {
          "id": "ad_123456",
          "format": "banner",
          "type": "display",
          "unit": "YOUR_UNIT_ID",
          "w": 320,
          "h": 100,
          "ad": "<div>...</div>",
          "target": "external",
          "carouselActivated": false
      }
  }
  ```
</ResponseExample>

***

## 렌더링

### 웹에서 렌더링

```html theme={null}
<div id="ad-container"></div>

<script>
fetch('https://api-v2.adrop.io/request?unit=YOUR_UNIT_ID&uid=USER_ID&pf=web', {
    headers: { 'Authorization': 'YOUR_APP_KEY' }
})
.then(res => res.json())
.then(data => {
    if (data.code === 0) {
        document.getElementById('ad-container').innerHTML = data.result.ad;
    }
});
</script>
```

### 캐러셀 배너

캐러셀 배너를 사용하는 경우 아래 스크립트를 추가해야 합니다:

```html theme={null}
<script src="https://storage.adrop.io/js/adrop-carousel-1.0.1.min.js"></script>
```

***

## 관련 문서

<CardGroup cols={2}>
  <Card title="네이티브 광고" icon="puzzle-piece" href="/ko/sdk/rest-api/native">
    커스텀 UI로 광고 구현
  </Card>

  <Card title="에러 코드" icon="triangle-exclamation" href="/ko/sdk/rest-api/errors">
    에러 처리 방법
  </Card>
</CardGroup>