# 사용자 지정 컴포넌트

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

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

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

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

---

`UniverPdfsUIPlugin`은 Univer 표준 워크벤치 영역으로 PDF 인터페이스를 구성합니다.

| 모드                     | PDF UI 플러그인이 마운트하는 컴포넌트                                |
| ---------------------- | ------------------------------------------------------ |
| 항상                     | 왼쪽 사이드바의 페이지 썸네일 레일, 콘텐츠 영역의 PDF 캔버스, PDF 푸터.          |
| `editor.enabled: true` | 리본과 컨텍스트 메뉴, 속성 검사기, 클립보드 통합, 삽입 컨트롤 및 편집기 전용 메뉴 컴포넌트. |

`editor.enabled: false`로 설정하면 뷰어 영역은 유지되고 편집기 전용 컴포넌트와 서비스는 생략됩니다.

## PDF 컴포넌트 경계

PDF 캔버스, 썸네일 레일, 푸터, 검사기, 표 선택기 및 도구 모드 레이블의 React 뷰와 컴포넌트 식별자는 내부 구현 세부 사항입니다. `@univerjs-pro/pdfs-ui` 루트 엔트리는 이를 내보내지 않으며 지원되는 교체 슬롯도 아닙니다.

내부 키를 추측하거나 복사해 `univerAPI.registerComponent`로 이러한 뷰를 교체하지 마세요. PDF 동작은 [PDF Facade 가이드](https://docs.univer.ai/ko-KR/guides/pdfs/getting-started/facade.md)의 지원 API로 제어하세요.

## PDF 옆에 애플리케이션 UI 추가

공유 UI Facade를 사용하면 애플리케이션 컴포넌트를 등록하고 일반 Univer 사이드바나 대화 상자에 표시할 수 있습니다. 이는 주변 애플리케이션을 확장하며 PDF 플러그인 컴포넌트를 교체하지 않습니다.

```tsx
const registration = univerAPI.registerComponent(
  'pdf-help-panel',
  () => <div>PDF workflow help</div>,
)

const sidebar = univerAPI.openSidebar({
  id: 'pdf-help',
  header: { title: 'PDF help' },
  children: { label: 'pdf-help-panel' },
  width: 320,
})

// 확장이 더 이상 필요하지 않을 때:
sidebar.dispose()
registration.dispose()
```

UI Facade를 로드한 후 컴포넌트를 등록하고 확장을 제거할 때 두 핸들을 모두 해제하세요.