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

# 편집기 띄우기

> 편집기 띄우기 메서드와 공통 옵션

편집기를 띄우는 정식 메서드는 셋입니다. 모두 `EditorSession`을 반환하고, 모두 공통 옵션에 각자 고유한 필드를 더합니다.

## 어떤 메서드를 쓸까요

| 하려는 것 | 메서드 |
| - | - |
| 템플릿으로 새 프로젝트를 만들어 편집합니다 | `createProject` |
| 저장된 프로젝트를 다시 엽니다 | `openProject` |
| 기존 프로젝트를 재활용해 새 프로젝트를 만듭니다. 사용자 사진은 제거됩니다 | `recycleProject` |

| 메서드 | 필수 옵션 | 고유 옵션 |
| - | - | - |
| `createProject(o)` | `ps_code`, `title`, `token`, `parent_element` | `ps_code_param?`, `template_uri?`, `content_uri?` |
| `openProject(o)` | `project_id`, `token`, `parent_element` | `ps_code?` |
| `recycleProject(o)` | `project_id`, `title`, `token`, `parent_element` | 없음 |

<Info>
  `EditorSession`을 반환하는 experimental 메서드도 둘 있습니다. `reformProject`, `fitProject`입니다. v2에 문서 없이 있던 명령을 그대로 옮긴 것이라 옵션 타입이 느슨하고(`ExperimentalLaunchOptions`), SDK가 확인하는 필수 옵션은 `parent_element`와 `token`뿐입니다. 안정 계약으로 보장하지 않으니 새 연동에는 위 세 메서드를 쓰세요. 나머지 experimental 메서드까지 포함한 목록은 [띄우기 옵션](/docs/reference/launch-options#experimental-메서드)에 있습니다.
</Info>

<Note>
  옵션 이름은 `project_id`지만 편집기 URL에는 `prjid`로 나갑니다. SDK가 변환해 줍니다. 같은 개념의 철자가 여러 개인 이유는 [용어집](/docs/reference/glossary#프로젝트-id의-세-가지-철자)에 있습니다.
</Note>

## 새 프로젝트 만들기

```ts theme={null}
import { createEdicusClient } from '@edicus/sdk'

const edicus = createEdicusClient()

const session = edicus.createProject({
  parent_element: document.getElementById('editor-mount')!,
  token,
  partner: '<파트너 코드>',
  ps_code: '90x50@NAMECARD',
  template_uri: 'gcs://template/partners/<파트너 코드>/res/template/<템플릿 ID>.json',
  title: '내 명함',
  mobile: 'm2',
})

const { project_id } = await session.waitFor('project-id-created')
```

새 프로젝트의 id는 `project-id-created` 이벤트로 한 번 옵니다. 이 id를 저장해 두지 않으면 나중에 그 프로젝트를 다시 열 수 없습니다.

## 저장된 프로젝트 열기

```ts theme={null}
const session = edicus.openProject({
  parent_element: el,
  token,
  project_id: '-LiBngTbCFYNjcOVcxcY',
})
```

<Warning>
  주문된 프로젝트(`ordered`)는 편집기로 띄우지 않도록 주의하세요. 띄워서 수정하더라도 이미 주문된 정보는 바뀌지 않습니다. 비동기 복제가 진행 중인 프로젝트(`cloning`)를 열면 로드에 실패합니다.
</Warning>

## 자주 쓰는 공통 옵션

전체 목록은 [띄우기 옵션 레퍼런스](/docs/reference/launch-options)에 있습니다. 여기서는 처음에 알아야 할 것만 봅니다.

<ParamField path="parent_element" type="HTMLElement" required>
  편집기 iframe이 들어갈 요소입니다. 이 요소에 크기가 없으면 편집기가 보이지 않습니다.
</ParamField>

<ParamField path="token" type="string" required>
  서버에서 발급받은 토큰입니다. [토큰과 API 키](/docs/concepts/authentication)를 보세요.
</ParamField>

<ParamField path="partner" type="string">
  모션원에서 발급받은 파트너 코드입니다.
</ParamField>

<ParamField path="ps_code" type="string">
  사이즈코드와 상품코드를 `@`로 붙인 값입니다. 예: `90x50@NAMECARD`
</ParamField>

<ParamField path="template_uri" type="string">
  템플릿 리소스의 uri입니다. 예: `gcs://template/partners/<파트너 코드>/res/template/<템플릿 ID>.json`

  상품 설정의 편집기 종류가 `template`인 상품은 `createProject`에 `template_uri`가 필요합니다. 사진인화(`print`) 상품은 `template_uri`를 읽지 않으므로 넘기지 않아도 됩니다.
</ParamField>

<ParamField path="mobile" type="boolean | 'm2'" default="false">
  모바일 UI를 쓸지 정합니다. `false`는 PC UI, `true`는 기존 모바일 UI, `'m2'`는 신규 모바일 UI입니다.
</ParamField>

<ParamField path="run_mode" type="'standard' | 'preview' | 'vdp'">
  생략하거나 `'standard'`면 일반 편집입니다. `'preview'`는 사진인화 상품의 확인용 화면이고, `'vdp'`는 가변 데이터 편집 모드입니다.
</ParamField>

<ParamField path="num_page" type="number">
  포토북 내지 스프레드의 장수입니다. 주지 않으면 템플릿에 있는 그대로 만듭니다.

  TnView와 Preview의 `npage`(한 화면에 보여줄 페이지 수)와는 **다른 개념입니다.** 이름이 비슷해 혼동하기 쉽습니다.
</ParamField>

<ParamField path="no_update" type="boolean" default="false">
  `true`면 저장 버튼이 **나가기**로 바뀝니다. 누르면 저장하지 않고 바로 `goto-cart`를 보냅니다.
</ParamField>

<ParamField path="lang" type="'ko' | 'en' | 'ja'">
  언어 코드입니다. 생략하면 편집기가 `'ko'`로 씁니다.
</ParamField>

<ParamField path="cal_date" type="string">
  달력 날짜 생성 커맨드입니다. `'2019-1'`이면 2019년 1월부터 12개월 달력을 만듭니다.
</ParamField>

## 필수 옵션을 빠뜨리면

띄우기 메서드는 필수 옵션이 없으면 iframe을 만들기 전에 동기로 예외를 던집니다. 메시지에 어느 키가 빠졌는지 들어 있습니다.

```
[edicus-sdk] createProject: 'ps_code' is required
```

<Note>
  v2는 필수 파라미터가 빠져도 검증 없이 깨진 URL을 만들었습니다. 원인을 알기 어려운 방식으로 실패했었는데, v3에서 고쳤습니다.
</Note>

## 띄운 뒤에 프로젝트나 템플릿 바꾸기

iframe을 새로 만들지 않고 내용만 교체할 수 있습니다.

```ts theme={null}
session.changeProject('PROJECT_ID')
session.changeTemplate({ ps_code: '90x50@NAMECARD', template_uri: 'gcs://...' })
```

<Note>
  `changeTemplate`의 `template_uri`와 `content_uri`는 띄우기 URL과 같은 방식으로 쿼리스트링이 제거됩니다. 서명된 URL의 토큰이 편집기 URL로 새는 것을 막기 위한 처리입니다.
</Note>

## 다음 단계

<Columns cols={2}>
  <Card title="세션 API" icon="code" href="/docs/sdk/session">
    띄운 세션으로 이벤트를 받고 커맨드를 보냅니다.
  </Card>

  <Card title="띄우기 옵션 전체" icon="list" href="/docs/reference/launch-options">
    지연 파라미터를 포함한 모든 옵션을 봅니다.
  </Card>
</Columns>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.