From ae19ee095568c37ce62307bb3403e271f6fe5b3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?= Date: Wed, 18 Mar 2026 19:55:51 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20[receiving]=20=EC=9E=85=EA=B3=A0?= =?UTF-8?q?=EC=83=81=EC=84=B8=20=EC=88=98=EC=9E=85=EA=B2=80=EC=82=AC=20?= =?UTF-8?q?=EC=B2=A8=EB=B6=80=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EB=AF=B8=EA=B0=B1=EC=8B=A0=20=EB=B2=84=EA=B7=B8=20=EB=AC=B8?= =?UTF-8?q?=EC=84=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - React ReceivingDetail.tsx state 갱신 조건 버그 기록 - 프론트엔드 개발자 전달용 수정 가이드 포함 --- INDEX.md | 1 + ...318_receiving_inspection_attachment_bug.md | 91 +++++++++++++++++++ 2 files changed, 92 insertions(+) create mode 100644 changes/20260318_receiving_inspection_attachment_bug.md diff --git a/INDEX.md b/INDEX.md index 282ed45..2a164fb 100644 --- a/INDEX.md +++ b/INDEX.md @@ -262,6 +262,7 @@ DB 도메인별: | [20260318_item-management-bom-tree.md](changes/20260318_item-management-bom-tree.md) | 품목관리 BOM 트리 3단계 구조 + 수식 산출 BOM 저장 기능 | | [20260318_receiving_create_ux_improvement.md](changes/20260318_receiving_create_ux_improvement.md) | 입고등록 UX 개선 (초기값 설정, 상세 이동, 413 수정, Dialog 접근성) | | [20260318_nginx_file_upload_413_fix.md](changes/20260318_nginx_file_upload_413_fix.md) | 서비스 파일 업로드 413 오류 수정 (Nginx client_max_body_size 설정) | +| [20260318_receiving_inspection_attachment_bug.md](changes/20260318_receiving_inspection_attachment_bug.md) | 입고상세 수입검사 첨부파일 삭제 후 미갱신 버그 (React 수정 필요) | --- diff --git a/changes/20260318_receiving_inspection_attachment_bug.md b/changes/20260318_receiving_inspection_attachment_bug.md new file mode 100644 index 0000000..ed07c82 --- /dev/null +++ b/changes/20260318_receiving_inspection_attachment_bug.md @@ -0,0 +1,91 @@ +# [프론트엔드] 입고상세 수입검사 첨부파일 삭제 후 미갱신 버그 + +**날짜:** 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