# 사용자 정의

## Content

SpreadJS 디자이너 컴포넌트는 다음과 같은 다양한 사용자 정의를 수행할 수 있도록 지원합니다:

* 자주 사용하는 명령어를 위한 새 리본 탭 추가
* 탭에 새 버튼을 추가하여 데이터 저장
* 셀을 잠그는 새 컨텍스트 메뉴 항목 추가
* 사용자 정의 작업을 위한 새 대화 상자 추가

## 디자이너 컴포넌트 용어

디자이너 컴포넌트를 사용자 정의하려면 해당 구성 요소의 레이아웃과 용어를 이해하는 것이 중요합니다. 아래 이미지는 각 디자이너 컴포넌트에 해당하는 용어들을 표시하고 있습니다.
![image.158138.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.158138.b487aa.png)
아래 이미지는 리본 컴포넌트에 해당하는 용어들을 표시하고 있습니다.
![image.2f5127.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/image.2f5127.b844aa.png)

## 디자이너 컴포넌트 사용자 정의를 위한 기본 구성 액세스

SpreadJS 디자이너 컴포넌트는 디자이너 컴포넌트의 기본 구성을 명령 트리 구조로 포함하는 `DefaultConfig` 필드를 제공합니다. 이를 사용하여 디자이너 컴포넌트 구성을 접근하고 사용자 정의할 수 있습니다.

```JavaScript
var config = GC.Spread.Sheets.Designer.DefaultConfig;
```

원하는 사용자 정의를 config 구조 내에서 수행한 뒤, 이를 웹 애플리케이션에서 참조할 수 있습니다. 이후 디자이너 컴포넌트를 초기화할 때 해당 사용자 정의 구성을 매개변수로 전달하면 됩니다. 이는 아래 섹션에서 설명합니다.

## 사용자 정의 구성을 사용하여 디자이너 컴포넌트 초기화

기본 구성을 사용자 정의한 후, 해당 사용자 정의 구성을 `GC.Spread.Sheets.Designer.Designer` 클래스의 매개변수로 전달하세요. 이 클래스는 최대 3개의 매개변수를 받을 수 있으며, 아래와 같이 정의됩니다:

```JavaScript
// 사용자 정의 구성과 Spread 컴포넌트를 함께 사용하여 디자이너를 초기화하세요.
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);
```

* `designerHost` - `HTMLElement`는 디자이너 컴포넌트의 호스트 요소를 나타냅니다.
* `config` \- 레이아웃의 사용자 정의 구성 JSON을 나타내는 객체
* `spread` \- 디자이너 컴포넌트에 연결된 SpreadJS 인스턴스를 나타내는 `GC.Spread.Sheets.Workbook` 인스턴스

`config`와 `spread` 매개변수는 선택 사항입니다. 제공하지 않으면 디자이너는 기본 디자이너 컴포넌트를 사용하며, 새로운 스프레드시트를 생성합니다.

## 사용자 정의 가능 범위

다음 항목들은 디자이너 컴포넌트에서 가능한 사용자 정의의 범위를 설명합니다:

* 디자이너 컴포넌트의 첫 번째 수준(리본, 컨텍스트 메뉴, 파일 메뉴, 사이드 패널 포함)은 삭제는 가능하지만 수정하거나 추가할 수 없습니다.
* 두 번째 수준 및 해당 하위 수준(버튼, 탭, 컨텍스트 메뉴 옵션 등)은 사용자 정의가 가능합니다.
* 각 요소의 동작이나 반응은 commandMap을 설정하여 명령을 등록함으로써 사용자 정의할 수 있습니다.

## 예시

디자이너 컴포넌트 사용자 정의 중 가장 간단한 것 중 하나는 리본 컴포넌트의 상태를 제어하는 것입니다.
리본이 축소된 상태로 디자이너 컴포넌트를 실행하려면, `setData` 메서드를 사용하여 `isRibbonCollapse` 상태를 `true`로 설정하면 됩니다.

```JavaScript
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));

// 리본 상태를 축소된 상태로 설정합니다.
designer.setData('isRibbonCollapse',true);
```

다양한 다른 사용자 정의를 수행하려면 다음 주제를 참고하세요:

* [탭 추가](/spreadjs/docs/v18/spreadjs-designer-component/customizations/add_tab)
* [탭에 요소 추가](/spreadjs/docs/v18/spreadjs-designer-component/customizations/add_button_in_tab)
* [컨텍스트 메뉴 항목 추가](/spreadjs/docs/v18/spreadjs-designer-component/customizations/add_context_menu_item)
* [새 대화상자 추가](/spreadjs/docs/v18/spreadjs-designer-component/customizations/add_new_dialog)
* [리본 요소 활성화/비활성화](/spreadjs/docs/v18/spreadjs-designer-component/customizations/enable_disable_ribbon_elements)
* [파일 가져오기 이벤트 바인딩](/spreadjs/docs/v18/spreadjs-designer-component/customizations/bind-file-import-events)
* [상태 표시줄 사용자 정의](/spreadjs/docs/v18/spreadjs-designer-component/customizations/custom-status-bar)
* [사용자 정의 컴포넌트 추가](/spreadjs/docs/v18/spreadjs-designer-component/customizations/add-custom-component)
* [디자이너 컴포넌트 지역화 사용자 정의](/spreadjs/docs/v18/spreadjs-designer-component/customizations/designer-localization)