From 051ea3846ccea241d6f17eabd731441c334ca098 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 17:26:49 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20[receiving]=20=EC=9E=85=EA=B3=A0?= =?UTF-8?q?=EB=93=B1=EB=A1=9D=20UX=20=EA=B0=9C=EC=84=A0=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EC=9D=B4=EB=A0=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- INDEX.md | 1 + ...0260318_receiving_create_ux_improvement.md | 128 ++++++++++++++++++ 2 files changed, 129 insertions(+) create mode 100644 changes/20260318_receiving_create_ux_improvement.md diff --git a/INDEX.md b/INDEX.md index 0b30c45..e768017 100644 --- a/INDEX.md +++ b/INDEX.md @@ -259,6 +259,7 @@ DB 도메인별: | [20260318_item_fields_htmx_redirect_fix.md](changes/20260318_item_fields_htmx_redirect_fix.md) | 품목기준 필드관리 HTMX 네비게이션 switchTab 오류 수정 | | [20260318_item_management_delete_scope_fix.md](changes/20260318_item_management_delete_scope_fix.md) | 품목관리 삭제 시 loadItemList 스코프 오류 수정 | | [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 접근성) | --- diff --git a/changes/20260318_receiving_create_ux_improvement.md b/changes/20260318_receiving_create_ux_improvement.md new file mode 100644 index 0000000..76691ac --- /dev/null +++ b/changes/20260318_receiving_create_ux_improvement.md @@ -0,0 +1,128 @@ +# 입고관리 입고등록 UX 개선 및 검사 저장 413 오류 수정 + +**날짜:** 2026-03-18 +**작업자:** Claude Code + +## 변경 개요 + +입고관리 입고입력(등록) 페이지의 초기값 미설정, 등록 후 불필요한 목록 경유, 수입검사 저장 시 413 에러, Dialog 접근성 경고 등 4건의 이슈를 수정했다. + +--- + +## 수정된 파일 + +| 파일 | 변경 내용 | +|------|----------| +| `react/src/components/material/ReceivingManagement/ReceivingDetail.tsx` | 작성자/입고일 기본값 설정, 등록 후 상세 페이지로 이동 | +| `react/src/components/material/ReceivingManagement/ImportInspectionInputModal.tsx` | `rendered_html` 크기 제한 (413 방지), `DialogDescription` 추가 | +| `react/src/components/material/ReceivingManagement/ReceivingProcessDialog.tsx` | `DialogDescription` 추가 | +| `react/src/components/material/ReceivingManagement/InventoryAdjustmentDialog.tsx` | `DialogDescription` 추가 | +| `react/src/components/material/ReceivingManagement/SuccessDialog.tsx` | `DialogTitle` + `DialogDescription` 추가 | + +--- + +## 상세 변경 사항 + +### 1. 작성자 기본값 — 세션 사용자 이름 자동 입력 + +**이전**: 입고 등록 시 작성자 필드가 빈 값(`''`)으로 초기화 +**이후**: `getLoggedInUserName()` 호출하여 현재 로그인 사용자 이름을 기본값으로 설정 + +```typescript +// 변경 전: 정적 초기값 +const INITIAL_FORM_DATA = { createdBy: '', receivingDate: '' }; + +// 변경 후: 동적 초기값 생성 함수 +function createInitialFormData() { + return { + createdBy: getLoggedInUserName(), + receivingDate: getTodayString(), + }; +} +``` + +### 2. 입고일 기본값 — 오늘 날짜 자동 입력 + +**이전**: 입고일 필드가 빈 값으로 초기화 → 매번 날짜를 수동 선택해야 함 +**이후**: `getTodayString()` (YYYY-MM-DD 형식) 기본값 설정 + +### 3. 등록 완료 후 상세 페이지로 바로 이동 + +**이전**: 등록 성공 → 입고 목록 페이지로 이동 → 사용자가 다시 상세로 진입 (불필요한 단계) +**이후**: 등록 성공 → 생성된 입고 ID의 상세 페이지로 바로 이동 + +```typescript +// 변경 전 +router.push('/ko/material/receiving-management'); + +// 변경 후 +const newId = result.data?.id; +if (newId) { + router.push(`/ko/material/receiving-management/${newId}?mode=view`); +} else { + router.push('/ko/material/receiving-management'); +} +``` + +> API `POST /api/v1/receivings` 응답에 생성된 Receiving 모델(id 포함)이 이미 반환되므로, API 수정 없이 프론트엔드만 변경했다. + +### 4. 수입검사 저장 시 413 (Request Entity Too Large) 오류 수정 + +**원인**: `ImportInspectionInputModal`에서 검사 완료 시 `captureRenderedHtml()`로 수입검사 성적서를 오프스크린 렌더링하여 HTML 스냅샷을 생성하는데, 인라인 스타일/이미지가 포함된 HTML이 서버의 요청 본문 크기 제한을 초과 + +**수정**: `rendered_html` 크기를 500KB로 제한, 초과 시 해당 필드를 제외하고 저장 진행 + +```typescript +const MAX_HTML_SIZE = 500 * 1024; // 500KB 제한 +const safeHtml = renderedHtml && renderedHtml.length <= MAX_HTML_SIZE + ? renderedHtml : undefined; +``` + +> `rendered_html`은 MNG 출력용 스냅샷으로, 없어도 검사 데이터 저장에는 영향이 없다. 향후 서버 Nginx `client_max_body_size` 설정 확인이 필요할 수 있다. + +### 5. Dialog 접근성 경고 수정 + +**증상**: 콘솔에 `Warning: Missing Description or aria-describedby={undefined} for {DialogContent}` 반복 출력 (5건) + +**원인**: Radix UI Dialog 컴포넌트에서 `DialogDescription`이 누락된 4개 파일 + +**수정**: `VisuallyHidden` + `DialogDescription`을 각 Dialog에 추가 + +| 파일 | 추가된 내용 | +|------|-----------| +| `ImportInspectionInputModal.tsx` | `수입검사 항목 입력` | +| `ReceivingProcessDialog.tsx` | `입고 처리 정보 입력` | +| `InventoryAdjustmentDialog.tsx` | `재고 수량 조정` | +| `SuccessDialog.tsx` | `처리 완료` + `DialogDescription` | + +--- + +## API 수정 사항 + +API 서버 변경 없음. 기존 `POST /api/v1/receivings` 응답에 `id` 필드가 이미 포함되어 있어 프론트엔드만 수정했다. + +> 413 에러가 지속되는 경우, 개발서버 Nginx의 `client_max_body_size` 설정(현재 50M)과 Next.js `serverActions.bodySizeLimit` 설정(현재 10mb)을 점검해야 한다. + +--- + +## 테스트 체크리스트 + +- [x] 입고 등록 페이지 진입 시 작성자 = 세션 사용자 이름 +- [x] 입고 등록 페이지 진입 시 입고일 = 오늘 날짜 (YYYY-MM-DD) +- [x] 입고 등록 완료 후 생성된 입고 상세 페이지로 이동 확인 +- [ ] 수입검사 저장 시 413 에러 미발생 확인 (개발서버) +- [ ] 수입검사 저장 후 검사 데이터 정상 반영 확인 +- [ ] Dialog 접근성 경고 콘솔에서 사라짐 확인 + +--- + +## 관련 문서 + +| 문서 | 설명 | +|------|------| +| [stock-receiving-changes-20260317.md](../frontend/api-specs/stock-receiving-changes-20260317.md) | 입고관리 API 스펙 | +| [receiving-item-search-fix-20260318.md](../frontend/api-specs/receiving-item-search-fix-20260318.md) | 입고등록 품목검색 수정 | + +--- + +**최종 업데이트**: 2026-03-18