# 리포트 시트 디자이너
## Content
SpreadJS 디자이너 컴포넌트는 워크북에 리포트 시트를 삽입하는 옵션을 제공합니다.
리포트 시트 리본 버튼은 **삽입** \> **시트** 탭 그룹에서 찾을 수 있습니다. 이 버튼을 클릭하면 열린 워크북 탭 스트립에 **Report1** 탭이 추가되고, **리포트 시트 디자인** 탭이 열립니다.
아래 이미지는 리포트 시트 디자인 페이지의 요소들을 보여줍니다.
새로운 리포트 시트를 생성하려면 아래 단계를 따르세요.
### **1\. 템플릿 가져오기**
기존 Excel 또는 SJS 파일을 템플릿으로 가져와 보고서를 생성할 수 있습니다. **리포트 시트 디자인 > 템플릿 가져오기** 옵션을 사용하세요.
기존 파일을 불러온 후 **확인(OK)** 을 선택하면 가져온 파일이 워크시트에 표시됩니다. 가져온 파일에 워크시트가 없으면 **"유효한 워크시트가 없습니다(No Valid Worksheets)"** 메시지가 표시됩니다.
> **참고**: 가져온 템플릿은 워크시트에 로드될 때 값과 스타일을 그대로 유지합니다.
### 2\. 리포트 시트에 데이터 원본 추가
데이터 원본은 **데이터> 데이터 바인딩** 탭 그룹의 **데이터 원본** 리본 버튼을 클릭하여 생성할 수 있습니다. 리포트 시트를 추가하면 왼쪽에 데이터 원본 (표 리스트) 패널도 함께 표시됩니다.
**데이터 원본** 탭이 나타나며, **표** 탭에서 테이블을 추가하고 CRUD(생성, 읽기, 수정, 삭제) 기능을 위한 원격 URL을 설정할 수 있습니다.
또한, **열** 탭을 통해 테이블 데이터를 불러올 수 있습니다.
**리포트** 탭으로 이동합니다. 테이블 트리 노드를 더블 클릭하거나 확장 버튼을 클릭하여 열 이름을 확인할 수 있습니다.
또한, **검색** 상자에 테이블 또는 열 이름을 입력하여 특정 테이블이나 열 데이터를 빠르게 찾을 수 있습니다. 일치하는 결과가 있으면 해당 테이블 트리가 확장되고, 일치하는 열이 강조 표시되어 탐색이 쉬워집니다. 이 기능은 대용량 데이터셋 작업 시 특정 데이터를 빠르게 찾는 데 특히 유용합니다.
일치하는 열이 없을 경우, `"No Result!"` 메시지가 표시되어 검색어에 해당하는 열이 없음을 알려줍니다.
리포트 시트에 열을 추가하려면, 열 이름을 하나씩 선택하거나 **Ctrl** 키를 눌러 여러 열을 선택합니다. 연속된 열 노드를 선택하려면 **Shift** 키를 사용하세요.
선택한 열 노드를 드래그하여 보고서 템플릿 셀 하나에 드롭하면, 설정된 채우기 방향에 따라 모든 선택된 노드가 표 리스트에 추가됩니다.
> **참고**:
>
> * 테이블 열 개수가 시트 범위를 초과하면 “Invalid Range” 오류가 표시되며 드롭이 취소됩니다.
> * 템플릿 셀의 기본 셀 유형은 **그룹 셀**입니다.
### **3.** 데이터 바인딩 및 템플릿 셀 속성 설정
리포트 시트에서는 오른쪽에 **리포트 셀** 패널을 제공하여, 리포트 시트의 셀을 선택한 후 보고서 템플릿에 필요한 보고 관련 설정을 구성할 수 있습니다.
**데이터 바인딩**: 템플릿 시트에서 템플릿 셀 유형을 관리하려면, 해당 셀의 유형(Type)과 바인딩(Binding) 옵션을 설정해야 합니다.
| 기능 | 디자이너 | 비고 |
| --- | ---- | --- |
| [유형](/spreadjs/docs/features/reportsheet/template-sheet-setting/set-template-cell-type) |  | 데이터 설정이 템플릿 셀에 적용되면 현재 셀의 데이터에만 영향을 미칩니다.
예를 들어, 템플릿 셀이 ListCell인 경우 현재 셀의 데이터만 리스트 모드에 표시됩니다. |
| 데이터 열 |  | 테이블 이름이 변경되면 열 이름도 함께 변경됩니다. |
| [필터](/spreadjs/docs/features/reportsheet/template-sheet-setting/set-filter-condition) |  | 템플릿 셀에서 필터 조건을 설정하여 여러 테이블을 조인할 때 데이터를 필터링할 수 있습니다.
아래 설정을 사용하여 템플릿 시트에서 데이터 필터링 조건을 구성할 수 있습니다.
• 조건별 필터
• 수식별 필터 |
| [정렬](/spreadjs/docs/features/reportsheet/template-sheet-setting/sort-cell-data) |  | 템플릿 셀은 레코드 정렬 규칙을 만드는 데 사용할 수 있습니다.
위/아래/삭제를 클릭하여 정렬 규칙의 순서를 변경하거나 제거할 수 있습니다. |
| 기본 값 |  | 기본 값 옵션은 보고서 시트에 새로 추가된 레코드의 기본값을 생성하는 방법을 설정할 수 있는 수식입니다. |
**확장**: 넘침 방향 설정, 특정 셀 접기, 컨텍스트 셀 추가를 위해 아래 확장 옵션을 구성해야 합니다.
| 기능 | 디자이너 | 설명 |
| --- | ---- | --- |
| [데이터 확장 방향](/spreadjs/docs/features/reportsheet/template-sheet-setting/set-spill-direction) |  | 넘침 방향은 리포트 시트에서 데이터가 어떻게 넘치는지 제어합니다.
기본값은 세로 방향입니다. |
| [축소 버튼](/spreadjs/docs/features/reportsheet/template-sheet-setting/add-showcollapse-button) |  | showCollapseButton 옵션은 보고서에서 셀의 하위 항목을 접는 버튼을 표시할지 여부를 제어합니다.
기본값은 false입니다.
추가로, 초기 상태 설정 드롭다운에서 **확장됨** 또는 **축소됨** 옵션을 선택하여 모든 그룹화된 셀의 초기 확장 상태를 확장 또는 축소로 구성할 수 있습니다. |
| [컨텍스트](/spreadjs/docs/features/reportsheet/template-sheet-setting/set-cell-context) |  | 컨텍스트 옵션은 기본적으로 모든 하위 셀의 데이터를 필터링하며 보고서 레이아웃에도 영향을 미칩니다.
컨텍스트의 기본값은 Default입니다. 하지만 사용자 지정으로 변경하면 범위 선택 대화상자가 나타납니다. |
**페이지 표시**: 템플릿 시트에서 페이지네이션 설정을 구성하려면 템플릿 셀에서 아래 옵션 중 하나를 선택할 수 있습니다.
보고서가 페이지별로 나누어지면 템플릿 셀의 페이지네이션 설정과 용지 크기가 보고서 시트에서 결합됩니다.
### **4.** 템플릿 시트 셀 스타일 구성
보고서 시트의 셀은 해당 템플릿 셀에 맞게 스타일을 지정할 수 있습니다. 템플릿 시트에서 설정한 스타일은 현재 셀 확장과 함께 적용됩니다.
스타일은 **리포트 시트 디자인** \> **더티 데이터 스타일** 버튼을 클릭하여 구성할 수 있습니다. 이 버튼을 클릭하면 다양한 셀 서식 옵션이 있는 셀 서식 대화상자가 열립니다.
리포트 시트는 새 데이터나 수식이 추가된 더티 셀도 사용자 지정할 수 있습니다. 더티 셀은 다시 계산이 필요함을 표시하며, 기본적으로 오른쪽 상단에 빨간색 모서리 접힘으로 표시됩니다.
> **참고**: 템플릿 시트가 보호되어 있어도 **디자인** 모드에서는 보고서 시트를 편집할 수 있습니다. 보호된 리포트 시트는 **미리보기** 모드에서만 작동합니다.
### **5.** 데이터 입력, 페이지네이션, 레이아웃 설정 구성
리포트 시트는 **데이터 관리자**를 통해 데이터 입력을 지원합니다. **데이터 입력 설정** 버튼을 사용하여 어떤 셀이 어느 열에 다시 쓰일지 설정할 수 있습니다. 또한, **필드 값 편집기** 대화상자의 드롭다운을 통해 특정 열에 정의된 매개변수 값을 선택할 수 있습니다(있는 경우).
리포트 시트는 수식과 고정 값 필드도 지원합니다.
다음 단계를 따라 리포트 시트의 데이터 입력 설정을 구성하세요.
1. 리본 바의 **리포트 시트 디자인(REPORT SHEET DESIGN)** 탭에서 **데이터 입력 설정(Data Entry Setting)** 버튼을 클릭합니다. 데이터 입력 설정 대화상자가 나타납니다.
2. 데이터 입력 설정 대화상자에서 추가 버튼을 클릭하여 새 데이터 입력 설정 규칙을 만듭니다. 생성한 규칙은 삭제 버튼을 사용해 삭제할 수 있습니다. 위/아래 화살표 키로 규칙의 순서를 변경할 수 있습니다.
1. “**반환 규칙 1 쓰기(Write Back Rule 1)**” 옵션을 더블 클릭하여 규칙 이름을 변경합니다.
2. 테이블 드롭다운에서 데이터 입력 테이블 이름을 선택하고, **필드 추가(Add Field)** 버튼을 클릭하여 데이터 입력 필드를 추가합니다. **스마트 필드 추가(Smart Add Fields )** 버튼을 클릭하면 보고서 템플릿 시트에 바인딩된 현재 테이블의 모든 열을 한 번에 추가할 수 있습니다.
3. 값 열을 클릭하여 입력된 필드의 값 데이터를 변경합니다..
1. 매개변수가 추가되지 않으면 Field Value Editor에 드롭다운이 표시되지 않습니다..
2. 매개변수가 추가된 경우, 드롭다운 버튼을 클릭하여 필드의 값으로 매개변수를 선택합니다..
> 참고: 하나 이상의 필드에서 primaryKey를 true로 설정해야 하며, 그렇지 않으면 데이터 입력 설정이 무효화됩니다.
추가로, 리포트 시드 디자이너 리본의 **페이지 설정(Pagination Setting)** 버튼을 클릭하여 보고서를 페이지로 나눌 수 있습니다.
단, 템플릿 시트에서 [페이지 나누기 설정](/spreadjs/docs/features/reportsheet/template-sheet-setting/set-pagination)을 조정해야 합니다.
**레이아웃 설정(Layout Setting)** 버튼을 사용하여 보고서 [레이아웃 구성](/spreadjs/docs/features/reportsheet/template-sheet-setting/configure-layout-settings)을 위한 원하는 매개변수를 설정할 수 있습니다.
### **6.** 미리보기 확인
**미리보기** 또는 **페이지네이션** 버튼을 클릭하여 [렌더링 모드](/spreadjs/docs/features/reportsheet/report-sheet-settings/render-mode)를 변경할 수 있습니다. 리포트 시트의 기본 렌더링 모드는 **디자인** 모드입니다.
* **디자인**: 템플릿을 디자인 모드로 표시합니다.
* **미리보기**: 미리보기를 표시하며 데이터 입력도 지원합니다. 다양한 편집기를 사용하여 데이터를 입력할 수 있습니다.
* **페이지 매기기**: 페이지별 미리보기를 표시하지만, 이 모드는 읽기 전용이며 셀 유형의 특수한 표시가 제거됩니다.
