# 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)

## 예시

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