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

# 피그마 플러그인 보일러플레이트

> Dodo Payments 라이센스 키 검증 및 활성화를 통해 피그마 플러그인을 구축하세요

이것은 Dodo Payments 라이센스 키 API를 통합하여 플러그인에 대한 접근을 부여하고자 하는 피그마 플러그인 개발자를 위한 시작점으로 설계된 예제 구현 및 보일러플레이트입니다. 이 템플릿은 완전한 라이센스 키 검증 및 활성화 기능을 보여주며, 내장 라이센스를 갖춘 프리미엄 피그마 플러그인을 만드는 데 필요한 모든 것을 제공합니다.

## 기능

* **라이센스 키 검증**: Dodo Payments API에 대해 라이센스 키를 검증합니다
* **라이센스 키 활성화**: 사용자 식별을 통해 라이센스 키를 활성화합니다
* **환경 지원**: 테스트 및 라이브 환경 모두에 대해 구성 가능
* **CORS 프록시**: CORS 제한을 처리하기 위해 Cloudflare Worker 프록시를 사용합니다
* **TypeScript 지원**: 적절한 오류 처리가 포함된 완전한 타입 구현

## 시작하기

<Steps>
  <Step title="Create Base Plugin">
    [Figma의 플러그인 빠른 시작 가이드](https://www.figma.com/plugin-docs/plugin-quickstart-guide/)을 사용하여 자체 Figma 플러그인 프로젝트를 만듭니다. 이렇게 하면 `manifest.json` 파일이 포함된 기본 골격이 생성됩니다.

    <Tip>
      이 단계는 플러그인에 고유한 이름과 ID를 부여하기 위한 것입니다. 다음 단계에서 ID와 이름을 Git 저장소에 커밋한 후 생성된 파일은 삭제해도 됩니다.
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    [dodopayments-figma 저장소](https://github.com/dodopayments/dodopayments-figma)를 클론하고 생성된 플러그인 폴더에서 가져온 이름과 ID로 `manifest.json`를 업데이트하세요.

    ```bash theme={null}
    git clone https://github.com/dodopayments/dodopayments-figma.git
    cd dodopayments-figma
    ```

    이 예제는 통합을 위한 시작점으로 사용됩니다.

    <Tip>
      버전 관리를 위해 원격 origin URL을 본인 저장소로 변경해야 합니다.
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    프로젝트 루트에서 다음 명령을 실행하세요:

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Configure Environment">
    `src/ui/api.ts`에서 `API_MODE`를 설정하세요:

    ```typescript theme={null}
    const API_MODE = "test_mode"; // for development
    // const API_MODE = "live_mode"; // for production
    ```

    <Warning>
      실제 결제를 처리하지 않도록 개발 중에는 항상 `test_mode`를 사용하세요.
    </Warning>
  </Step>

  <Step title="Customize Components">
    필요에 맞게 플러그인 구성 요소를 사용자화하세요:

    * `Authenticated.tsx`를 업데이트하여 유효한 라이선스 키를 가진 사용자를 위한 기능을 노출
    * `LicenseKeyInput.tsx`를 맞춤형 디자인에 맞게 조정

    <Note>
      `Authenticated.tsx` 구성 요소는 유효한 라이선스가 필요한 플러그인의 프리미엄 기능을 추가하는 영역입니다.
    </Note>
  </Step>
</Steps>

## 구성

<Steps>
  <Step title="Configure Network Access">
    플러그인이 CORS 프록시와 통신할 수 있도록 네트워크 액세스가 필요합니다. 다음 내용을 `manifest.json`에 추가하세요:

    ```json theme={null}
    {
      "networkAccess": {
        "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
      }
    }
    ```

    이렇게 하면 플러그인이 Dodo Payments API를 사용하여 라이센스 키를 검증하고 활성화할 수 있습니다.

    <Info>
      현재 Dodo Payments API는 브라우저 기반 애플리케이션의 API 호출을 허용하지 않으므로 CORS 프록시가 필요합니다.
    </Info>
  </Step>

  <Step title="Configure API Mode">
    `src/ui/api.ts`에서 API 모드를 구성하세요:

    ```typescript theme={null}
    const API_MODE = "test_mode"; // or "live_mode"
    ```

    <Tip>
      테스트 모드에서 충분히 검증한 후 준비가 되었을 때만 `live_mode`로 전환하세요.
    </Tip>
  </Step>
</Steps>

## 개발

<Steps>
  <Step title="Import Plugin">
    Figma 데스크탑 앱에서 “Import Manifest”를 사용하여 플러그인을 가져오세요.

    <Note>
      로컬에서 플러그인을 개발하고 테스트하려면 Figma 데스크탑 앱이 설치되어 있어야 합니다.
    </Note>
  </Step>

  <Step title="Start Development Server">
    ```bash theme={null}
    npm run dev
    ```

    이 명령은 자동 재구성을 위한 파일 감시와 함께 개발 서버를 시작합니다.

    <Check>
      소스 코드를 변경하면 플러그인이 자동으로 다시 빌드됩니다.
    </Check>
  </Step>
</Steps>

## 빌드 명령

| 명령               | 설명                       |
| ---------------- | ------------------------ |
| `npm run build`  | 플러그인을 프로덕션용으로 빌드합니다      |
| `npm run dev`    | 파일 변경을 감지하며 개발 서버를 시작합니다 |
| `npm run lint`   | 코드 스타일과 오류를 검사합니다        |
| `npm run format` | Prettier로 코드를 포맷합니다      |

## 라이센스 키 통합

예제 구현에는 플러그인에 맞게 사용자 정의할 수 있는 완전한 라이센스 키 검증 및 활성화가 포함되어 있습니다:

1. **사용자 입력**: 사용자가 플러그인 UI에 라이센스 키를 입력합니다
2. **검증**: 플러그인이 Dodo Payments API에 대해 키를 검증합니다
3. **활성화**: 유효한 키는 사용자 식별과 함께 활성화됩니다
4. **접근 제어**: 플러그인 기능은 유효한 라이센스 소지자에게 잠금 해제됩니다

## 배포

플러그인이 준비되면:

1. 프로덕션용으로 빌드: `npm run build`
2. 테스트 및 라이브 모드에서 철저하게 테스트하세요
3. [Figma 플러그인 게시 지침](https://www.figma.com/plugin-docs/publishing-plugins/)을 따르세요
4. Figma 커뮤니티를 통해 검토를 제출하세요

## 리포지토리

완전한 예제 구현은 다음에서 확인할 수 있습니다: [github.com/dodopayments/dodopayments-figma](https://github.com/dodopayments/dodopayments-figma)

이것을 Dodo Payments 라이센스 키 통합이 포함된 프리미엄 피그마 플러그인을 구축하기 위한 시작점으로 사용하세요.