# 보드 요소

- Human documentation: [https://docs.univer.ai/ko-KR/guides/boards/model/board-elements](https://docs.univer.ai/ko-KR/guides/boards/model/board-elements)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/boards/model/board-elements.md](https://docs.univer.ai/ko-KR/guides/boards/model/board-elements.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [boards/model/board-elements.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/boards/model/board-elements.ko-KR.mdx)

---

보드 페이지는 그릴 수 있는 객체를 `elements`에 저장하고, 화면에 표시되는 순서를 `elementOrder`에 저장합니다. 모든 요소에는 안정적인 `id`, `type`, 그리고 캔버스에서의 위치와 크기를 설명하는 `transform`이 있습니다.

## 공통 요소 필드

| 필드           | 타입                         | 설명                                                                                |                        |
| ------------ | -------------------------- | --------------------------------------------------------------------------------- | ---------------------- |
| id           | `string`                   | 페이지 내에서 고유한 요소 ID입니다.                                                             |                        |
| type         | `BoardElementType`         | `text`, `shape`, `image`, `connector`, `container`, `table`, `group` 등의 요소 종류입니다. |                        |
| transform    | `IBoardElementTransform`   | 위치, 크기, 회전, 배율, 기울이기, 뒤집기 값입니다.                                                   |                        |
| parentId?    | `string`                   | 상위 컨테이너 또는 그룹 ID입니다.                                                              |                        |
| laneId?      | `string`                   | 요소가 스윔레인 안에 있을 때의 스윔레인 레인 ID입니다.                                                  |                        |
| name?        | `string`                   | 사람이 읽을 수 있는 요소 이름입니다.                                                             |                        |
| description? | `string`                   | 접근성 또는 애플리케이션 메타데이터입니다.                                                           |                        |
| visible?     | `boolean`                  | 요소를 렌더링할지 여부입니다.                                                                  |                        |
| selectable?  | `boolean`                  | 편집기에서 요소를 선택할 수 있는지 여부입니다.                                                        |                        |
| locked?      | `boolean`                  | 편집이 잠겨 있는지 여부입니다.                                                                 |                        |
| custom?      | \`Record\<string, unknown> | null\`                                                                            | 애플리케이션에서 정의한 메타데이터입니다. |

## 요소 타입

| 타입          | 추가 데이터                              | 일반적인 용도                            |
| ----------- | ----------------------------------- | ---------------------------------- |
| `text`      | `text`, `textStyle`, `textData`     | 스티커 메모, 레이블, 리치 텍스트 블록입니다.         |
| `shape`     | `shapeData`                         | 사각형, 화살표, 설명선, 사용자 정의 도형입니다.       |
| `image`     | `source`, `imageSourceType`, `crop` | 임베딩된 이미지입니다.                       |
| `connector` | `connectorData`                     | 자유 지점이나 도형에 연결된 선과 화살표입니다.         |
| `container` | `containerData`                     | 프레임, 영역, 스윔레인, UML 패키지, 시스템 경계입니다. |
| `table`     | `tableId`                           | 테이블 플러그인에서 제공하는 보드 테이블 요소입니다.      |
| `chart`     | `chartId`                           | 차트 요소입니다.                          |
| `media`     | `mediaType`, `source`               | 오디오 및 동영상 자리표시자입니다.                |
| `group`     | `children`                          | 그룹으로 묶인 요소 모음입니다.                  |

## 컨테이너

컨테이너는 `containerData.behavior`로 포함 관계의 동작을 정의하고 `containerData.capturePolicy`로 캡처 규칙을 정의합니다. 순서와 상하위 관계가 일관되게 유지되도록 요소를 컨테이너 안팎으로 이동할 때는 Facade 컨테이너 메서드를 사용하세요.

```ts
board.wrapElementsInContainer(['task-1', 'task-2'], {
  title: 'Sprint 1',
})
```

## 스윔레인

스윔레인은 `containerData.swimlane`이 있는 컨테이너입니다. 레인에는 안정적인 ID, 제목, 순서 값, 크기와 선택적인 축소 상태가 있습니다.

```ts
board.setSwimlaneLanes('lane-board', {
  orientation: 'horizontal',
  lanes: [
    { id: 'todo', title: 'Todo', order: 0, size: 240 },
    { id: 'doing', title: 'Doing', order: 1, size: 240 },
  ],
})
```

## 커넥터

커넥터는 끝점과 라우팅 데이터를 사용합니다. 끝점은 자유 지점, 도형 경계, 연결 지점 또는 라이프라인일 수 있습니다. 라우팅 데이터는 도형의 기하 정보에 의존하는 경우가 많으므로 커넥터를 편집할 때는 Facade 작업이나 UI 작업을 우선 사용하세요.