579c4b7387
문제: - 분할 패널에서 검색 컴포넌트의 필터/그룹/컬럼 설정이 동작하지 않음 - 테이블 리스트 컴포넌트에 있던 로직이 분할 패널에는 없었음 해결: 1. 필터 처리: - leftFilters를 searchValues 형식으로 변환 - API 호출 시 필터 조건 전달 - 필터 변경 시 데이터 자동 재로드 2. 컬럼 가시성: - visibleLeftColumns useMemo 추가 - leftColumnVisibility를 적용하여 표시할 컬럼 필터링 - 렌더링 시 가시성 처리된 컬럼만 표시 3. 그룹화: - groupedLeftData useMemo 추가 - leftGrouping 배열로 데이터를 그룹화 - 그룹별 헤더와 카운트 표시 4. 테이블 등록: - columns 속성을 올바르게 참조 (displayColumns → columns) - 객체/문자열 타입 모두 처리 - 화면 설정에 맞게 테이블 등록 테스트: - 거래처 관리 화면에서 검색 컴포넌트 버튼 활성화 - 필터 설정 → 데이터 필터링 동작 - 그룹 설정 → 데이터 그룹화 동작 - 테이블 옵션 → 컬럼 가시성/순서 변경 동작
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,
};