# 슬라이드 페이지와 요소

- Human documentation: [https://docs.univer.ai/ko-KR/guides/slides/model/slide-page](https://docs.univer.ai/ko-KR/guides/slides/model/slide-page)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/slides/model/slide-page.md](https://docs.univer.ai/ko-KR/guides/slides/model/slide-page.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [slides/model/slide-page.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/model/slide-page.ko-KR.mdx)

---

## ISlidePage

`ISlidePage`는 Univer Slides의 단일 페이지형 객체를 나타냅니다. 일반 슬라이드, 마스터, 레이아웃, 유인물 마스터, 노트 마스터는 모두 이 구조를 사용하며 `pageType`과 선택적 속성 블록으로 구분됩니다.

### 페이지 속성

| 속성                 | 타입                                      | 설명                                         |
| ------------------ | --------------------------------------- | ------------------------------------------ |
| id                 | `string`                                | 고유한 페이지 ID입니다.                             |
| pageType           | `PageType`                              | `SLIDE`, `MASTER`, `LAYOUT`과 같은 페이지 종류입니다. |
| zIndex             | `number`                                | 페이지의 렌더링 순서입니다.                            |
| title              | `string`                                | 페이지 제목입니다.                                 |
| description        | `string`                                | 페이지 설명입니다.                                 |
| pageBackgroundFill | `IColorStyle`                           | 페이지 배경 채우기입니다.                             |
| colorScheme?       | `ThemeColorType`                        | 페이지에서 사용하는 테마 색 구성표입니다.                    |
| pageElements       | `{ [elementId: string]: IPageElement }` | 요소 ID를 키로 사용하는 이 페이지의 요소입니다.               |
| slideProperties?   | `ISlideProperties`                      | 일반 슬라이드 페이지의 속성입니다.                        |
| layoutProperties?  | `ILayoutProperties`                     | 레이아웃 페이지의 속성입니다.                           |
| masterProperties?  | `IMasterProperties`                     | 마스터 페이지의 속성입니다.                            |

## IPageElement

`IPageElement`는 공통 요소 컨테이너입니다. 모든 요소에는 `left`, `top`, `width`, `height`, `angle`, `scaleX`, `scaleY`, `flipX`, `flipY`와 같은 변환 필드가 있으며, `type`에 따라 선택되는 하나의 콘텐츠 페이로드가 있습니다.

| 요소 타입                         | 페이로드          | 설명                                                    |
| ----------------------------- | ------------- | ----------------------------------------------------- |
| `PageElementType.SHAPE`       | `shape`       | 도형 텍스트와 도형 속성을 포함하는 프리셋 또는 사용자 지정 도형입니다.              |
| `PageElementType.IMAGE`       | `image`       | 이미지 속성과 선택적 자리 표시자/링크 메타데이터입니다.                       |
| `PageElementType.TEXT`        | `richText`    | 리치 텍스트 요소입니다. `rich` 필드에 `IDocumentData`를 저장할 수 있습니다. |
| `PageElementType.SPREADSHEET` | `spreadsheet` | 더 이상 사용되지 않는 내장 워크시트 페이로드입니다.                         |
| `PageElementType.DOCUMENT`    | `document`    | 더 이상 사용되지 않는 내장 문서 페이로드입니다.                           |
| `PageElementType.SLIDE`       | `slide`       | 더 이상 사용되지 않는 내장 슬라이드 페이로드입니다.                         |

### 예제

```typescript
const page: ISlidePage = {
  id: 'slide-1',
  pageType: PageType.SLIDE,
  zIndex: 10,
  title: 'Agenda',
  description: '',
  pageBackgroundFill: { rgb: 'rgb(255,255,255)' },
  pageElements: {
    title: {
      id: 'title',
      zIndex: 1,
      left: 72,
      top: 64,
      width: 600,
      height: 80,
      title: 'Title',
      description: '',
      type: PageElementType.TEXT,
      richText: {
        text: 'Quarterly Review',
      },
    },
  },
}
```

### 참고

* `pageOrder`는 표시되는 슬라이드 순서를 제어하고, `zIndex`는 그리기 순서를 제어합니다.
* 텍스트 요소는 일반 `text` 또는 `richText.rich`를 통한 더 풍부한 문서 데이터를 저장할 수 있습니다.
* 더 이상 사용되지 않는 내장 페이로드를 확장하는 대신 플러그인이 소유하는 요소 페이로드에는 `customBlock`을 사용하세요.