52ad67d44a
좌측 패널(마스터)-우측 패널(디테일) 분할 레이아웃 컴포넌트 추가 EditModal에 isCreateMode 플래그 추가하여 INSERT/UPDATE 분기 처리 dataFilter 기반 정확한 조인 필터링 구현 좌측 패널 선택 데이터를 모달로 자동 전달하는 dataTransferFields 설정 지원 ConfigPanel에서 테이블, 컬럼, 조인 설정 가능
103 lines
2.9 KiB
Markdown
103 lines
2.9 KiB
Markdown
# SplitPanelLayout2 컴포넌트
|
|
|
|
마스터-디테일 패턴의 좌우 분할 레이아웃 컴포넌트 (개선 버전)
|
|
|
|
## 개요
|
|
|
|
- **ID**: `split-panel-layout2`
|
|
- **카테고리**: layout
|
|
- **웹타입**: container
|
|
- **버전**: 2.0.0
|
|
|
|
## 주요 기능
|
|
|
|
- 좌측 패널: 마스터 데이터 목록 (예: 부서 목록)
|
|
- 우측 패널: 디테일 데이터 목록 (예: 부서원 목록)
|
|
- 조인 기반 데이터 연결
|
|
- 검색 기능 (좌측/우측 모두)
|
|
- 계층 구조 지원 (트리 형태)
|
|
- 데이터 전달 기능 (모달로 선택된 데이터 전달)
|
|
- 리사이즈 가능한 분할 바
|
|
|
|
## 사용 예시
|
|
|
|
### 부서-사원 관리
|
|
|
|
1. 좌측 패널: `dept_info` 테이블 (부서 목록)
|
|
2. 우측 패널: `user_info` 테이블 (사원 목록)
|
|
3. 조인 조건: `dept_code` = `dept_code`
|
|
4. 데이터 전달: `dept_code`, `dept_name`, `company_code`
|
|
|
|
## 설정 옵션
|
|
|
|
### 좌측 패널 설정
|
|
|
|
| 속성 | 타입 | 설명 |
|
|
|------|------|------|
|
|
| title | string | 패널 제목 |
|
|
| tableName | string | 테이블명 |
|
|
| displayColumns | ColumnConfig[] | 표시할 컬럼 목록 |
|
|
| searchColumn | string | 검색 대상 컬럼 |
|
|
| showSearch | boolean | 검색 기능 표시 여부 |
|
|
| hierarchyConfig | object | 계층 구조 설정 |
|
|
|
|
### 우측 패널 설정
|
|
|
|
| 속성 | 타입 | 설명 |
|
|
|------|------|------|
|
|
| title | string | 패널 제목 |
|
|
| tableName | string | 테이블명 |
|
|
| displayColumns | ColumnConfig[] | 표시할 컬럼 목록 |
|
|
| searchColumn | string | 검색 대상 컬럼 |
|
|
| showSearch | boolean | 검색 기능 표시 여부 |
|
|
| showAddButton | boolean | 추가 버튼 표시 |
|
|
| showEditButton | boolean | 수정 버튼 표시 |
|
|
| showDeleteButton | boolean | 삭제 버튼 표시 |
|
|
|
|
### 조인 설정
|
|
|
|
| 속성 | 타입 | 설명 |
|
|
|------|------|------|
|
|
| leftColumn | string | 좌측 테이블의 조인 컬럼 |
|
|
| rightColumn | string | 우측 테이블의 조인 컬럼 |
|
|
|
|
### 데이터 전달 설정
|
|
|
|
| 속성 | 타입 | 설명 |
|
|
|------|------|------|
|
|
| sourceColumn | string | 좌측 패널의 소스 컬럼 |
|
|
| targetColumn | string | 모달로 전달할 타겟 컬럼명 |
|
|
|
|
## 데이터 흐름
|
|
|
|
```
|
|
[좌측 패널 항목 클릭]
|
|
↓
|
|
[selectedLeftItem 상태 저장]
|
|
↓
|
|
[modalDataStore에 테이블명으로 저장]
|
|
↓
|
|
[ScreenContext DataProvider 등록]
|
|
↓
|
|
[우측 패널 데이터 로드 (조인 조건 적용)]
|
|
```
|
|
|
|
## 버튼과 연동
|
|
|
|
버튼 컴포넌트에서 이 컴포넌트의 선택된 데이터에 접근하려면:
|
|
|
|
1. 버튼의 액션 타입을 `openModalWithData`로 설정
|
|
2. 데이터 소스 ID를 좌측 패널의 테이블명으로 설정 (예: `dept_info`)
|
|
3. `modalDataStore`에서 자동으로 데이터를 가져옴
|
|
|
|
## 개발자 정보
|
|
|
|
- **생성일**: 2024
|
|
- **경로**: `lib/registry/components/split-panel-layout2/`
|
|
|
|
## 관련 문서
|
|
|
|
- [컴포넌트 시스템 가이드](../../docs/컴포넌트_시스템_가이드.md)
|
|
- [split-panel-layout (v1)](../split-panel-layout/README.md)
|
|
|