# [프론트엔드] 입고상세 수입검사 첨부파일 삭제 후 미갱신 버그 **날짜:** 2026-03-18 **작성자:** Claude Code **대상:** React 프론트엔드 개발자 **심각도:** Medium **영향 범위:** 입고관리 > 입고상세 > 수입검사 --- ## 1. 증상 1. 입고상세 페이지(`/material/receiving-management/{id}/mode-view`)에서 **수입검사하기** 버튼 클릭 2. 수입검사 모달에서 **기존 첨부파일 제거** 3. **검사적용** 클릭하여 저장 4. 모달 닫힘 → 입고상세 페이지의 **"검사 첨부파일"** 섹션에 삭제한 파일이 그대로 남아있음 > 페이지 새로고침(F5)하면 정상 반영됨 → DB에는 삭제 완료, **프론트 state만 갱신 안 되는 문제** --- ## 2. 원인 분석 ### 2.1 API 측 (정상) `DocumentService`의 update 로직이 정상 동작한다: ```php // api/app/Services/DocumentService.php if (isset($data['attachments'])) { $document->attachments()->delete(); // 기존 모두 삭제 if (! empty($data['attachments'])) { $this->attachFiles($document, $data['attachments'], $userId); // 전송받은 것만 재생성 } } ``` - 프론트에서 제거한 파일은 `attachments` 배열에 미포함 → DB에서 삭제됨 - `checkInspectionTemplate` API도 삭제 후 빈 배열 `[]` 정상 반환 ### 2.2 React 측 (버그) **파일:** `src/components/material/ReceivingManagement/ReceivingDetail.tsx` **위치:** `loadData()` 함수 내 수입검사 첨부파일 state 갱신 부분 ```typescript // AS-IS (버그) — 246~248행 if (templateCheck.attachments && templateCheck.attachments.length > 0) { setInspectionAttachments(templateCheck.attachments); } ``` 첨부파일을 **전부 삭제**하면 API 응답의 `attachments`가 빈 배열(`[]`)로 반환되는데, `length > 0` 조건에 의해 `setInspectionAttachments([])`가 호출되지 않는다. 이전 state(삭제 전 파일 목록)가 그대로 유지된다. --- ## 3. 수정 방법 ```typescript // TO-BE (수정) setInspectionAttachments(templateCheck.attachments ?? []); ``` 조건문 제거 후 항상 최신 값을 반영한다. `attachments`가 `null`/`undefined`인 경우 빈 배열로 fallback. --- ## 4. 수정 대상 파일 | 파일 | 위치 | 변경 내용 | |------|------|----------| | `src/components/material/ReceivingManagement/ReceivingDetail.tsx` | `loadData()` 함수 246~248행 | `length > 0` 조건 제거 | --- ## 5. 테스트 체크리스트 - [ ] 첨부파일 **전부 삭제** 후 검사적용 → 모달 닫힌 뒤 "검사 첨부파일" 섹션 비어있는지 확인 - [ ] 첨부파일 **일부 삭제** 후 검사적용 → 남은 파일만 표시되는지 확인 - [ ] 첨부파일 **삭제 없이** 검사적용 → 기존 파일 그대로 유지되는지 확인 - [ ] 첨부파일 **새로 추가** 후 검사적용 → 추가된 파일이 표시되는지 확인 --- ## 관련 문서 - `changes/20260318_receiving_create_ux_improvement.md` — 입고등록 UX 개선 --- **최종 업데이트**: 2026-03-18