---
title: "뷰포트 레퍼런스 | Tajo"
description: "Stripe App UI를 렌더링할 수 있는 Stripe 대시보드 뷰포트 전체 레퍼런스"
url: https://tajo.io/kr/docs/stripe-apps/viewports/
markdown: https://tajo.io/kr/docs/stripe-apps/viewports.md
lang: ko-KR
author: "Set Noa"
author_url: https://tajo.io/kr/set-noa/
robots: noindex
---

Tajo 사전 이용 신청

이름과 회사 이메일 주소를 입력하세요. Tajo 이용 신청을 확인할 수 있는 링크를 이메일로 보내드립니다.

# 뷰포트 레퍼런스

[Set Noa](https://tajo.io/kr/set-noa/)

뷰포트는 Stripe App의 UI 컴포넌트가 Stripe 대시보드 안에서 어디에 표시될지를 정의합니다. 각 뷰포트는 앱이 뷰를 렌더링할 수 있는 특정 대시보드 페이지 또는 위치에 대응합니다.

Caution

**상태: 예정, 아직 구축되지 않음.** Tajo에는 Stripe App이 없으므로 이 섹션의 어떤 것도 현재 설치할 수 없습니다. 이 페이지에 나오는 앱 식별자, URL, 자격 증명은 실제로 동작하는 엔드포인트가 아니라 예시용 자리표시자입니다.

## 뷰포트의 작동 방식

앱 매니페스트에서 뷰를 선언할 때 React 컴포넌트를 뷰포트에 매핑합니다.

```json
{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      }
    ]
  }
}
```

사용자가 해당 대시보드 페이지로 이동해 앱을 열면 컴포넌트가 앱 드로어(사이드 패널)에 렌더링됩니다.

## 대시보드 전역 뷰포트와 페이지별 뷰포트

### 대시보드 전역 뷰포트

다음 뷰포트는 Stripe 대시보드의 모든 페이지에서 사용할 수 있습니다.

| 뷰포트 ID | 설명 |
| --- | --- |
| `stripe.dashboard.drawer.default` | 기본 드로어 뷰로, 모든 대시보드 페이지에서 앱 아이콘을 통해 접근합니다 |
| `stripe.dashboard.home.overview` | 홈 페이지 개요로, 대시보드 첫 화면에 표시됩니다 |
| `stripe.dashboard.settings` | 앱 설정 페이지로, 앱의 설정 메뉴에서 접근합니다 |
| `stripe.dashboard.onboarding` | 온보딩 흐름으로, 앱 설치 후에 표시됩니다 |

Tip

`drawer.default` 뷰포트는 폴백 역할을 합니다. 별도의 뷰포트를 선언하지 않은 페이지에서 사용자가 앱을 열면 `drawer.default` 뷰가 대신 렌더링됩니다.

### 페이지별 뷰포트

다음 뷰포트는 사용자가 해당 대시보드 페이지에 있을 때만 렌더링됩니다.

## 결제

| 뷰포트 ID | 페이지 | URL 패턴 | 객체 유형 |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | 결제 목록 | `/payments` |  |
| `stripe.dashboard.payment.detail` | 결제 상세 | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | 청구 상세 | `/payments/:id` (레거시) | Charge |

## 고객

| 뷰포트 ID | 페이지 | URL 패턴 | 객체 유형 |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | 고객 목록 | `/customers` |  |
| `stripe.dashboard.customer.detail` | 고객 상세 | `/customers/:id` | Customer |

## 상품 및 가격

| 뷰포트 ID | 페이지 | URL 패턴 | 객체 유형 |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | 상품 목록 | `/products` |  |
| `stripe.dashboard.product.detail` | 상품 상세 | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | 가격 상세 | `/prices/:id` | Price |

## 청구서

| 뷰포트 ID | 페이지 | URL 패턴 | 객체 유형 |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | 청구서 목록 | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | 청구서 상세 | `/invoices/:id` | Invoice |

## 구독

| 뷰포트 ID | 페이지 | URL 패턴 | 객체 유형 |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | 구독 목록 | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | 구독 상세 | `/subscriptions/:id` | Subscription |

## Checkout

| 뷰포트 ID | 페이지 | URL 패턴 | 객체 유형 |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | Checkout 세션 목록 | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | Checkout 세션 상세 | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | 결제 링크 목록 | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | 결제 링크 상세 | `/payment-links/:id` | PaymentLink |

## Connect

| 뷰포트 ID | 페이지 | URL 패턴 | 객체 유형 |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | 연결된 계정 목록 | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | 연결된 계정 상세 | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | 이체 목록 | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | 이체 상세 | `/connect/transfers/:id` | Transfer |

## Billing

| 뷰포트 ID | 페이지 | URL 패턴 | 객체 유형 |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | 쿠폰 목록 | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | 쿠폰 상세 | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | 견적 목록 | `/quotes` |  |
| `stripe.dashboard.quote.detail` | 견적 상세 | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | 크레딧 노트 상세 | `/credit-notes/:id` | CreditNote |

## 지급

| 뷰포트 ID | 페이지 | URL 패턴 | 객체 유형 |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | 지급 목록 | `/payouts` |  |
| `stripe.dashboard.payout.detail` | 지급 상세 | `/payouts/:id` | Payout |

## 분쟁

| 뷰포트 ID | 페이지 | URL 패턴 | 객체 유형 |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | 분쟁 목록 | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | 분쟁 상세 | `/disputes/:id` | Dispute |

## Terminal

| 뷰포트 ID | 페이지 | URL 패턴 | 객체 유형 |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | 리더 목록 | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | 리더 상세 | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | 위치 목록 | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | 위치 상세 | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| 뷰포트 ID | 페이지 | URL 패턴 | 객체 유형 |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | 카드 목록 | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | 카드 상세 | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | 카드 소유자 목록 | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | 카드 소유자 상세 | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | 거래 목록 | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | 승인 목록 | `/issuing/authorizations` |  |

## 객체 컨텍스트 접근하기

앱이 상세 뷰포트에서 렌더링될 때는 해당 Stripe 객체를 컨텍스트로 전달받습니다.

```typescript
import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';

const CustomerDetailView = ({ environment }: ExtensionContextValue) => {
  const { objectContext } = environment;

  // objectContext contains the current Stripe object
  const customerId = objectContext?.id; // "cus_xxxxx"
  const customerEmail = objectContext?.email;

  return (
    <Box>
      <Inline>Customer: {customerEmail}</Inline>
      <Inline>Brevo Sync Status: checking...</Inline>
    </Box>
  );
};
```

### 목록 컨텍스트와 상세 컨텍스트

| 뷰포트 유형 | 객체 컨텍스트 | 사용 사례 |
| --- | --- | --- |
| **목록** (예: `customer.list`) | 사용할 수 없음, 선택된 객체가 없습니다 | 집계 데이터, 요약 뷰, 일괄 작업 표시 |
| **상세** (예: `customer.detail`) | 현재 페이지의 전체 Stripe 객체 | 객체별 데이터, 액션, 연동 표시 |

## Tajo Brevo 연동에 권장하는 뷰포트

Tajo Brevo 연동 앱에서는 다음 뷰포트가 가장 큰 가치를 제공합니다.

```json
{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      },
      {
        "viewport": "stripe.dashboard.customer.list",
        "component": "CustomerListView"
      },
      {
        "viewport": "stripe.dashboard.payment.detail",
        "component": "PaymentDetailView"
      },
      {
        "viewport": "stripe.dashboard.subscription.detail",
        "component": "SubscriptionDetailView"
      },
      {
        "viewport": "stripe.dashboard.home.overview",
        "component": "OverviewView"
      },
      {
        "viewport": "stripe.dashboard.drawer.default",
        "component": "DrawerView"
      },
      {
        "viewport": "stripe.dashboard.settings",
        "component": "SettingsView"
      },
      {
        "viewport": "stripe.dashboard.onboarding",
        "component": "OnboardingView"
      }
    ]
  }
}
```

| 컴포넌트 | 목적 |
| --- | --- |
| **CustomerDetailView** | 특정 고객의 Brevo 연락처 정보, 동기화 상태, 인게이지먼트 데이터를 표시 |
| **CustomerListView** | 일괄 동기화 컨트롤과 Brevo 동기화 집계 통계를 표시 |
| **PaymentDetailView** | 이 결제로 트리거된 Brevo 이벤트를 표시 |
| **SubscriptionDetailView** | 이 구독의 Brevo 자동화 상태를 표시 |
| **OverviewView** | 동기화 상태와 주요 Brevo 지표를 담은 대시보드 홈 위젯 |
| **DrawerView** | 빠른 액션과 상태 개요를 제공하는 일반 앱 드로어 |
| **SettingsView** | Brevo API 키, 동기화 기본 설정, 필드 매핑을 구성 |
| **OnboardingView** | 신규 사용자의 Brevo 계정 연결을 안내 |

## 뷰포트 지원 범위

모든 뷰포트가 Stripe 대시보드의 모든 모드에서 지원되지는 않습니다.

| 모드 | 사용 가능한 뷰포트 |
| --- | --- |
| **라이브 모드** | 모든 뷰포트 |
| **테스트 모드** | 모든 뷰포트 (테스트 데이터 사용) |
| **샌드박스** | 모든 뷰포트 (`sandbox_install_compatible: true`인 경우) |

Caution

존재하지 않는 뷰포트를 매니페스트에 선언하면 앱 업로드가 검증에 실패합니다. 뷰포트 ID는 항상 이 레퍼런스와 대조해 확인하세요.