> ## 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.

# Preview 모드

> 저장된 프로젝트를 읽기 전용으로 보여주기

Preview는 저장된 프로젝트를 읽기 전용으로 보여주는 모드입니다. 편집 기능은 없고, 페이지 이동과 가변 데이터 주입만 지원합니다. 주문 내역 화면에서 사용자가 만든 결과물을 다시 보여줄 때 씁니다.

## 띄우기

```ts theme={null}
const session = edicus.openPreview({
  parent_element: el,
  token,
  project_id,
  partner: '<파트너 코드>',
  uid: 'CUSTOMER_UID',
  npage: 2,
})
```

필수 옵션은 `project_id`, `partner`, `uid`, `token`, `parent_element`입니다. `ps_code`는 선택입니다.

<Note>
  `partner`와 `uid`는 Preview에만 있는 필수값입니다. 다른 띄우기 메서드에서는 `partner`가 선택이고 `uid`는 아예 없습니다.
</Note>

## 옵션

<ParamField path="div" type="string" default="host">
  division code입니다. 생략하면 SDK가 `'host'`를 채워 넣습니다.
</ParamField>

<ParamField path="lang" type="'ko' | 'en' | 'ja'" default="ko">
  언어 코드입니다. 생략하면 SDK가 `'ko'`를 채워 넣습니다.
</ParamField>

<ParamField path="npage" type="number | 'auto'" default="1">
  한 화면에 보여줄 페이지 수입니다. `'auto'`면 상품의 pageGroup 설정을 따릅니다.
</ParamField>

<ParamField path="flow" type="'horizontal' | 'vertical' | `grid:${number}`" default="horizontal">
  페이지 배치 방향입니다. `grid:312`처럼 썸네일 크기를 함께 지정할 수 있습니다.
</ParamField>

<ParamField path="mode" type="string" default="default">
  생략하면 SDK가 `'default'`를 채워 넣습니다. 현재 Preview는 이 값에 따라 동작을 바꾸지 않으므로 생략해도 됩니다.
</ParamField>

<ParamField path="options" type="Record<string, unknown>">
  추가 설정입니다. 지연 파라미터입니다.
</ParamField>

<ParamField path="data_row" type="unknown">
  첫 렌더에 바로 반영할 VDP 행입니다. 지연 파라미터입니다.
</ParamField>

<ParamField path="zoom" type="{ method?: string; maxScale?: number }">
  줌 옵션입니다. 지연 파라미터입니다.
</ParamField>

지연 파라미터가 있으면 URL에 `wait_options`, `wait_data_row`, `wait_zoom` 플래그가 붙고, Preview가 요청할 때 SDK가 값을 보냅니다. [띄우기 옵션](/docs/reference/launch-options#지연-파라미터)을 보세요.

## 이벤트

`type`은 전부 `from-edicus-preview`입니다.

| action | payload | 설명 |
| - | - | - |
| `open-report` | `{ status } & Record<string, unknown>` | 프로젝트 로드의 시작, 끝, 실패를 알립니다. `status`는 `'start'`, `'end'`, `'error'` 중 하나입니다 |
| `close` | `undefined` | 브라우저 뒤로가기 등으로 미리보기를 닫아야 할 때 옵니다 |
| `page-updated` | `unknown` | 표시 중인 페이지가 바뀌었습니다 |
| `doc-changed` | `DocChanged` | 문서가 로드되거나 변경됐습니다 |
| `set-data-row-report` | `SetDataRowReport` | `set-data-row` 커맨드가 문서 로드 전에 전송됐을 때의 실패 리포트입니다 |
| `zoom-scale-changed` | `{ scale: number }` | 줌 배율이 바뀌었습니다 |
| `save-doc-report` | `SaveDocReport` | 타입에는 있지만 현재 편집기 소스에는 이 이벤트를 보내는 실행 경로가 없습니다 |

`PreviewSession.waitForExit()`는 `close`를 기다려 `'close'`로 resolve합니다.

브라우저 뒤로가기를 눌렀을 때 정리하는 것은 호스트의 몫입니다.

```ts theme={null}
session.on('close', () => {
  session.close()
})
```

## 페이지 이동

TnView와 같습니다.

```ts theme={null}
session.movePage('prev')
session.movePage('next')
```

## 가변 데이터

`PreviewSession`에는 `setVariableDataRow` 헬퍼가 없습니다. `set-data-row` 커맨드를 직접 보냅니다.

```ts theme={null}
session.post('set-data-row', { cols: [{ id: 'name', value: { text: '전 지 현' } }] })
```

타입은 TnView와 같은 `VariableDataRow`입니다. [TnView와 VDP](/docs/sdk/tnview#vdp-타입)를 보세요.

## 커맨드

`type`은 전부 `to-edicus-preview`입니다.

| action | info | 설명 |
| - | - | - |
| `set-data-row` | `VariableDataRow \| VariableDataRow[]` | 가변 데이터를 반영합니다 |
| `move-page` | `{ direction: 'prev' \| 'next' }` | 페이지를 이동합니다 |
| `set-zoom-scale` | `unknown` | 줌 배율을 바꿉니다 |
| `set-flow` | `unknown` | 페이지 배치를 바꿉니다 |

## 다음 단계

<Columns cols={2}>
  <Card title="TnView와 VDP" icon="table-cells" href="/docs/sdk/tnview">
    가변 데이터를 다루는 전체 흐름을 봅니다.
  </Card>

  <Card title="Server API 호출하기" icon="server" href="/docs/server/client">
    서버에서 프로젝트를 조회합니다.
  </Card>
</Columns>


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