186 lines
4.6 KiB
Markdown
186 lines
4.6 KiB
Markdown
# Modal Repeater Table 디버깅 가이드
|
||
|
||
## 📊 콘솔 로그 확인 순서
|
||
|
||
새로고침 후 수주 등록 모달을 열고, 아래 순서대로 콘솔 로그를 확인하세요:
|
||
|
||
### 1️⃣ 컴포넌트 마운트 (초기 로드)
|
||
|
||
```
|
||
🎬 ModalRepeaterTableComponent 마운트: {
|
||
config: {...},
|
||
propColumns: [...],
|
||
columns: [...],
|
||
columnsLength: N, // ⚠️ 0이면 문제!
|
||
value: [],
|
||
valueLength: 0,
|
||
sourceTable: "item_info",
|
||
sourceColumns: [...],
|
||
uniqueField: "item_number"
|
||
}
|
||
```
|
||
|
||
**✅ 정상:**
|
||
- `columnsLength: 8` (품번, 품명, 규격, 재질, 수량, 단가, 금액, 납기일)
|
||
- `columns` 배열에 각 컬럼의 `field`, `label`, `type` 정보가 있어야 함
|
||
|
||
**❌ 문제:**
|
||
- `columnsLength: 0` → **이것이 문제의 원인!**
|
||
- 빈 배열이면 테이블에 컬럼이 표시되지 않음
|
||
|
||
---
|
||
|
||
### 2️⃣ 항목 검색 모달 열림
|
||
|
||
```
|
||
🚪 모달 열림 - uniqueField: "item_number", multiSelect: true
|
||
```
|
||
|
||
---
|
||
|
||
### 3️⃣ 품목 체크 (선택)
|
||
|
||
```
|
||
🖱️ 행 클릭: {
|
||
item: { item_number: "SLI-2025-0003", item_name: "실리콘 고무 시트", ... },
|
||
uniqueField: "item_number",
|
||
itemValue: "SLI-2025-0003",
|
||
currentSelected: 0,
|
||
selectedValues: []
|
||
}
|
||
|
||
✅ 매칭 발견: { selectedValue: "SLI-2025-0003", itemValue: "SLI-2025-0003", uniqueField: "item_number" }
|
||
```
|
||
|
||
---
|
||
|
||
### 4️⃣ 추가 버튼 클릭
|
||
|
||
```
|
||
✅ ItemSelectionModal 추가 버튼 클릭: {
|
||
selectedCount: 1,
|
||
selectedItems: [{ item_number: "SLI-2025-0003", item_name: "실리콘 고무 시트", ... }],
|
||
uniqueField: "item_number"
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 5️⃣ 데이터 추가 처리
|
||
|
||
```
|
||
➕ handleAddItems 호출: {
|
||
selectedItems: [{ item_number: "SLI-2025-0003", ... }],
|
||
currentValue: [],
|
||
columns: [...], // ⚠️ 여기도 확인!
|
||
calculationRules: [...]
|
||
}
|
||
|
||
📝 기본값 적용 후: [{ item_number: "SLI-2025-0003", quantity: 1, ... }]
|
||
|
||
🔢 계산 필드 적용 후: [{ item_number: "SLI-2025-0003", quantity: 1, selling_price: 1000, amount: 1000, ... }]
|
||
|
||
✅ 최종 데이터 (onChange 호출): [{ item_number: "SLI-2025-0003", quantity: 1, selling_price: 1000, amount: 1000, ... }]
|
||
```
|
||
|
||
---
|
||
|
||
### 6️⃣ Renderer 업데이트
|
||
|
||
```
|
||
🔄 ModalRepeaterTableRenderer onChange 호출: {
|
||
previousValue: [],
|
||
newValue: [{ item_number: "SLI-2025-0003", ... }]
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 7️⃣ value 변경 감지
|
||
|
||
```
|
||
📦 ModalRepeaterTableComponent value 변경: {
|
||
valueLength: 1,
|
||
value: [{ item_number: "SLI-2025-0003", ... }],
|
||
columns: [...] // ⚠️ 여기도 확인!
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 8️⃣ 테이블 리렌더링
|
||
|
||
```
|
||
📊 RepeaterTable 데이터 업데이트: {
|
||
rowCount: 1,
|
||
data: [{ item_number: "SLI-2025-0003", ... }],
|
||
columns: ["item_number", "item_name", "specification", "material", "quantity", "selling_price", "amount", "delivery_date"]
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🔍 문제 진단
|
||
|
||
### Case 1: columns가 비어있음 (columnsLength: 0)
|
||
|
||
**원인:**
|
||
- 화면관리 시스템에서 modal-repeater-table 컴포넌트의 `columns` 설정을 하지 않음
|
||
- DB에 컬럼 설정이 저장되지 않음
|
||
|
||
**해결:**
|
||
1. 화면 관리 페이지로 이동
|
||
2. 해당 화면 편집
|
||
3. modal-repeater-table 컴포넌트 선택
|
||
4. 우측 설정 패널에서 "컬럼 설정" 탭 열기
|
||
5. 다음 컬럼들을 추가:
|
||
- 품번 (item_number, text, 편집불가)
|
||
- 품명 (item_name, text, 편집불가)
|
||
- 규격 (specification, text, 편집불가)
|
||
- 재질 (material, text, 편집불가)
|
||
- 수량 (quantity, number, 편집가능, 기본값: 1)
|
||
- 단가 (selling_price, number, 편집가능)
|
||
- 금액 (amount, number, 편집불가, 계산필드)
|
||
- 납기일 (delivery_date, date, 편집가능)
|
||
6. 저장
|
||
|
||
---
|
||
|
||
### Case 2: 로그가 8번까지 나오는데 화면에 안 보임
|
||
|
||
**원인:**
|
||
- React 리렌더링 문제
|
||
- 화면관리 시스템의 상태 동기화 문제
|
||
|
||
**해결:**
|
||
1. 브라우저 개발자 도구 → Elements 탭
|
||
2. `#component-comp_5jdmuzai .border.rounded-md table tbody` 찾기
|
||
3. 실제 DOM에 `<tr>` 요소가 추가되었는지 확인
|
||
4. 추가되었다면 CSS 문제 (display: none 등)
|
||
5. 추가 안 되었다면 컴포넌트 렌더링 문제
|
||
|
||
---
|
||
|
||
### Case 3: 로그가 5번까지만 나오고 멈춤
|
||
|
||
**원인:**
|
||
- `onChange` 콜백이 제대로 전달되지 않음
|
||
- Renderer의 `updateComponent`가 작동하지 않음
|
||
|
||
**해결:**
|
||
- 이미 수정한 `ModalRepeaterTableRenderer.tsx` 코드 확인
|
||
- `handleChange` 함수가 호출되는지 확인
|
||
|
||
---
|
||
|
||
## 📝 다음 단계
|
||
|
||
위 로그를 **모두** 복사해서 공유해주세요. 특히:
|
||
|
||
1. **🎬 마운트 로그의 `columnsLength` 값**
|
||
2. **로그가 어디까지 출력되는지**
|
||
3. **Elements 탭에서 `tbody` 내부 HTML 구조**
|
||
|
||
이 정보로 정확한 문제를 진단할 수 있습니다!
|
||
|