vexplor/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 구조

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