# 콜아웃

- Human documentation: [https://docs.univer.ai/ko-KR/guides/docs/features/callout](https://docs.univer.ai/ko-KR/guides/docs/features/callout)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/docs/features/callout.md](https://docs.univer.ai/ko-KR/guides/docs/features/callout.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [docs/features/callout.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/docs/features/callout.ko-KR.mdx)

---

#### Package metadata

```json
{
  "mobile": true,
  "plugins": [
    {
      "client": "@univerjs-pro/docs-callout",
      "facade": "@univerjs-pro/docs-callout/facade"
    },
    {
      "client": "@univerjs-pro/docs-callout-ui",
      "locale": "@univerjs-pro/docs-callout-ui/locale/en-US",
      "style": "@univerjs-pro/docs-callout-ui/lib/index.css"
    }
  ],
  "license": true,
  "server": false
}
```

콜아웃 기능을 사용하면 아이콘과 색상을 원하는 대로 설정할 수 있는 시각적으로 구분된 블록으로 문서의 중요한 정보를 강조할 수 있습니다.

## 소개

Univer Docs의 콜아웃 블록으로 다음 작업을 할 수 있습니다.

* **핵심 정보 강조**: 중요한 참고 사항, 경고 또는 팁에 주의를 집중시킵니다.
* **모양 사용자 지정**: 콘텐츠에 맞는 다양한 아이콘과 색상 조합을 선택합니다.
* **콘텐츠 구성**: 시각적으로 구분된 섹션으로 문서를 구조화합니다.

## 플러그인 모드

### 설치

#### npm

```bash
npm install @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
```

#### pnpm

```bash
pnpm add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
```

#### yarn

```bash
yarn add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
```

#### bun

```bash
bun add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-ui
```

### 사용법

```typescript
import { UniverDocsCalloutPlugin } from '@univerjs-pro/docs-callout' // [!code ++]
import { UniverDocsCalloutUIPlugin } from '@univerjs-pro/docs-callout-ui' // [!code ++]
import DocsCalloutUIEnUS from '@univerjs-pro/docs-callout-ui/locale/en-US' // [!code ++]
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'

import '@univerjs-pro/docs-callout-ui/lib/index.css' // [!code ++]

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(
      DocsCalloutUIEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverDocsCalloutPlugin) // [!code ++]
univer.registerPlugin(UniverDocsCalloutUIPlugin) // [!code ++]
```

Univer 상용 라이선스가 있다면 구성 방법은 [클라이언트에서 라이선스 사용하기](https://docs.univer.ai/ko-KR/server/license.md#in-plugin-mode)를 참고하세요.

## 모바일 지원

먼저 [모바일 에디터](https://docs.univer.ai/ko-KR/guides/docs/getting-started/installation.md#mobile-support)를 구성하세요. 이 페이지의 플러그인 모드 초기화 코드에서 아래 데스크톱 등록을 같은 패키지의 모바일 버전으로 바꾸고 **문서를 열기 전에** 완료하세요. 모델 플러그인, 스타일, 언어 파일과 Facade 가져오기는 유지하며 두 버전을 동시에 등록하지 마세요.

| 패키지                             | 데스크톱 등록                     | 모바일 등록                            |
| ------------------------------- | --------------------------- | --------------------------------- |
| `@univerjs-pro/docs-callout-ui` | `UniverDocsCalloutUIPlugin` | `UniverDocsCalloutMobileUIPlugin` |

## Facade API

API를 사용하기 전에 facade를 반드시 가져오세요.

```typescript
import '@univerjs-pro/docs-callout/facade'
```

### 모든 콜아웃 가져오기

```typescript
const doc = univerAPI.getActiveDocument()
const callouts = doc?.getCallouts() ?? []
```

### ID로 콜아웃 가져오기

```typescript
const doc = univerAPI.getActiveDocument()
const callout = doc?.getCallout('callout-block-id')
```

### 콜아웃 삽입하기

```typescript
const doc = univerAPI.getActiveDocument()
const callout = doc?.insertCallout({
  startOffset: 12,
  endOffset: 35,
  config: { icon: '💡' },
})
```

### 콜아웃 구성 업데이트하기

```typescript
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')
callout?.updateConfig({ icon: '⚠️' })
```

### 콜아웃 모양 설정하기

```typescript
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')
callout?.setIcon('📝')
callout?.setBackgroundColor('#FFF4E5')
callout?.setBorder({ color: '#E6A23C', width: 2 })
callout?.setTextColor('#5C3B00')
```