Skip to main content
이 문서를 끝내면 내 페이지 안에 Edicus 편집기가 떠 있고, 사용자가 만든 프로젝트의 id를 내 서버에 저장할 수 있습니다. 15분 정도 걸립니다.
API 키는 고객사 서버에만 둡니다. 브라우저 코드나 공개 저장소에 넣지 마세요. 브라우저에는 API 키로 발급받은 토큰만 내려보냅니다.

준비물

  • 파트너 코드와 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를 보냅니다.
save-doc-report 핸들러에서 내 서버로 무언가를 보내고 계시다면 waitForExit()를 꼭 쓰세요. 그 비동기 작업이 끝나기 전에 화면을 떠나면 반영이 유실됩니다. 자세한 내용은 닫기와 저장 후처리에 있습니다.

됐는지 확인하기

편집기가 화면에 보이고, 콘솔에 프로젝트 id가 찍히고, 편집기에서 나가기를 누르면 waitForExit()가 resolve됩니다.
편집기가 뜨지 않는다면 다음을 확인합니다.

다음 단계

큰 그림

세 참여자가 무엇을 주고받는지 정리합니다.

편집기 띄우기

세 가지 띄우기 메서드와 전체 옵션을 봅니다.

주문

편집이 끝난 프로젝트를 주문으로 넘깁니다.

Server API

엔드포인트별 요청과 응답을 확인합니다.