준비물
- 파트너 코드와 API 키. 둘 다 모션원에서 발급합니다.
- 연습용 **템플릿
resUri**와 ps_code. 발급 시 함께 안내합니다.resUri는 띄울 때template_uri에 그대로 넣습니다. 직접 만들려면 상품과 ps_code 만들기로 상품을 만들고 템플릿 업로드와 수정으로 템플릿을 올립니다. - 서버 한 대. 예제는 Node.js 18 이상 기준이지만 HTTP를 보낼 수 있으면 어느 언어든 됩니다.
1. 설치
<script> 태그로 쓰신다면 SDK v2에서 옮기기를 보세요.
2. 서버에서 토큰 발급
토큰은 반드시 서버에서 발급합니다. API 키가 브라우저로 내려가면 누구나 그 키로 남의 프로젝트를 조회하고 주문을 넣을 수 있습니다. 서버 연동에는 JS SDK가 없습니다. HTTP 엔드포인트를 직접 호출합니다.server/edicus.ts
edicus-uid가 형식 규칙을 어기면 400 invalid_request, API 키가 틀리면 401 invalid_api_key입니다. 오류 코드 전체는 오류 처리에 있습니다.uid는 고객사 사용자 계정과 1:1로 대응하는 값입니다. 별도의 생성 절차가 없고, 처음 보는 값이면 토큰을 요청하는 그 순간 사용자가 만들어집니다. 형식 규칙은 토큰과 API 키에 있습니다.
이 토큰을 내려줄 엔드포인트를 하나 만들어 둡니다.
server/routes.ts
3. 브라우저에서 편집기 띄우기
app.ts
parent_element로 준 요소 안에 편집기가 iframe으로 들어갑니다. 그 요소에 크기를 주어야 편집기가 보입니다.
4. 프로젝트 id 받아 저장하기
새 프로젝트가 만들어지면 편집기가project-id-created 이벤트를 한 번 보냅니다. 이 id가 있어야 나중에 다시 열거나 주문할 수 있으므로 내 DB에 저장합니다.
5. 편집기 닫기
사용자가 편집기 안에서 저장하고 나가면 편집기가close 또는 goto-cart를 보냅니다.
됐는지 확인하기
편집기가 화면에 보이고, 콘솔에 프로젝트 id가 찍히고, 편집기에서 나가기를 누르면
waitForExit()가 resolve됩니다.다음 단계
큰 그림
세 참여자가 무엇을 주고받는지 정리합니다.
편집기 띄우기
세 가지 띄우기 메서드와 전체 옵션을 봅니다.
주문
편집이 끝난 프로젝트를 주문으로 넘깁니다.
Server API
엔드포인트별 요청과 응답을 확인합니다.