# 컨텍스트 메뉴

## Content

컨텍스트 메뉴는 단일 수준 또는 다중 수준의 팝업 메뉴로, 사용자가 워크시트에서 마우스 오른쪽 클릭으로 상호작용할 때 선택 항목(메뉴 아이템) 을 제공합니다.
SpreadJS는 사용자가 스프레드시트에서 마우스 오른쪽 클릭 이벤트를 발생시키면 표시되는 기본 제공 컨텍스트 메뉴를 지원합니다. 이를 통해 중요하거나 반복적인 작업을 빠르게 실행할 수 있는 유연성을 제공합니다.
메뉴 항목은 워크시트에서 클릭한 영역에 따라 다르게 표시되며, 사용자 정의 메뉴 항목을 추가하거나 제거하여 컨텍스트 메뉴의 구조를 자유롭게 커스터마이즈할 수 있습니다.
다음 이미지는 기본 제공 컨텍스트 메뉴와 위/아래 스크롤 표시 아이콘을 보여줍니다. 이러한 인디케이터는 메뉴가 창에 완전히 표시되지 않을 경우 나타납니다. 해당 인디케이터에 마우스를 올리면 해당 방향으로 메뉴가 스크롤되며, 클릭 시에는 즉시 해당 방향으로 스크롤됩니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ContextMenu.png)

## 기본 컨텍스트 메뉴 사용자 지정

SpreadJS는 **GC.Spread.Sheets.ContextMenu.MenuView** 클래스를 통해 기본 컨텍스트 메뉴의 커스터마이징을 지원합니다. 정의된 스타일 클래스를 재정의하여 다른 스타일을 적용할 수 있으며, 단일 수준 및 다중 수준 컨텍스트 메뉴에 대해 사용자 정의 메뉴 항목을 추가하거나 제거할 수 있습니다.
다만, 생성되는 메뉴 구조는 menu view 설정 및 마우스로 클릭한 영역에 따라 달라질 수 있습니다.
SpreadJS는 컨텍스트 메뉴에 대해 Spread와 유사한 테마를 제공하므로, 메뉴의 외형 및 구조를 수정할 수 있습니다. 또한 필터 컨텍스트 메뉴의 데이터 결과도 조정할 수 있습니다.

## 기본 컨텍스트 메뉴 표시 설정

**GC.Spread.Sheets.Workbook** 클래스의 ***allowContextMenu*** 속성은 기본 제공 컨텍스트 메뉴를 표시할지 여부를 제어할 수 있는 옵션을 사용자에게 제공합니다. 기본적으로 이 옵션은 true로 설정되어 있어, 사용자가 스프레드시트에서 마우스 오른쪽 클릭을 할 때마다 컨텍스트 메뉴가 표시됩니다.
또한, 각각의 [MenuView](/spreadjs/api/classes/GC.Spread.Sheets.ContextMenu.MenuView) 클래스 메서드를 사용하여 컨텍스트 메뉴의 최대 높이와 스크롤 가능한 인디케이터 표시 여부를 설정할 수 있습니다.
**MenuView.maxHeight** 메서드는 정수 값을 받고, **MenuView.scrollable** 메서드는 불리언 값을 받습니다. 기본적으로 이 값은 true로 설정되어 있어 스크롤 인디케이터가 표시됩니다.

```javascript
// 컨텍스트 메뉴를 사용하지 않으려면, 컨텍스트 메뉴 옵션을 끄
var spread = $('#ss').data('workbook');
spread.options.allowContextMenu = false;
//  컨텍스트 메뉴의 스크롤 속성을 true로 설정
spread.contextMenu.menuView.scrollable(true);
spread.contextMenu.menuView.maxHeight(400);
```

## 컨텍스트 메뉴의 보기 및 구조 사용자 정의

이 속성은 [MenuView.createMenuItemElement](/spreadjs/api/classes/GC.Spread.Sheets.ContextMenu.MenuView#createMenuItemElement) 메서드를 사용하여 **메뉴 항목의 보기와 구조를 사용자 정의**할 수 있도록 해줍니다.

```javascript
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
function CustomMenuView() {}
CustomMenuView.prototype = new GC.Spread.Sheets.ContextMenu.MenuView();
CustomMenuView.prototype.createMenuItemElement = function (menuItemData) {
  // 직접 메뉴 항목 뷰를 생성합니다.
  // 필요에 따라 상위 클래스의 createMenuItemElement를 호출하고 일부 메뉴 항목만 사용자 정의할 수 있습니다.
  // 최종적으로 메뉴 항목 뷰를 반환해야 합니다.
};
spread.contextMenu.menuView = new CustomMenuView();
```

## 사용자 정의 메뉴 옵션 추가/제거

이 기능을 사용하면 컨텍스트 메뉴에서 사용자 정의 메뉴 옵션을 추가하거나 제거할 수 있습니다.
각 옵션은 JSON 스키마로 정의된 메뉴 데이터 형식을 따릅니다.

```javascript
//메뉴 데이터 정
var openDialog = {
    text: 'Open Dialog',
    name: 'openDialog',
    command: showLoginDialog,
    workArea: 'viewport'
};
spread.contextMenu.menuData.push(openDialog);
function showLoginDialog() {
    //코드 추가
} 
// 사용자 지정 메뉴 옵션 추가/삭제
$.each(spread.contextMenu.menuData, function (p, v) {
    if (v.name === 'openDialog') { //openDialog 명령 이름
        spread.contextMenu.menuData.splice(p, 1)
    }
});
```