# RelatedDataButtons 컴포넌트

좌측 패널에서 선택한 데이터를 기반으로 연관 테이블의 데이터를 버튼으로 표시하는 컴포넌트

## 개요

- **ID**: `related-data-buttons`
- **카테고리**: data
- **웹타입**: container
- **버전**: 1.0.0

## 사용 사례

### 품목별 라우팅 버전 관리

```
┌─────────────────────────────────────────────────────┐
│  알루미늄 프레임                    [+ 라우팅 버전 추가] │
│  ITEM001                                            │
│  ┌──────────────┐ ┌─────────┐                      │
│  │ 기본 라우팅 ★ │ │ 개선버전 │                      │
│  └──────────────┘ └─────────┘                      │
└─────────────────────────────────────────────────────┘
```

## 데이터 흐름

```
1. 좌측 패널: item_info 선택
   ↓ SplitPanelContext.selectedLeftData
2. RelatedDataButtons: item_code로 item_routing_version 조회
   ↓ 버튼 클릭 시 이벤트 발생
3. 하위 테이블: routing_version_id로 item_routing_detail 필터링
```

## 설정 옵션

### 소스 매핑 (sourceMapping)

| 속성 | 타입 | 설명 |
|------|------|------|
| sourceTable | string | 좌측 패널 테이블명 (예: item_info) |
| sourceColumn | string | 필터에 사용할 컬럼 (예: item_code) |

### 헤더 표시 (headerDisplay)

| 속성 | 타입 | 설명 |
|------|------|------|
| show | boolean | 헤더 표시 여부 |
| titleColumn | string | 제목으로 표시할 컬럼 (예: item_name) |
| subtitleColumn | string | 부제목으로 표시할 컬럼 (예: item_code) |

### 버튼 데이터 소스 (buttonDataSource)

| 속성 | 타입 | 설명 |
|------|------|------|
| tableName | string | 조회할 테이블명 (예: item_routing_version) |
| filterColumn | string | 필터링할 컬럼명 (예: item_code) |
| displayColumn | string | 버튼에 표시할 컬럼명 (예: version_name) |
| valueColumn | string | 선택 시 전달할 값 컬럼 (기본: id) |
| orderColumn | string | 정렬 컬럼 |
| orderDirection | "ASC" \| "DESC" | 정렬 방향 |

### 버튼 스타일 (buttonStyle)

| 속성 | 타입 | 설명 |
|------|------|------|
| variant | string | 기본 버튼 스타일 (default, outline, secondary, ghost) |
| activeVariant | string | 선택 시 버튼 스타일 |
| size | string | 버튼 크기 (sm, default, lg) |
| defaultIndicator.column | string | 기본 버전 판단 컬럼 |
| defaultIndicator.showStar | boolean | 별표 아이콘 표시 여부 |

### 추가 버튼 (addButton)

| 속성 | 타입 | 설명 |
|------|------|------|
| show | boolean | 추가 버튼 표시 여부 |
| label | string | 버튼 라벨 |
| position | "header" \| "inline" | 버튼 위치 |
| modalScreenId | number | 연결할 모달 화면 ID |

### 이벤트 설정 (events)

| 속성 | 타입 | 설명 |
|------|------|------|
| targetTable | string | 필터링할 하위 테이블명 |
| targetFilterColumn | string | 하위 테이블의 필터 컬럼명 |

## 이벤트

### related-button-select

버튼 선택 시 발생하는 커스텀 이벤트

```typescript
window.addEventListener("related-button-select", (e: CustomEvent) => {
  const { targetTable, filterColumn, filterValue, selectedData } = e.detail;
  // 하위 테이블 필터링 처리
});
```

## 사용 예시

### 품목별 라우팅 버전 화면

```typescript
const config: RelatedDataButtonsConfig = {
  sourceMapping: {
    sourceTable: "item_info",
    sourceColumn: "item_code",
  },
  headerDisplay: {
    show: true,
    titleColumn: "item_name",
    subtitleColumn: "item_code",
  },
  buttonDataSource: {
    tableName: "item_routing_version",
    filterColumn: "item_code",
    displayColumn: "version_name",
    valueColumn: "id",
  },
  buttonStyle: {
    variant: "outline",
    activeVariant: "default",
    defaultIndicator: {
      column: "is_default",
      showStar: true,
    },
  },
  events: {
    targetTable: "item_routing_detail",
    targetFilterColumn: "routing_version_id",
  },
  addButton: {
    show: true,
    label: "+ 라우팅 버전 추가",
    position: "header",
  },
  autoSelectFirst: true,
};
```

## 분할 패널과 함께 사용

```
┌─────────────────┬──────────────────────────────────────────────┐
│                 │  [RelatedDataButtons 컴포넌트]                │
│  품목 목록       │  품목명 표시 + 버전 버튼들                     │
│  (좌측 패널)     ├──────────────────────────────────────────────┤
│                 │  [DataTable 컴포넌트]                         │
│  item_info      │  공정 순서 테이블 (item_routing_detail)        │
│                 │  related-button-select 이벤트로 필터링         │
└─────────────────┴──────────────────────────────────────────────┘
```

## 개발자 정보

- **생성일**: 2024-12
- **경로**: `lib/registry/components/related-data-buttons/`