pipeline/frontend/lib/registry/components/split-panel-layout2

SplitPanelLayout2 컴포넌트

마스터-디테일 패턴의 좌우 분할 레이아웃 컴포넌트 (개선 버전)

개요

• ID: split-panel-layout2
• 카테고리: layout
• 웹타입: container
• 버전: 2.0.0

주요 기능

• 좌측 패널: 마스터 데이터 목록 (예: 부서 목록)
• 우측 패널: 디테일 데이터 목록 (예: 부서원 목록)
• 조인 기반 데이터 연결
• 검색 기능 (좌측/우측 모두)
• 계층 구조 지원 (트리 형태)
• 데이터 전달 기능 (모달로 선택된 데이터 전달)
• 리사이즈 가능한 분할 바

사용 예시

부서-사원 관리

1. 좌측 패널: dept_info 테이블 (부서 목록)
2. 우측 패널: user_info 테이블 (사원 목록)
3. 조인 조건: dept_code = dept_code
4. 데이터 전달: dept_code, dept_name, company_code

설정 옵션

좌측 패널 설정

속성	타입	설명
title	string	패널 제목
tableName	string	테이블명
displayColumns	ColumnConfig[]	표시할 컬럼 목록
searchColumn	string	검색 대상 컬럼
showSearch	boolean	검색 기능 표시 여부
hierarchyConfig	object	계층 구조 설정

우측 패널 설정

속성	타입	설명
title	string	패널 제목
tableName	string	테이블명
displayColumns	ColumnConfig[]	표시할 컬럼 목록
searchColumn	string	검색 대상 컬럼
showSearch	boolean	검색 기능 표시 여부
showAddButton	boolean	추가 버튼 표시
showEditButton	boolean	수정 버튼 표시
showDeleteButton	boolean	삭제 버튼 표시

조인 설정

속성	타입	설명
leftColumn	string	좌측 테이블의 조인 컬럼
rightColumn	string	우측 테이블의 조인 컬럼

데이터 전달 설정

속성	타입	설명
sourceColumn	string	좌측 패널의 소스 컬럼
targetColumn	string	모달로 전달할 타겟 컬럼명

데이터 흐름

[좌측 패널 항목 클릭]
    ↓
[selectedLeftItem 상태 저장]
    ↓
[modalDataStore에 테이블명으로 저장]
    ↓
[ScreenContext DataProvider 등록]
    ↓
[우측 패널 데이터 로드 (조인 조건 적용)]

버튼과 연동

버튼 컴포넌트에서 이 컴포넌트의 선택된 데이터에 접근하려면:

1. 버튼의 액션 타입을 openModalWithData로 설정
2. 데이터 소스 ID를 좌측 패널의 테이블명으로 설정 (예: dept_info)
3. modalDataStore에서 자동으로 데이터를 가져옴

개발자 정보

• 생성일: 2024
• 경로: lib/registry/components/split-panel-layout2/

관련 문서

• 컴포넌트 시스템 가이드
• split-panel-layout (v1)