ERP-node/frontend/lib/registry/components/split-panel-layout

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,
};