ERP-node/frontend/lib/registry/components/split-panel-layout2/README.md

# 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/`

## 관련 문서

- [컴포넌트 시스템 가이드](../../docs/컴포넌트_시스템_가이드.md)
- [split-panel-layout (v1)](../split-panel-layout/README.md)