81 lines
2.1 KiB
Markdown
81 lines
2.1 KiB
Markdown
|
# SplitPanelLayout 컴포넌트
|
||
|
|
|
||
|
|
마스터-디테일 패턴의 좌우 분할 레이아웃 컴포넌트입니다.
|
||
|
|
|
||
|
|
## 특징
|
||
|
|
|
||
|
|
- 🔄 **마스터-디테일 패턴**: 좌측에서 항목 선택 시 우측에 상세 정보 표시
|
||
|
|
- 📏 **크기 조절 가능**: 드래그하여 좌우 패널 크기 조정
|
||
|
|
- 🔍 **검색 기능**: 각 패널에 독립적인 검색 기능
|
||
|
|
- 🔗 **관계 설정**: JOIN, DETAIL, CUSTOM 관계 타입 지원
|
||
|
|
- ⚙️ **유연한 설정**: 다양한 옵션으로 커스터마이징 가능
|
||
|
|
|
||
|
|
## 사용 사례
|
||
|
|
|
||
|
|
### 1. 코드 관리
|
||
|
|
|
||
|
|
- 좌측: 코드 카테고리 목록
|
||
|
|
- 우측: 선택된 카테고리의 코드 목록
|
||
|
|
|
||
|
|
### 2. 테이블 조인 설정
|
||
|
|
|
||
|
|
- 좌측: 기본 테이블 목록
|
||
|
|
- 우측: 선택된 테이블의 조인 조건 설정
|
||
|
|
|
||
|
|
### 3. 메뉴 관리
|
||
|
|
|
||
|
|
- 좌측: 메뉴 트리 구조
|
||
|
|
- 우측: 선택된 메뉴의 상세 설정
|
||
|
|
|
||
|
|
## 설정 옵션
|
||
|
|
|
||
|
|
### 좌측 패널 (leftPanel)
|
||
|
|
|
||
|
|
- `title`: 패널 제목
|
||
|
|
- `tableName`: 데이터베이스 테이블명
|
||
|
|
- `showSearch`: 검색 기능 표시 여부
|
||
|
|
- `showAdd`: 추가 버튼 표시 여부
|
||
|
|
|
||
|
|
### 우측 패널 (rightPanel)
|
||
|
|
|
||
|
|
- `title`: 패널 제목
|
||
|
|
- `tableName`: 데이터베이스 테이블명
|
||
|
|
- `showSearch`: 검색 기능 표시 여부
|
||
|
|
- `showAdd`: 추가 버튼 표시 여부
|
||
|
|
- `relation`: 좌측 항목과의 관계 설정
|
||
|
|
- `type`: "join" | "detail" | "custom"
|
||
|
|
- `foreignKey`: 외래키 컬럼명
|
||
|
|
|
||
|
|
### 레이아웃 설정
|
||
|
|
|
||
|
|
- `splitRatio`: 좌측 패널 너비 비율 (0-100, 기본 30)
|
||
|
|
- `resizable`: 크기 조절 가능 여부 (기본 true)
|
||
|
|
- `minLeftWidth`: 좌측 최소 너비 (기본 200px)
|
||
|
|
- `minRightWidth`: 우측 최소 너비 (기본 300px)
|
||
|
|
- `autoLoad`: 자동 데이터 로드 (기본 true)
|
||
|
|
|
||
|
|
## 예시
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
const config: SplitPanelLayoutConfig = {
|
||
|
|
leftPanel: {
|
||
|
|
title: "코드 카테고리",
|
||
|
|
tableName: "code_category",
|
||
|
|
showSearch: true,
|
||
|
|
showAdd: true,
|
||
|
|
},
|
||
|
|
rightPanel: {
|
||
|
|
title: "코드 목록",
|
||
|
|
tableName: "code_info",
|
||
|
|
showSearch: true,
|
||
|
|
showAdd: true,
|
||
|
|
relation: {
|
||
|
|
type: "detail",
|
||
|
|
foreignKey: "category_id",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitRatio: 30,
|
||
|
|
resizable: true,
|
||
|
|
};
|
||
|
|
```
|