docs: [receiving] 입고등록 UX 개선 변경 이력 추가
This commit is contained in:
김보곤
1
INDEX.md
1
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 접근성) |
|
||||
|
||||
---
|
||||
|
||||
|
||||
128
changes/20260318_receiving_create_ux_improvement.md
Normal file
128
changes/20260318_receiving_create_ux_improvement.md
Normal file
@@ -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` | `<VisuallyHidden><DialogDescription>수입검사 항목 입력</DialogDescription></VisuallyHidden>` |
|
||||
| `ReceivingProcessDialog.tsx` | `<VisuallyHidden><DialogDescription>입고 처리 정보 입력</DialogDescription></VisuallyHidden>` |
|
||||
| `InventoryAdjustmentDialog.tsx` | `<VisuallyHidden><DialogDescription>재고 수량 조정</DialogDescription></VisuallyHidden>` |
|
||||
| `SuccessDialog.tsx` | `<VisuallyHidden><DialogTitle>처리 완료</DialogTitle></VisuallyHidden>` + `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
|
||||
Reference in New Issue
Block a user