# 간트 시트 디자이너

## Content

SpreadJS 디자이너 컴포넌트는 워크북에 [간트 시트](/spreadjs/docs/v19/features/ganttsheet)를 삽입하는 옵션을 제공합니다.
간트 시트 버튼은 **삽입(INSERT) > 시트(Sheets)** 탭 그룹에서 찾을 수 있습니다. 이 버튼을 클릭하면 워크북의 시트 목록에 **GanttSheet1** 시트가 추가되고, **간트 차트 형식(GANTT CHART FORMAT)** 탭이 열립니다.
![1.791c23.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/1.791c23.61aa74.png?width=800)
기본적으로 **간트 차트 형식(GANTT CHART FORMAT)** 탭이 열리면, 왼쪽에는 빈 영역이 표시되고 오른쪽에는 **간트 시트(Gantt Sheet) 패널**이 나타납니다.
![2.eb6d41.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/2.eb6d41.2dbea6.png?width=800)
데이터 소스를 추가하려면 **간트 시트(Gantt Sheet)** 패널에 있는 **바인딩 표(Binding Table)** 드롭다운에서 **(새 표)** 옵션을 선택하거나, **데이터(DATA) > 데이터 바인딩(Data Binding)** 탭 그룹의 **데이터 원본(DataSource)** 리본 버튼을 클릭하세요.
**데이터 원본(DataSource)** 에서 테이블을 추가하고 CRUD 작업을 위한 외부 URL을 지정할 수 있습니다. 또한 **열(Columns)** 탭을 통해 테이블 데이터를 가져올 수 있습니다.
![3.01b5de.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/3.01b5de.03b85c.png?width=800)
![4.79b996.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/4.79b996.a1560d.png?width=800)
열 항목을 클릭하면 해당 열의 속성(Properties), 스키마 유형(Schema Type)을 확인하거나 수정할 수 있으며, 관계(Relationship)를 추가할 수도 있습니다. 목록 하단의 **계산 열 추가(Add Calculate Column)** 버튼을 클릭하여 계산 열도 추가할 수 있습니다.
디자이너 컴포넌트를 통해 **데이터 원본**을 가져온 후, 간트 시트(Gantt Sheet) 패널을 통해 테이블 데이터 원본을 간트 시트에 바인딩할 수 있습니다.
**바인딩 표(Binding Table)** 드롭다운에서는 기존 데이터 원본을 선택하거나 새로 생성할 수 있으며, 바인딩이 완료되면 간트 시트 뷰 영역에 간트 시트가 표시됩니다.
![5.ab9aa1.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/5.ab9aa1.7d2f7b.png?width=800)
SpreadJS는 디자이너 컴포넌트와 템플릿 디자이너 간트 시트 패널 모두에서 데이터 원본 열 목록에 열 간의 관계를 표시할 수 있도록 지원합니다. 관계가 있는 열에는 연결 아이콘이 표시되며, 관계의 세부 정보를 확인하려면 화살표 버튼을 클릭하면 됩니다.
![6.ab6b8a.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/6.ab6b8a.55ff8a.png?width=800)
SpreadJS는 간트 시트 패널에서도 관계를 표시합니다. **필드(Fields)** 섹션에는 연결된 열의 이름이 표시되며, 옆에는 확장 화살표 버튼이 함께 나타납니다. 필요한 경우 관계 열 노드를 확장하여 하위 노드를 확인할 수 있습니다.
![7.367aa2.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/7.367aa2.1190b8.png)
간트 시트 패널은 트리 형태의 구조를 통해 상위-하위 노드 간의 관계를 보다 명확하게 표시합니다.
또한, 간트 시트에서 열을 표시하거나 숨길 수 있도록 체크/체크 해제 버튼도 제공됩니다. 주 관계 열을 선택하면 해당 객체를 나타내는 열이 간트 시트에 추가되며, 하위 관계 열을 선택하면 해당 열이 삽입되고, 하위 열 이름은 `"taskId.id"`와 같이 `"."` 기호를 사용해 계층 구조를 나타냅니다.
![8.6695e4.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/8.6695e4.bcffc5.png?width=800)
SpreadJS 디자이너 컴포넌트는 간트 시트의 열 설정을 수정할 수 있는 기능도 제공합니다. 기본 설정을 변경하려면 간트 시트에서 열을 선택하세요. 그러면 **열 설정(COLUMN SETTING)** 탭이 열리며, 여기에서 캡션, 값, 열 이름, 데이터 유형, 스타일 등 다양한 매개변수를 필요에 따라 조정할 수 있습니다.
![9.e839c5.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/9.e839c5.eb7c19.png?width=800)
또한, 간트 시트(GanttSheet)는 다양한 작업(task) 관련 기능 수행, 데이터 정보 확인, 차트 형식 변경 등의 기능을 제공합니다. 자세한 내용은 아래의 주제를 참고하세요.

| 주제 | 설명 |
| --- | --- |
| [작업 탭](/spreadjs/docs/v19/spreadjs-designer-component/spdesignerwork/ganttsheet-designer/task-tab) | 다양한 작업(task) 작업을 수행할 수 있는 옵션을 제공합니다. |
| [프로젝트 탭](/spreadjs/docs/v19/spreadjs-designer-component/spdesignerwork/ganttsheet-designer/project-tab) | 프로젝트 정보를 관리할 수 있는 옵션을 제공합니다. |
| [보기 탭](/spreadjs/docs/v19/spreadjs-designer-component/spdesignerwork/ganttsheet-designer/view-tab) | 특정 타임스케일에 대해 정렬 및 확대/축소할 수 있는 옵션을 제공합니다. |
| [간트 차트 형식 탭](/spreadjs/docs/v19/spreadjs-designer-component/spdesignerwork/ganttsheet-designer/gantt-chart-format-tab) | 작업 표시줄의 모양을 사용자 지정할 수 있는 옵션을 제공합니다. |