163 lines
5.5 KiB
Markdown
163 lines
5.5 KiB
Markdown
|
# 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/`
|
||
|
|
|