376 lines
12 KiB
Markdown
376 lines
12 KiB
Markdown
|
# 선택 항목 상세입력 완전 자동화 가이드 🚀
|
||
|
|
|
||
|
|
## ✨ 완전 자동화 완료!
|
||
|
|
|
||
|
|
이제 **아무 설정도 하지 않아도** 데이터가 자동으로 전달됩니다!
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🎯 자동화된 흐름
|
||
|
|
|
||
|
|
### 1단계: TableList (선택 화면)
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────┐
|
||
|
|
│ TableList 컴포넌트 │
|
||
|
|
│ - 테이블: item_info │
|
||
|
|
│ - 체크박스로 품목 3개 선택 │
|
||
|
|
└─────────────────────────────────┘
|
||
|
|
↓ (자동 저장)
|
||
|
|
┌─────────────────────────────────┐
|
||
|
|
│ modalDataStore │
|
||
|
|
│ { "item_info": [선택된 데이터] }│
|
||
|
|
└─────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2단계: Button (다음 버튼)
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────┐
|
||
|
|
│ Button 컴포넌트 │
|
||
|
|
│ - 액션: "데이터 전달 + 모달열기"│
|
||
|
|
│ - dataSourceId: (비워둠) │ ← 자동 감지!
|
||
|
|
└─────────────────────────────────┘
|
||
|
|
↓ (자동 감지)
|
||
|
|
┌─────────────────────────────────┐
|
||
|
|
│ 같은 화면에서 TableList 찾기 │
|
||
|
|
│ → tableName = "item_info" │
|
||
|
|
└─────────────────────────────────┘
|
||
|
|
↓ (URL 전달)
|
||
|
|
┌─────────────────────────────────┐
|
||
|
|
│ 모달 열기 │
|
||
|
|
│ URL: ?dataSourceId=item_info │
|
||
|
|
└─────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
### 3단계: SelectedItemsDetailInput (상세 입력 화면)
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────┐
|
||
|
|
│ SelectedItemsDetailInput │
|
||
|
|
│ - dataSourceId: (비워둠) │ ← URL에서 자동 읽기!
|
||
|
|
└─────────────────────────────────┘
|
||
|
|
↓ (자동 읽기)
|
||
|
|
┌─────────────────────────────────┐
|
||
|
|
│ URL: ?dataSourceId=item_info │
|
||
|
|
│ → modalDataStore에서 데이터 로드│
|
||
|
|
└─────────────────────────────────┘
|
||
|
|
↓
|
||
|
|
┌─────────────────────────────────┐
|
||
|
|
│ 화면에 데이터 표시 │
|
||
|
|
│ 선택된 3개 품목 + 입력 필드 │
|
||
|
|
└─────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🛠️ 설정 방법 (완전 자동)
|
||
|
|
|
||
|
|
### 1단계: 선택 화면 구성
|
||
|
|
|
||
|
|
#### TableList 컴포넌트
|
||
|
|
```yaml
|
||
|
|
테이블: item_info
|
||
|
|
옵션:
|
||
|
|
- 체크박스 표시: ✓
|
||
|
|
- 다중 선택: ✓
|
||
|
|
```
|
||
|
|
|
||
|
|
**설정 끝!** 선택된 데이터는 자동으로 `modalDataStore`에 저장됩니다.
|
||
|
|
|
||
|
|
#### Button 컴포넌트
|
||
|
|
```yaml
|
||
|
|
버튼 텍스트: "다음"
|
||
|
|
버튼 액션: "데이터 전달 + 모달 열기" 🆕
|
||
|
|
|
||
|
|
설정:
|
||
|
|
- 데이터 소스 ID: (비워둠) ← ✨ 자동 감지!
|
||
|
|
- 모달 제목: "상세 정보 입력"
|
||
|
|
- 모달 크기: Large
|
||
|
|
- 대상 화면: (상세 입력 화면 선택)
|
||
|
|
```
|
||
|
|
|
||
|
|
**중요**: `데이터 소스 ID`를 **비워두세요**! 자동으로 같은 화면의 TableList를 찾아서 테이블명을 사용합니다.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 2단계: 상세 입력 화면 구성
|
||
|
|
|
||
|
|
#### SelectedItemsDetailInput 컴포넌트 추가
|
||
|
|
```yaml
|
||
|
|
컴포넌트: "선택 항목 상세입력"
|
||
|
|
```
|
||
|
|
|
||
|
|
**설정 끝!** URL 파라미터에서 자동으로 `dataSourceId`를 읽어옵니다.
|
||
|
|
|
||
|
|
#### 상세 설정 (선택사항)
|
||
|
|
```yaml
|
||
|
|
데이터 소스 ID: (비워둠) ← ✨ URL에서 자동!
|
||
|
|
|
||
|
|
표시할 컬럼:
|
||
|
|
- 품목코드 (item_code)
|
||
|
|
- 품목명 (item_name)
|
||
|
|
- 규격 (specification)
|
||
|
|
|
||
|
|
추가 입력 필드:
|
||
|
|
- 수량 (quantity): 숫자
|
||
|
|
- 단가 (unit_price): 숫자
|
||
|
|
- 납기일 (delivery_date): 날짜
|
||
|
|
- 비고 (remarks): 텍스트영역
|
||
|
|
|
||
|
|
옵션:
|
||
|
|
- 레이아웃: 테이블 형식 (Grid)
|
||
|
|
- 항목 번호 표시: ✓
|
||
|
|
- 항목 제거 허용: ☐
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📊 실제 동작 시나리오
|
||
|
|
|
||
|
|
### 시나리오: 수주 등록
|
||
|
|
|
||
|
|
#### 1단계: 품목 선택
|
||
|
|
```
|
||
|
|
사용자가 품목 테이블에서 3개 선택:
|
||
|
|
✓ [PD-001] 케이블 100m
|
||
|
|
✓ [PD-002] 커넥터 50개
|
||
|
|
✓ [PD-003] 단자대 20개
|
||
|
|
```
|
||
|
|
|
||
|
|
#### 2단계: "다음" 버튼 클릭
|
||
|
|
```javascript
|
||
|
|
// 자동으로 일어나는 일:
|
||
|
|
1. 같은 화면에서 table-list 컴포넌트 찾기
|
||
|
|
→ componentType === "table-list"
|
||
|
|
→ tableName === "item_info"
|
||
|
|
|
||
|
|
2. modalDataStore에서 데이터 확인
|
||
|
|
→ modalData = [
|
||
|
|
{ id: "PD-001", originalData: {...} },
|
||
|
|
{ id: "PD-002", originalData: {...} },
|
||
|
|
{ id: "PD-003", originalData: {...} }
|
||
|
|
]
|
||
|
|
|
||
|
|
3. 모달 열기 + URL 파라미터 전달
|
||
|
|
→ URL: /screen/detail-input?dataSourceId=item_info
|
||
|
|
```
|
||
|
|
|
||
|
|
#### 3단계: 상세 정보 입력
|
||
|
|
```
|
||
|
|
자동으로 표시됨:
|
||
|
|
|
||
|
|
┌───────────────────────────────────────────────────────┐
|
||
|
|
│ 상세 정보 입력 │
|
||
|
|
├───────────────────────────────────────────────────────┤
|
||
|
|
│ # │ 품목코드 │ 품목명 │ 수량 │ 단가 │ 납기일 │
|
||
|
|
├───┼──────────┼────────────┼──────┼────────┼─────────┤
|
||
|
|
│ 1 │ PD-001 │ 케이블100m │ [ ] │ [ ] │ [ ] │
|
||
|
|
│ 2 │ PD-002 │ 커넥터50개 │ [ ] │ [ ] │ [ ] │
|
||
|
|
│ 3 │ PD-003 │ 단자대20개 │ [ ] │ [ ] │ [ ] │
|
||
|
|
└───────────────────────────────────────────────────────┘
|
||
|
|
|
||
|
|
사용자가 수량, 단가, 납기일만 입력하면 끝!
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🎨 UI 미리보기
|
||
|
|
|
||
|
|
### Button 설정 화면
|
||
|
|
```
|
||
|
|
버튼 액션
|
||
|
|
├─ 데이터 전달 + 모달 열기 🆕
|
||
|
|
│
|
||
|
|
└─ 데이터 전달 + 모달 설정
|
||
|
|
│
|
||
|
|
├─ 데이터 소스 ID (선택사항)
|
||
|
|
│ [ ]
|
||
|
|
│ ✨ 비워두면 같은 화면의 TableList를 자동으로 감지합니다
|
||
|
|
│ 직접 지정하려면 테이블명을 입력하세요 (예: item_info)
|
||
|
|
│
|
||
|
|
├─ 모달 제목
|
||
|
|
│ [상세 정보 입력 ]
|
||
|
|
│
|
||
|
|
├─ 모달 크기
|
||
|
|
│ [큰 (Large) - 권장 ▼]
|
||
|
|
│
|
||
|
|
└─ 대상 화면 선택
|
||
|
|
[화면을 선택하세요... ▼]
|
||
|
|
```
|
||
|
|
|
||
|
|
### SelectedItemsDetailInput 설정 화면
|
||
|
|
```
|
||
|
|
데이터 소스 ID (자동 설정됨)
|
||
|
|
[ ]
|
||
|
|
✨ URL 파라미터에서 자동으로 가져옵니다 (Button이 전달)
|
||
|
|
테스트용으로 직접 입력하려면 테이블명을 입력하세요
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🔍 자동화 원리
|
||
|
|
|
||
|
|
### 1. TableList → modalDataStore
|
||
|
|
```typescript
|
||
|
|
// TableListComponent.tsx
|
||
|
|
const handleRowSelection = (rowKey: string, checked: boolean) => {
|
||
|
|
// ... 선택 처리 ...
|
||
|
|
|
||
|
|
// 🆕 자동으로 스토어에 저장
|
||
|
|
const { useModalDataStore } = await import("@/stores/modalDataStore");
|
||
|
|
const dataSourceId = tableName; // item_info
|
||
|
|
const modalDataItems = selectedRowsData.map(row => ({
|
||
|
|
id: row.item_code,
|
||
|
|
originalData: row,
|
||
|
|
additionalData: {}
|
||
|
|
}));
|
||
|
|
useModalDataStore.getState().setData(dataSourceId, modalDataItems);
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2. Button → TableList 자동 감지
|
||
|
|
```typescript
|
||
|
|
// buttonActions.ts - handleOpenModalWithData()
|
||
|
|
let dataSourceId = config.dataSourceId;
|
||
|
|
|
||
|
|
// 🆕 비워있으면 자동 감지
|
||
|
|
if (!dataSourceId && context.allComponents) {
|
||
|
|
const tableListComponent = context.allComponents.find(
|
||
|
|
(comp) => comp.componentType === "table-list" && comp.componentConfig?.tableName
|
||
|
|
);
|
||
|
|
|
||
|
|
if (tableListComponent) {
|
||
|
|
dataSourceId = tableListComponent.componentConfig.tableName;
|
||
|
|
console.log("✨ TableList 자동 감지:", dataSourceId);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 🆕 URL 파라미터로 전달
|
||
|
|
const modalEvent = new CustomEvent("openScreenModal", {
|
||
|
|
detail: {
|
||
|
|
screenId: config.targetScreenId,
|
||
|
|
urlParams: { dataSourceId } // ← URL에 추가
|
||
|
|
}
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
### 3. SelectedItemsDetailInput → URL 읽기
|
||
|
|
```typescript
|
||
|
|
// SelectedItemsDetailInputComponent.tsx
|
||
|
|
import { useSearchParams } from "next/navigation";
|
||
|
|
|
||
|
|
const searchParams = useSearchParams();
|
||
|
|
const urlDataSourceId = searchParams?.get("dataSourceId");
|
||
|
|
|
||
|
|
// 🆕 우선순위: URL > 설정 > component.id
|
||
|
|
const dataSourceId = useMemo(
|
||
|
|
() => urlDataSourceId || componentConfig.dataSourceId || component.id,
|
||
|
|
[urlDataSourceId, componentConfig.dataSourceId, component.id]
|
||
|
|
);
|
||
|
|
|
||
|
|
// 🆕 스토어에서 데이터 로드
|
||
|
|
const dataRegistry = useModalDataStore((state) => state.dataRegistry);
|
||
|
|
const modalData = dataRegistry[dataSourceId] || [];
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🧪 테스트 시나리오
|
||
|
|
|
||
|
|
### 기본 테스트
|
||
|
|
1. **화면 편집기 열기**
|
||
|
|
2. **첫 번째 화면 (선택) 만들기**:
|
||
|
|
- TableList 추가 (item_info)
|
||
|
|
- Button 추가 (버튼 액션: "데이터 전달 + 모달 열기")
|
||
|
|
- **dataSourceId는 비워둠!**
|
||
|
|
3. **두 번째 화면 (상세 입력) 만들기**:
|
||
|
|
- SelectedItemsDetailInput 추가
|
||
|
|
- **dataSourceId는 비워둠!**
|
||
|
|
- 표시 컬럼 설정
|
||
|
|
- 추가 입력 필드 설정
|
||
|
|
4. **할당된 화면에서 테스트**:
|
||
|
|
- 품목 3개 선택
|
||
|
|
- "다음" 버튼 클릭
|
||
|
|
- 상세 입력 화면에서 데이터 확인 ✅
|
||
|
|
|
||
|
|
### 고급 테스트 (직접 지정)
|
||
|
|
```yaml
|
||
|
|
시나리오: 여러 TableList가 있는 화면
|
||
|
|
|
||
|
|
화면 구성:
|
||
|
|
- TableList (item_info) ← 품목
|
||
|
|
- TableList (customer_info) ← 고객
|
||
|
|
- Button (품목 상세입력) ← dataSourceId: "item_info"
|
||
|
|
- Button (고객 상세입력) ← dataSourceId: "customer_info"
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🚨 주의사항
|
||
|
|
|
||
|
|
### ❌ 잘못된 사용법
|
||
|
|
```yaml
|
||
|
|
# 1. 같은 화면에 TableList가 여러 개 있는데 비워둠
|
||
|
|
TableList 1: item_info
|
||
|
|
TableList 2: customer_info
|
||
|
|
Button: dataSourceId = (비워둠) ← 어느 것을 선택해야 할까?
|
||
|
|
|
||
|
|
해결: dataSourceId를 명시적으로 지정
|
||
|
|
```
|
||
|
|
|
||
|
|
### ✅ 올바른 사용법
|
||
|
|
```yaml
|
||
|
|
# 1. TableList가 1개인 경우
|
||
|
|
TableList: item_info
|
||
|
|
Button: dataSourceId = (비워둠) ← 자동 감지 OK!
|
||
|
|
|
||
|
|
# 2. TableList가 여러 개인 경우
|
||
|
|
TableList 1: item_info
|
||
|
|
TableList 2: customer_info
|
||
|
|
Button 1: dataSourceId = "item_info" ← 명시
|
||
|
|
Button 2: dataSourceId = "customer_info" ← 명시
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🎯 완료 체크리스트
|
||
|
|
|
||
|
|
### 구현 완료 ✅
|
||
|
|
- [x] TableList → modalDataStore 자동 저장
|
||
|
|
- [x] Button → TableList 자동 감지
|
||
|
|
- [x] Button → URL 파라미터 전달
|
||
|
|
- [x] SelectedItemsDetailInput → URL 자동 읽기
|
||
|
|
- [x] 설정 패널 UI에 "자동" 힌트 추가
|
||
|
|
|
||
|
|
### 사용자 경험 ✅
|
||
|
|
- [x] dataSourceId 입력 불필요 (자동)
|
||
|
|
- [x] 일관된 데이터 흐름 (자동)
|
||
|
|
- [x] 오류 메시지 명확 (자동)
|
||
|
|
- [x] 직관적인 UI (자동 힌트)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📝 요약
|
||
|
|
|
||
|
|
**이제 사용자는 단 3단계만 하면 됩니다:**
|
||
|
|
|
||
|
|
1. **TableList 추가** → 테이블 선택
|
||
|
|
2. **Button 추가** → 액션 "데이터 전달 + 모달 열기" 선택
|
||
|
|
3. **SelectedItemsDetailInput 추가** → 필드 설정
|
||
|
|
|
||
|
|
**dataSourceId는 자동으로 처리됩니다!** ✨
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🔗 관련 파일
|
||
|
|
|
||
|
|
- `frontend/stores/modalDataStore.ts` - 데이터 저장소
|
||
|
|
- `frontend/lib/utils/buttonActions.ts` - 버튼 액션 (자동 감지)
|
||
|
|
- `frontend/lib/registry/components/table-list/TableListComponent.tsx` - 자동 저장
|
||
|
|
- `frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx` - URL 자동 읽기
|
||
|
|
- `frontend/components/screen/config-panels/ButtonConfigPanel.tsx` - 버튼 설정 UI
|
||
|
|
- `frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx` - 상세 입력 설정 UI
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**🎉 완전 자동화 완료!**
|
||
|
|
|