# 셀 메모

## Content

SpreadJS는 [셀 코멘트](https://developer.mescius.com/spreadjs/api/modules/GC.Spread.Sheets.Comments)에 대해 풍부한 사용자 정의 기능을 제공하며, 시각적 스타일, 레이아웃 조정, 상호작용 동작을 지원합니다. 텍스트 서식, 박스 및 표시 아이콘 커스터마이징, 표시 모드 등의 기능을 통해 사용성을 높이고, 개발자가 애플리케이션 요구에 맞게 코멘트의 외형과 동작을 정확히 조정할 수 있습니다.

## 메모 생성 및 사용자 정의

특정 셀에 코멘트를 추가하려면 [add](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Comments.CommentManager#add) 메서드를 호출합니다.

```javascript
// cell(5,5)에 코멘트 생성
var comment = activeSheet.comments.add(5,5,"new comment!");
```

![image.d2f6ce.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.d2f6ce.e012b1.png?width=550)
[comment](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Comments.Comment) 클래스를 통해 코멘트 스타일을 세밀하게 제어할 수 있습니다. 아래 예시는 기존 코멘트의 박스와 텍스트에 대한 기본 스타일 설정 방법입니다.

```javascript
// 코멘트 스타일 설정

// 박스 커스터마이징
comment.backColor("#ff0000");
comment.borderColor("rgb(46, 119, 183)");
comment.borderStyle("dashed");
comment.borderWidth(4);

// 텍스트 서식
comment.fontSize("11pt");
comment.fontStyle("italic");
comment.fontWeight("bold");
comment.foreColor("#e7e6e6");
comment.horizontalAlign(1);
comment.textDecoration(1);
```

![image.5e9602.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.5e9602.e435cc.png?width=550)

### 배경색 설정

SpreadJS는 셀 코멘트 `backcolor`를 설정할 때 **다섯 가지 입력 방식**을 지원하여 유연하고 정밀한 사용자 정의가 가능합니다.

1. **RGB(16진수)** – `#FF0000`과 같이 16진수 코드를 사용하여 정확한 색 지정.
2. **RGB(숫자)** – `RGB(255, 0, 0)`과 같이 RGB 값을 사용. RGB 색상 모델에 익숙한 개발자에게 유용.
3. **사전 정의된 색상 이름** – 고정된 색상 이름 선택 가능, 코드 사용 없이 간편.
4. **[테마 색상](https://developer.mescius.com/spreadjs/docs/features/styletheme/themes#strongtheme-colorsstrong)** – 현재 문서 테마에 연동된 색상 사용, 문서 전체 디자인과 일관성 유지.
5. **시스템 테마 이름** – Excel과의 호환성을 위해 Excel 2019의 색상 이름 사용. 현재 두 가지 지원: `SJS_infoBackground`, `SJS_window`.
    1. `SJS_infoBackground`: 기본값 `#FFFFE1`, Excel의 infoBackground와 동일.
    2. `SJS_window`: 기본값 `#FFFFFF`, Excel의 window와 동일.

>type=note
> **참고:** 프론트엔드에서는 Excel 시스템 색상 API를 직접 호출할 수 없으므로, SpreadJS는 Excel 2019 공개 색상 기준으로 이 두 값을 사전 설정했습니다. 기본 색상이 맞지 않는 경우, `SJS_infoBackground` 및 `SJS_window` 색상을 사용자 정의할 수 있습니다.

아래 예시는 `SJS_infoBackground` 색상을 정의하고 기존 코멘트 박스의 `backColor`를 업데이트합니다.

```javascript
// 사용자 정의 색상 정의
var infoBkStyle = new GC.Spread.Sheets.Style();
infoBkStyle.name = 'SJS_infoBackground';
infoBkStyle.backColor = '#FFFFE1';

// Spread의 명명 스타일 컬렉션에 추가
spread.addNamedStyle(infoBkStyle);

// 코멘트 배경색 설정
comment.backColor("SJS_infoBackground");
```

![image.dbad7c.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.dbad7c.57e417.png?width=550)

### 표시 모드 선택

셀 코멘트의 `displayMode` 메서드는 두 가지 모드를 지원합니다:

1. `alwaysShown` – 코멘트를 대상 셀 옆에 항상 표시.
2. `hoverShown` – 셀의 표시 아이콘 위로 마우스를 올렸을 때만 표시.

```javascript
comment.displayMode(GC.Spread.Sheets.Comments.DisplayMode.alwaysShown);
```

![pt1.1061c5.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/pt1.1061c5.fb10ff.gif?width=550)

```javascript
comment.displayMode(GC.Spread.Sheets.Comments.DisplayMode.hoverShown);
```

![pt2.af9276.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/pt2.af9276.c8a832.gif?width=550)

### 표시 아이콘 사용자 정의

코멘트 생성 시, 대상 셀의 오른쪽 상단에 작은 빨간 삼각형 아이콘이 자동으로 삽입됩니다. [indicatorColor](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Comments.Comment#indicatorColor)와 [indicatorSize](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Comments.Comment#indicatorSize) 메서드를 사용하여 색상과 크기를 변경할 수 있습니다.

```javascript
comment.indicatorColor("green");
comment.indicatorSize(15);
```

![image.e7eaff.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.e7eaff.f36c8e.png?width=550)

## 코멘트 크기/이동/편집

코멘트를 직접 크기 조정, 이동, 편집할 수 있습니다.

>type=note
> **참고:** [commentState](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Comments.Comment#commentstate)를 통해 코멘트 상태를 가져오거나 설정 가능.

선택 시 표시되는 크기 조정 아이콘과, 코멘트 테두리에 마우스를 올릴 때 나타나는 이동 아이콘:
![1.2.0936d2.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/1.2.0936d2.4c4c7d.png?width=550)
크기 조정:
![pt3.2.af0ebb.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/pt3.2.af0ebb.e0f808.gif?width=550)

이동:
![pt3.1.7ee23b.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/pt3.1.7ee23b.1b1b2f.gif?width=550)

편집:
![pt3.3.563e94.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/pt3.3.563e94.e5acb1.gif?width=550)

## 코멘트 잠금

시트 옵션 [isProtected](https://developer.mescius.com/spreadjs/api/interfaces/GC.Spread.Sheets.IWorksheetOptions#isprotected)가 true로 설정되면, 코멘트 이벤트나 텍스트를 잠글 수 있습니다.

| **[Locked](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Comments.Comment#locked)** | **[LockText](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Comments.Comment#locktext)** | **결과** |
| ------ | -------- | --- |
| false | false | 코멘트 동작 가능; 편집 가능 |
| true | false | 코멘트 동작 불가; 편집 가능 |
| false | true | 코멘트 동작 가능; 편집 불가 |
| true | true | 코멘트 동작 불가; 편집 불가 |

## **동적 코멘트 크기 조정 및 위치 변경**

행 또는 열 크기 변경 시, [dynamicMove](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Comments.Comment#dynamicMove)와 [dynamicSize](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Comments.Comment#dynamicSize) 설정에 따라 코멘트 위치와 크기가 변경될 수 있습니다.

| **DynamicMove** | **DynamicSize** | **결과** |
| ----------- | ----------- | --- |
| true | true | 셀과 함께 이동 및 크기 변경 |
| true | false | 이동만 가능, 크기 변경 불가 |
| false | true 또는 false | 이동 및 크기 변경 불가 |

## 기타 팁

* 코멘트 편집 모드에서는 텍스트 잘라내기, 복사, 붙여넣기 가능.
* 셀 복사 시, 코멘트도 함께 복사됨.
* 코멘트 텍스트 잘라내기/복사/붙여넣기, 크기 조정, 이동, 서식 변경 시, 실행 취소 및 다시 실행 지원.
* Excel 형식 파일에서 코멘트를 가져올 때 일부 제한 있음:
    * 일부 테두리 스타일과 글꼴은 가져오지 않음.
    * 시트 범위가 원본 파일보다 작으면 코멘트 위치가 달라질 수 있음.
* 코멘트는 XLSX 파일에서 가져오기 가능.