kjs
a1819e749c
주요 수정사항: 1. 탭 컴포넌트 내 자식 화면에 menuObjid와 tableName 전달 - TabsWidget에 menuObjid prop 추가 - InteractiveScreenViewerDynamic를 통해 자식 화면에 전달 - 채번 규칙 생성 시 올바른 메뉴 스코프 및 테이블명 적용 2. 백엔드: 화면 레이아웃 API에 tableName 추가 - screenManagementService.getLayout()에서 테이블명 반환 - LayoutData 타입에 tableName 필드 추가 - 채번 규칙 생성 시 tableName 검증 강화 3. 카테고리 필터링 기능 복원 - DataFilterConfigPanel에 menuObjid 전달 - getCategoryValues API 사용으로 메뉴 스코프 적용 - 새로고침 후 카테고리 값 자동 재로드 - SplitPanelLayoutConfigPanel에 menuObjid 전달 4. 선택항목 상세입력 설정 패널 포커스 문제 해결 - 로컬 입력 상태 추가로 실시간 속성 편집 패턴 적용 - 텍스트 및 라벨 입력 시 포커스 유지 5. 테이블 리스트 설정 초기화 문제 해결 - handleChange 함수에서 기존 config와 병합하여 전달 - 다른 속성 손실 방지 (columns, dataFilter 등) 버그 수정: - 채번 규칙 생성 시 빈 문자열 대신 null 전달 - 필터 설정 변경 시 컬럼 설정 초기화 방지 - 카테고리 컬럼 선택 시 셀렉트박스 표시 |
||
|---|---|---|
| .. | ||
| README.md | ||
| 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,
};