feat: ESM url in v2-sdk readme & remove mention to access_token in v2

portone-io · Mar 25, 2024 · b34fda4 · b34fda4
1 parent 41f66ab
commit b34fda4
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 150 deletions.
diff --git a/src/content/docs/ko/ready/readme.mdx b/src/content/docs/ko/ready/readme.mdx
@@ -620,58 +620,11 @@ import IntegrationTosspayments from './_components/integration-guide/tosspayment
     <Hint style="info">
       **REST API Key, REST API Secret란?**
 
-      - V1 API 호출 시 사용되는 Access Token을 발급할 때 사용되는 값입니다.
-      - REST API Secret은 재발급이 가능하며, 재발급 즉시 기존의 Secret은 사용이 불가능합니다.
+      - API 호출 시 인증을 위해 필요한 값입니다. [인증 방식](https://developers.portone.io/api/rest-v2)을 참고해 주세요.
     </Hint>
 
     <Hint style="danger">
-      REST API Key, REST API Secret **결제 거래 건을 컨트롤할 수 있는 민감 정보**로 외부로 유출되지 않도록 주의가 필요합니다.
-    </Hint>
-  </Fragment>
-
-  <Fragment slot="v2">
-    ### 4-1. 스토어 아이디(Store ID) 복사하기
-
-    포트원을 이용한 결제 연동 시 필요한 스토어 아이디(Store ID)를 복사할 수 있습니다.
-
-    <Figure src={storeid} />
-
-    - 관리자 콘솔 화면에서 \[결제 연동] → \[연동 관리] 화면에서 스토어 아이디를 복사할 수 있습니다.
-
-    <Hint style="info">
-      **스토어 아이디(Store ID)란?**
-
-      - 포트원 가입 시 \[대표 상점]이 생성되며, 자동으로 생성되는 고유값 입니다.
-      - 추가로 하위 상점을 생성하는 경우 **상점마다 고유하게 부여**됩니다.
-      - 결제창 연동 시 사용되며, 결제 호출 시 `storeId` 파라미터에 해당 값을 넣어야 합니다.
-      - **기술 문의 시 해당 값을 공유**해 주시면 빠르게 문제 해결을 도와드릴 수 있습니다.
-    </Hint>
-
-    ### 4-2. V2 API Secret 발급하기
-
-    V2 API를 연동하기 위해서는 V2 API Secret을 별도로 발급한 후 사용이 가능합니다.
-
-    <Figure src={apiVerV2} />
-
-    - 관리자 콘솔 화면에서 \[결제연동] → \[연동 관리] → \[식별코드·API Keys] 메뉴에서 \[V2 API]를 선택합니다.
-    - `새로운 API Secret 발급`을 클릭합니다.
-    - Secret 목록에 표시될 `Secret 이름`을 입력하고 `만료 기한`을 선택한 후 `생성`을 클릭합니다.
-    - 생성된 Secret을 복사합니다. `API Secret을 확인했습니다`를 누른 후엔 Secret 값을 확인할 수 없으니 주의해 주세요.
-
-    <Hint style="danger">
-      API Secret 발급 직후에만 값을 확인할 수 있습니다. 페이지를 벗어나면 API Secret 확인이 불가하오니 복사한 후 임의의 장소에 저장하여 사용하세요.
-      만약, API Secret 값을 잊어버리신 경우 새로 발급받아 사용해야 합니다.
-    </Hint>
-
-    <Hint style="info">
-      **API Secret이란?**
-
-      - API 호출 시 사용되는 Access Token을 발급할 때 사용되는 값입니다.
-      - V2 API Secret을 발급받으신 후, 이를 이용해 [API Secret을 이용한 토큰 발급](/api/rest-v2/auth#post%20%2Flogin%2Fapi-secret) API를 호출하시면 <br /> **Access Token**을 발급받으실 수 있습니다.
-    </Hint>
-
-    <Hint style="danger">
-      API Secret은 **결제 거래 건을 컨트롤할 수 있는 민감 정보**로 외부로 유출되지 않도록 주의가 필요합니다.
+      - API Secret은 **결제 거래 건을 컨트롤할 수 있는 민감 정보**로 고객사 서버에서만 사용되어야 하며, 브라우저 등 외부에 노출되어서는 안 됩니다.
     </Hint>
   </Fragment>
 </VersionGate>
diff --git a/src/content/docs/ko/v2-payment/_components/sdk-installation.mdx b/src/content/docs/ko/v2-payment/_components/sdk-installation.mdx
@@ -0,0 +1,64 @@
+import Tab from "~/components/gitbook/tabs/Tab.astro";
+import Tabs from "~/components/gitbook/tabs/Tabs.astro";
+import Hint from "~/components/Hint.astro";
+import * as prose from '~/components/prose';
+
+export const components = prose;
+
+포트원 V2 SDK는 npm 레지스트리와 CDN을 통해 배포되고 있습니다.
+
+- npm, yarn 등 패키지 매니저를 사용한다면 의존 대상으로 [@portone/browser-sdk](https://www.npmjs.com/package/@portone/browser-sdk)를 추가하세요.
+- 패키지 매니저를 사용하지 않는다면 `<script>` 요소를 이용하여 CDN에서 SDK를 직접 불러오세요.
+- CDN에서 ESM 모듈 형태로도 SDK를 제공하고 있습니다.
+
+<Tabs>
+
+<Tab title="패키지 의존 대상으로 추가">
+
+사용하는 패키지 매니저에 알맞은 명령어를 실행하세요.
+
+```shell
+npm i @portone/browser-sdk
+```
+
+```shell
+yarn add @portone/browser-sdk
+```
+
+```shell
+pnpm add @portone/browser-sdk
+```
+
+패키지 매니저로 SDK를 불러온 경우 `PortOne` 객체를 import해서 사용합니다.
+
+```typescript
+import * as PortOne from "@portone/browser-sdk/v2";
+```
+
+</Tab>
+
+<Tab title="<script> 요소로 추가">
+```html
+<script src="https://cdn.portone.io/v2/browser-sdk.js"></script>
+```
+
+`<script>` 요소로 SDK를 불러온 경우 전역 객체 `window`에 `PortOne` 객체가 추가됩니다.
+
+</Tab>
+
+<Tab title="ESM 모듈로 추가">
+ESM 모듈을 사용하는 경우 URL에서 `PortOne` 객체를 직접 import할 수 있습니다.
+
+```javascript
+import * as PortOne from "https://cdn.portone.io/v2/browser-sdk.esm.js";
+```
+</Tab>
+
+</Tabs>
+
+<Hint style="info">
+**타입스크립트 지원**
+
+포트원 V2 SDK는 타입스크립트 선언 파일(`.d.ts`)의 형식으로 타입 정보를 제공하고 있습니다. npm 레지스트리를 이용하는 경우 각종 개발 환경에서 별도 설정 없이 사용 가능합니다.
+
+</Hint>
diff --git a/src/content/docs/ko/v2-payment/authpay.mdx b/src/content/docs/ko/v2-payment/authpay.mdx
@@ -10,6 +10,8 @@ import Tab from "~/components/gitbook/tabs/Tab.astro";
 
 import Youtube from "~/components/gitbook/Youtube.astro";
 
+import SdkInstallation from "./_components/sdk-installation.mdx"
+
 <Details>
   <p slot="summary">
     <strong>영상으로 보기</strong>
@@ -24,65 +26,7 @@ import Youtube from "~/components/gitbook/Youtube.astro";
 
 포트원은 다양한 PG의 결제창을 통일된 방법으로 호출할 수 있도록 자바스크립트 SDK를 제공합니다. 브라우저에서 포트원 SDK를 호출하여 결제를 진행하게 됩니다.
 
-포트원 V2 SDK는 npm 레지스트리와 CDN을 통해 배포되고 있습니다.
-
-- npm, yarn 등 패키지 매니저를 사용한다면 의존 대상으로 [@portone/browser-sdk][npm-sdk]를 추가하세요.
-- 패키지 매니저를 사용하지 않는다면 `<script>` 요소를 이용하여 CDN에서 SDK를 직접 불러오세요.
-- CDN에서 ESM 모듈 형태로도 SDK를 제공하고 있습니다.
-
-[1]: https://www.npmjs.com/package/@portone/browser-sdk
-
-<Tabs>
-
-<Tab title="패키지 의존 대상으로 추가">
-
-사용하는 패키지 매니저에 알맞은 명령어를 실행하세요.
-
-```shell
-npm i @portone/browser-sdk
-```
-
-```shell
-yarn add @portone/browser-sdk
-```
-
-```shell
-pnpm add @portone/browser-sdk
-```
-
-패키지 매니저로 SDK를 불러온 경우 `PortOne` 객체를 import해서 사용합니다.
-
-```typescript
-import * as PortOne from "@portone/browser-sdk/v2";
-```
-
-</Tab>
-
-<Tab title="<script> 요소로 추가">
-```html
-<script src="https://cdn.portone.io/v2/browser-sdk.js"></script>
-```
-
-`<script>` 요소로 SDK를 불러온 경우 전역 객체 `window`에 `PortOne` 객체가 추가됩니다.
-
-</Tab>
-
-<Tab title="ESM 모듈로 추가">
-ESM 모듈을 사용하는 경우 URL에서 `PortOne` 객체를 직접 import할 수 있습니다.
-
-```javascript
-import * as PortOne from "https://cdn.portone.io/v2/browser-sdk.esm.js";
-```
-</Tab>
-
-</Tabs>
-
-<Hint style="info">
-**타입스크립트 지원**
-
-포트원 V2 SDK는 타입스크립트 선언 파일(`.d.ts`)의 형식으로 타입 정보를 제공하고 있습니다. npm 레지스트리를 이용하는 경우 각종 개발 환경에서 별도 설정 없이 사용 가능합니다.
-
-</Hint>
+<SdkInstallation />
 
 ## 2. 결제 요청
 

diff --git a/src/content/docs/ko/v2-payment/v2-sdk/billing-key-request.mdx b/src/content/docs/ko/v2-payment/v2-sdk/billing-key-request.mdx
@@ -1,6 +1,6 @@
 ---
 title: 빌링키 발급 요청 파라미터
-description: 빌링키 발급 요청 파라미터를 확인 할 수 있습니다.
+description: 빌링키 발급 요청 파라미터를 확인할 수 있습니다.
 ---
 
 ## 빌링키 발급 요청 파라미터 정의

diff --git a/src/content/docs/ko/v2-payment/v2-sdk/billing-key-response.mdx b/src/content/docs/ko/v2-payment/v2-sdk/billing-key-response.mdx
@@ -1,6 +1,6 @@
 ---
 title: 빌링키 발급 응답 파라미터
-description: 빌링키 발급 응답 파라미터를 확인 할 수 있습니다.
+description: 빌링키 발급 응답 파라미터를 확인할 수 있습니다.
 ---
 
 ## 빌링키 발급 응답 파라미터 정의

diff --git a/src/content/docs/ko/v2-payment/v2-sdk/identity-verification-request.mdx b/src/content/docs/ko/v2-payment/v2-sdk/identity-verification-request.mdx
@@ -1,6 +1,6 @@
 ---
 title: 본인인증 요청 파라미터
-description: 본인인증 요청 파라미터를 확인 할 수 있습니다.
+description: 본인인증 요청 파라미터를 확인할 수 있습니다.
 ---
 
 ## 본인인증 요청 파라미터 정의

diff --git a/src/content/docs/ko/v2-payment/v2-sdk/identity-verification-response.mdx b/src/content/docs/ko/v2-payment/v2-sdk/identity-verification-response.mdx
@@ -1,6 +1,6 @@
 ---
 title: 본인인증 응답 파라미터
-description: 본인인증 응답 파라미터를 확인 할 수 있습니다.
+description: 본인인증 응답 파라미터를 확인할 수 있습니다.
 ---
 
 ## 본인인증 응답 파라미터 정의

diff --git a/src/content/docs/ko/v2-payment/v2-sdk/payment-request.mdx b/src/content/docs/ko/v2-payment/v2-sdk/payment-request.mdx
@@ -1,6 +1,6 @@
 ---
 title: 결제요청 파라미터
-description: 결제요청 파라미터를 확인 할 수 있습니다.
+description: 결제요청 파라미터를 확인할 수 있습니다.
 ---
 
 ## 결제요청 파라미터 정의

diff --git a/src/content/docs/ko/v2-payment/v2-sdk/payment-response.mdx b/src/content/docs/ko/v2-payment/v2-sdk/payment-response.mdx
@@ -1,6 +1,6 @@
 ---
 title: 결제응답 파라미터
-description: 결제응답 파라미터를 확인 할 수 있습니다.
+description: 결제응답 파라미터를 확인할 수 있습니다.
 ---
 
 ## 결제응답 파라미터 정의

diff --git a/src/content/docs/ko/v2-payment/v2-sdk/readme.mdx b/src/content/docs/ko/v2-payment/v2-sdk/readme.mdx
@@ -1,40 +1,8 @@
 ---
-title: JavaScript SDK 연동하기
-description: 결제창 연동시 호출 및 응답 파라미터를 확인할 수 있습니다.
+title: JavaScript SDK 레퍼런스
+description: 결제창 연동시 사용되는 SDK에 대한 설명 문서입니다.
 ---
 
-import Hint from "~/components/Hint.astro";
-import Tab from "~/components/gitbook/tabs/Tab.astro";
-import Tabs from "~/components/gitbook/tabs/Tabs.astro";
+import SdkInstallation from '../_components/sdk-installation.mdx';
 
-<Hint style="info">
-이 문서는 V2 SDK 연동을 위한 문서로 [v2](../v2 "mention")을 먼저 읽으시길 권장드립니다.
-
-</Hint>
-
-고객사 프로젝트 설정에 따라 설치 방법을 선택할 수 있습니다.
-
-- NPM 의존성이 사용 가능한 경우 NPM으로 배포된 SDK를 설치하세요.
-- HTML `<script>` 태그를 이용하는 경우 결제창 연동을 진행할 주문 페이지에 SDK를 설치하세요.
-
-<Tabs>
-<Tab title="NPM 패키지로 추가">
-NPM 이나 yarn 패키지 매니저를 이용해 포트원 SDK를 설치할 수 있습니다.
-
-```shell
-npm i @portone/browser-sdk
-```
-
-```shell
-yarn add @portone/browser-sdk
-```
-
-</Tab>
-
-<Tab title="<script> 태그로 추가">
-```html
-<script src="https://cdn.portone.io/v2/browser-sdk.js"></script>
-```
-
-</Tab>
-</Tabs>
+<SdkInstallation />