diff --git a/INDEX.md b/INDEX.md index e768017..9393483 100644 --- a/INDEX.md +++ b/INDEX.md @@ -293,6 +293,7 @@ DB 도메인별: | [stock-production-api.md](frontend/api-specs/stock-production-api.md) | 재고생산관리 API 명세 (기존 수주 API + STOCK 타입) | | [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) | 입고등록 품목검색 버그 수정 (per_page/itemType 파라미터, 프론트엔드 전달용) | +| [receiving-create-ux-20260318.md](frontend/api-specs/receiving-create-ux-20260318.md) | 입고등록 UX 개선 요청 (초기값, 상세이동, 413 수정, Dialog 접근성) | | [ai-token-usage-api.md](frontend/api-specs/ai-token-usage-api.md) | AI 토큰사용량 API 명세 (2개 엔드포인트 + 화면 가이드 + 타입 정의) | | [usage-subscription-api.md](frontend/api-specs/usage-subscription-api.md) | 이용현황(구독관리 통합) API 명세 (API 완료, 화면 가이드, 타입 정의, 피드백 반영) | | [vehicle-react-implementation.md](plans/vehicle-react-implementation.md) | 차량관리 React 구현 요청서 (3개 메뉴, 컴포넌트 구조, 타입 정의) | diff --git a/frontend/api-specs/receiving-create-ux-20260318.md b/frontend/api-specs/receiving-create-ux-20260318.md new file mode 100644 index 0000000..c944862 --- /dev/null +++ b/frontend/api-specs/receiving-create-ux-20260318.md @@ -0,0 +1,163 @@ +# 입고등록 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` 안에 `수입검사 항목 입력` | +| `ReceivingProcessDialog.tsx` | `입고 처리 정보 입력` | +| `InventoryAdjustmentDialog.tsx` | `재고 수량 조정` | +| `SuccessDialog.tsx` | `처리 완료` + `처리 결과 안내` | + +**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