ERP-node/frontend/MODAL_REPEATER_TABLE_DEBUG.md

# 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 구조**

이 정보로 정확한 문제를 진단할 수 있습니다!