# UI 개요

- Human documentation: [https://docs.univer.ai/ko-KR/guides/bases/ui/overview](https://docs.univer.ai/ko-KR/guides/bases/ui/overview)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/bases/ui/overview.md](https://docs.univer.ai/ko-KR/guides/bases/ui/overview.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [bases/ui/overview.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/bases/ui/overview.ko-KR.mdx)

---

`@univerjs-pro/bases-ui`는 라이선스가 필요한 Univer Bases 브라우저 워크벤치를 제공합니다. 테이블과 뷰 탐색, 그리드, 칸반, 캘린더, 간트, 갤러리 뷰와 필드 편집기, 레코드 상세 패널, 메뉴, 선택 상태를 렌더링합니다.

## 워크벤치 등록

Bases 플러그인보다 먼저 라이선스와 수식 엔진을 등록합니다. 수식 필드는 `@univerjs-pro/engine-formula`를 사용하며 Sheets 애플리케이션이 필요하지 않습니다.

```ts
univer.registerPlugin(UniverLicensePlugin, {
  license: process.env.CLIENT_LICENSE_TEXT,
})

univer.registerPlugin(UniverProFormulaEnginePlugin)
univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverUIPlugin, { container: 'app' })
univer.registerPlugin(UniverBasesPlugin)
univer.registerPlugin(UniverBasesUIPlugin)
```

가져오기, 스타일, 로케일 설정은 [설치 및 기본 사용법](https://docs.univer.ai/ko-KR/guides/bases/getting-started/installation.md)을 참고하세요.

## 초기 레이아웃 구성

`IUniverBaseUIConfig`는 워크벤치 영역과 시작할 때 표시할 테이블 및 뷰를 제어합니다.

```ts
univer.registerPlugin(UniverBasesUIPlugin, {
  workbench: {
    header: true,
    headerMenu: true,
    content: true,
    leftSidebar: true,
    rightSidebar: false,
    rightPanelMode: 'dock',
  },
  initialState: {
    tableId: 'tasks',
    viewId: 'kanban',
  },
})
```

읽기 전용 워크벤치에는 `disableEdit`를 사용합니다. 해당 필드에 호스트 데이터가 필요한 경우에만 `attachment`, `personOptions`, `groupOptions`를 설정하세요.