Files

김보곤 ae19ee0955 docs: [receiving] 입고상세 수입검사 첨부파일 삭제 미갱신 버그 문서

- React ReceivingDetail.tsx state 갱신 조건 버그 기록
- 프론트엔드 개발자 전달용 수정 가이드 포함

2026-03-18 19:55:51 +09:00

3.0 KiB

Raw Blame History

[프론트엔드] 입고상세 수입검사 첨부파일 삭제 후 미갱신 버그

날짜: 2026-03-18 작성자: Claude Code 대상: React 프론트엔드 개발자 심각도: Medium 영향 범위: 입고관리 > 입고상세 > 수입검사

1. 증상

입고상세 페이지(/material/receiving-management/{id}/mode-view)에서 수입검사하기 버튼 클릭
수입검사 모달에서 기존 첨부파일 제거
검사적용 클릭하여 저장
모달 닫힘 → 입고상세 페이지의 "검사 첨부파일" 섹션에 삭제한 파일이 그대로 남아있음

페이지 새로고침(F5)하면 정상 반영됨 → DB에는 삭제 완료, 프론트 state만 갱신 안 되는 문제

2. 원인 분석

2.1 API 측 (정상)

DocumentService의 update 로직이 정상 동작한다:

// 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 갱신 부분

// AS-IS (버그) — 246~248행
if (templateCheck.attachments && templateCheck.attachments.length > 0) {
    setInspectionAttachments(templateCheck.attachments);
}

첨부파일을 전부 삭제하면 API 응답의 attachments가 빈 배열([])로 반환되는데, length > 0 조건에 의해 setInspectionAttachments([])가 호출되지 않는다. 이전 state(삭제 전 파일 목록)가 그대로 유지된다.

3. 수정 방법

// TO-BE (수정)
setInspectionAttachments(templateCheck.attachments ?? []);

조건문 제거 후 항상 최신 값을 반영한다. attachments가 null/undefined인 경우 빈 배열로 fallback.

4. 수정 대상 파일

파일	위치	변경 내용
`src/components/material/ReceivingManagement/ReceivingDetail.tsx`	`loadData()` 함수 246~248행	`length > 0` 조건 제거

5. 테스트 체크리스트

첨부파일 전부 삭제 후 검사적용 → 모달 닫힌 뒤 "검사 첨부파일" 섹션 비어있는지 확인
첨부파일 일부 삭제 후 검사적용 → 남은 파일만 표시되는지 확인
첨부파일 삭제 없이 검사적용 → 기존 파일 그대로 유지되는지 확인
첨부파일 새로 추가 후 검사적용 → 추가된 파일이 표시되는지 확인

3.0 KiB Raw Blame History