# 댓글

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

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

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

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

---

#### Package metadata

```json
{
  "mobile": true,
  "preset": [
    {
      "client": "@univerjs/preset-docs-thread-comment",
      "locale": "@univerjs/preset-docs-thread-comment/locales/en-US",
      "style": "@univerjs/preset-docs-thread-comment/lib/index.css"
    }
  ],
  "plugins": [
    {
      "client": "@univerjs/thread-comment"
    },
    {
      "client": "@univerjs/thread-comment-ui",
      "locale": "@univerjs/thread-comment-ui/locale/en-US",
      "style": "@univerjs/thread-comment-ui/lib/index.css"
    },
    {
      "client": "@univerjs/docs-thread-comment",
      "facade": "@univerjs/docs-thread-comment/facade"
    },
    {
      "client": "@univerjs/docs-thread-comment-ui",
      "locale": "@univerjs/docs-thread-comment-ui/locale/en-US",
      "style": "@univerjs/docs-thread-comment-ui/lib/index.css"
    }
  ],
  "server": "optional"
}
```

댓글 기능을 사용하면 문서 안에 댓글과 답글을 추가하여 팀원 간의 소통과 협업을 원활하게 할 수 있습니다.

## 플러그인 모드

### 설치

#### npm

```bash
npm install @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/docs-thread-comment @univerjs/docs-thread-comment-ui
```

#### pnpm

```bash
pnpm add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/docs-thread-comment @univerjs/docs-thread-comment-ui
```

#### yarn

```bash
yarn add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/docs-thread-comment @univerjs/docs-thread-comment-ui
```

#### bun

```bash
bun add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/docs-thread-comment @univerjs/docs-thread-comment-ui
```

### 사용법

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverDocsThreadCommentPlugin } from '@univerjs/docs-thread-comment' // [!code ++]
import { UniverDocsThreadCommentUIPlugin } from '@univerjs/docs-thread-comment-ui' // [!code ++]
import { UniverThreadCommentPlugin } from '@univerjs/thread-comment' // [!code ++]
import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui' // [!code ++]
import DocsCommentLocale from '@univerjs/docs-thread-comment-ui/locale/en-US'
import ThreadCommentUIEnUS from '@univerjs/thread-comment-ui/locale/en-US' // [!code ++]

import '@univerjs/docs-thread-comment/facade' // [!code ++]
import '@univerjs/docs-thread-comment-ui/lib/index.css'
import '@univerjs/thread-comment-ui/lib/index.css' // [!code ++]

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

univer.registerPlugin(UniverThreadCommentPlugin) // [!code ++]
univer.registerPlugin(UniverThreadCommentUIPlugin) // [!code ++]
univer.registerPlugin(UniverDocsThreadCommentPlugin) // [!code ++]
univer.registerPlugin(UniverDocsThreadCommentUIPlugin) // [!code ++]
```

#### 공동 편집 기능과 함께 사용

[공동 편집](https://docs.univer.ai/ko-KR/guides/docs/features/collaboration.md) 기능을 사용하는 경우 다음과 같이 구성합니다.

#### npm

```bash
npm install @univerjs-pro/thread-comment-datasource
```

#### pnpm

```bash
pnpm add @univerjs-pro/thread-comment-datasource
```

#### yarn

```bash
yarn add @univerjs-pro/thread-comment-datasource
```

#### bun

```bash
bun add @univerjs-pro/thread-comment-datasource
```

```typescript
import { UniverThreadCommentDataSourcePlugin } from '@univerjs-pro/thread-comment-datasource' // [!code ++]

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

## 모바일 지원

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

| 패키지                                | 데스크톱 등록                           | 모바일 등록                                  |
| ---------------------------------- | --------------------------------- | --------------------------------------- |
| `@univerjs/docs-thread-comment-ui` | `UniverDocsThreadCommentUIPlugin` | `UniverDocsThreadCommentMobileUIPlugin` |
| `@univerjs/thread-comment-ui`      | `UniverThreadCommentUIPlugin`     | `UniverThreadCommentMobileUIPlugin`     |

## 프리셋 모드

### 설치

#### npm

```bash
npm install @univerjs/preset-docs-thread-comment
```

#### pnpm

```bash
pnpm add @univerjs/preset-docs-thread-comment
```

#### yarn

```bash
yarn add @univerjs/preset-docs-thread-comment
```

#### bun

```bash
bun add @univerjs/preset-docs-thread-comment
```

### 사용법

```typescript
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'
import { UniverDocsThreadCommentPreset } from '@univerjs/preset-docs-thread-comment' // [!code ++]
import UniverPresetDocsThreadCommentEnUS from '@univerjs/preset-docs-thread-comment/locales/en-US' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-docs-core/lib/index.css'
import '@univerjs/preset-docs-thread-comment/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(
      UniverPresetDocsCoreEnUS,
      UniverPresetDocsThreadCommentEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverDocsCorePreset(),
    UniverDocsThreadCommentPreset(), // [!code ++]
  ],
})
```

## 댓글 Facade

공통 댓글 Facade와 제품 Facade를 모두 가져오세요. 제품 메서드는 안정적인 앵커를 만들고 공통 API는 답글, 수정, 해결 및 삭제를 처리합니다. `getComments()`는 로컬 상태를 읽습니다. `listCommentsAsync()`는 설정된 데이터 소스를 통해 알려진 스레드를 동기화하며 서버의 모든 스레드를 검색하지 않습니다.

```ts
import '@univerjs/thread-comment/facade'
import '@univerjs/docs-thread-comment/facade'

const range = univerAPI.getActiveDocument()?.getTextRange(0, 1)
if (range) {
  await range.createCommentAsync('Please review this text.')
  console.log(await range.listCommentsAsync())
}
```

```ts
import '@univerjs/thread-comment/facade'

const [thread] = univerAPI.getComments({ resolved: false })
if (thread) {
  await univerAPI.replyCommentAsync({
    unitId: thread.unitId,
    subUnitId: thread.subUnitId,
    threadId: thread.threadId,
    content: 'Reviewed.',
  })
}
```

## 공유 토론

[Server SDK](https://docs.univer.ai/ko-KR/server/collaboration/extensions.md)로 Comment Service와 Endpoint를 통합하고 협업 및 라이선스를 설정한 뒤 `@univerjs-pro/thread-comment-datasource`의 `UniverThreadCommentDataSourcePlugin`을 등록하세요. 내장 데이터 소스는 `/universer-api/comment/unit/{unitId}/...`와 `/universer-api/user/list`를 사용하므로 앱에서 해당 경로를 제공해야 합니다. 서버는 문서 편집 권한과 별도로 댓글 읽기 및 쓰기 권한을 확인해야 합니다.