164 lines
5.2 KiB
Markdown
164 lines
5.2 KiB
Markdown
# 입고등록 UX 개선 요청
|
|
|
|
> **작성일**: 2026-03-18
|
|
> **상태**: API 수정 완료, React 구현 요청
|
|
|
|
---
|
|
|
|
## 1. 개요
|
|
|
|
입고관리 입고입력(등록) 페이지에서 4가지 UX 이슈를 개선한다.
|
|
API 측 `rendered_html` 크기 제한(500KB)은 반영 완료. React 측 수정 사항을 정리한다.
|
|
|
|
---
|
|
|
|
## 2. 수정 항목
|
|
|
|
### 2.1 작성자 기본값 — 세션 사용자 이름
|
|
|
|
**현상**: 입고 등록 시 작성자 필드가 빈 값(`-`)
|
|
**기대**: 현재 로그인한 사용자의 이름이 기본값으로 표시
|
|
|
|
**수정 위치**: `ReceivingDetail.tsx` — `INITIAL_FORM_DATA`
|
|
|
|
```typescript
|
|
// 변경 전 (정적 초기값)
|
|
const INITIAL_FORM_DATA = { createdBy: '' };
|
|
|
|
// 변경 후 (동적 함수로 전환)
|
|
function createInitialFormData() {
|
|
return {
|
|
createdBy: getLoggedInUserName(), // localStorage 'user'.name
|
|
receivingDate: getTodayString(), // YYYY-MM-DD
|
|
};
|
|
}
|
|
|
|
// useState 호출도 변경
|
|
const [formData, setFormData] = useState(createInitialFormData);
|
|
```
|
|
|
|
> `getLoggedInUserName()` 함수는 이미 같은 파일에 정의되어 있음 (104~121행)
|
|
|
|
---
|
|
|
|
### 2.2 입고일 기본값 — 오늘 날짜
|
|
|
|
**현상**: 입고일 필드가 빈 값 → 매번 날짜 수동 선택 필요
|
|
**기대**: 오늘 날짜가 기본값으로 설정
|
|
|
|
**수정**: 위 2.1과 동일한 `createInitialFormData()` 함수에서 `getTodayString()` 사용
|
|
|
|
> `getTodayString`은 이미 import되어 있음 (`@/lib/utils/date`)
|
|
|
|
---
|
|
|
|
### 2.3 등록 완료 후 상세 페이지로 바로 이동
|
|
|
|
**현상**: 등록 성공 → 목록으로 이동 → 사용자가 다시 상세 진입 (불필요한 단계)
|
|
**기대**: 등록 성공 → 생성된 입고의 상세 페이지로 바로 이동
|
|
|
|
**수정 위치**: `ReceivingDetail.tsx` — `handleSave()` 함수
|
|
|
|
```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` 응답에 `id` 필드가 이미 포함되어 있으므로 API 수정 불필요
|
|
|
|
---
|
|
|
|
### 2.4 수입검사 저장 시 413 에러 방지
|
|
|
|
**현상**: 수입검사 완료 저장 시 `rendered_html`(성적서 HTML 스냅샷)이 서버 요청 본문 크기 제한 초과 → 413 에러
|
|
**원인**: `captureRenderedHtml()`이 인라인 스타일/이미지 포함 HTML 생성 → 크기 급증
|
|
|
|
**API 수정 (완료)**: `UpsertRequest.php`에 `rendered_html` `max:512000` 검증 추가
|
|
|
|
**React 수정 요청**: `ImportInspectionInputModal.tsx` — `handleSave()` 함수
|
|
|
|
```typescript
|
|
// 저장 API 호출 직전에 크기 체크 추가
|
|
const MAX_HTML_SIZE = 500 * 1024; // 500KB
|
|
const safeHtml = renderedHtml && renderedHtml.length <= MAX_HTML_SIZE
|
|
? renderedHtml : undefined;
|
|
```
|
|
|
|
> `rendered_html`은 MNG 출력용 스냅샷으로, 없어도 검사 데이터 저장에 영향 없음
|
|
|
|
---
|
|
|
|
### 2.5 Dialog 접근성 경고 수정
|
|
|
|
**현상**: 콘솔에 `Warning: Missing Description or aria-describedby for DialogContent` 반복 (5건)
|
|
**원인**: Radix UI Dialog에서 `DialogDescription` 미포함
|
|
|
|
**수정 대상 파일 (4개)**:
|
|
|
|
| 파일 | 추가 내용 |
|
|
|------|----------|
|
|
| `ImportInspectionInputModal.tsx` | `DialogHeader` 안에 `<VisuallyHidden><DialogDescription>수입검사 항목 입력</DialogDescription></VisuallyHidden>` |
|
|
| `ReceivingProcessDialog.tsx` | `<VisuallyHidden><DialogDescription>입고 처리 정보 입력</DialogDescription></VisuallyHidden>` |
|
|
| `InventoryAdjustmentDialog.tsx` | `<VisuallyHidden><DialogDescription>재고 수량 조정</DialogDescription></VisuallyHidden>` |
|
|
| `SuccessDialog.tsx` | `<VisuallyHidden><DialogTitle>처리 완료</DialogTitle>` + `<DialogDescription>처리 결과 안내</DialogDescription></VisuallyHidden>` |
|
|
|
|
**import 추가**:
|
|
|
|
```typescript
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle,
|
|
VisuallyHidden, DialogDescription } from '@/components/ui/dialog';
|
|
```
|
|
|
|
---
|
|
|
|
## 3. 영향받는 파일 목록
|
|
|
|
```
|
|
react/src/components/material/ReceivingManagement/
|
|
├── ReceivingDetail.tsx ← 2.1, 2.2, 2.3
|
|
├── ImportInspectionInputModal.tsx ← 2.4, 2.5
|
|
├── ReceivingProcessDialog.tsx ← 2.5
|
|
├── InventoryAdjustmentDialog.tsx ← 2.5
|
|
└── SuccessDialog.tsx ← 2.5
|
|
```
|
|
|
|
---
|
|
|
|
## 4. API 변경사항 (반영 완료)
|
|
|
|
| 파일 | 변경 |
|
|
|------|------|
|
|
| `api/app/Http/Requests/Document/UpsertRequest.php` | `rendered_html` 검증 `max:512000` 추가 |
|
|
|
|
---
|
|
|
|
## 5. 테스트 체크리스트
|
|
|
|
- [ ] 입고 등록 진입 시 작성자 = 로그인 사용자 이름
|
|
- [ ] 입고 등록 진입 시 입고일 = 오늘 날짜
|
|
- [ ] 등록 완료 후 상세 페이지로 이동 (목록 경유하지 않음)
|
|
- [ ] 수입검사 저장 시 413 에러 미발생
|
|
- [ ] 수입검사 저장 후 데이터 정상 반영
|
|
- [ ] Dialog 경고 콘솔에서 사라짐 확인
|
|
|
|
---
|
|
|
|
## 관련 문서
|
|
|
|
| 문서 | 설명 |
|
|
|------|------|
|
|
| [stock-receiving-changes-20260317.md](stock-receiving-changes-20260317.md) | 입고관리 API 스펙 |
|
|
| [receiving-item-search-fix-20260318.md](receiving-item-search-fix-20260318.md) | 입고등록 품목검색 수정 |
|
|
|
|
---
|
|
|
|
**최종 업데이트**: 2026-03-18
|