kmh
cc61ef3ff4
- Added functionality to resolve unresolved category labels after data loading in SplitPanelLayout2Component. - Implemented batch API calls to fetch missing category labels based on unresolved codes. - Improved category mapping logic in SplitPanelLayoutComponent to handle join tables and provide fallback mappings. - Enhanced the user experience by ensuring that category labels are correctly displayed even when they are initially unresolved. These changes aim to improve the robustness of category handling across the split panel components. |
||
|---|---|---|
| .. | ||
| config-panels | ||
| README.md | ||
| SplitPanelContext.tsx | ||
| SplitPanelLayoutComponent.tsx | ||
| SplitPanelLayoutConfigPanel.tsx | ||
| SplitPanelLayoutRenderer.tsx | ||
| config.ts | ||
| index.ts | ||
| types.ts | ||
README.md
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)
예시
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,
};