입고관리 입고등록 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() 호출하여 현재 로그인 사용자 이름을 기본값으로 설정

// 변경 전: 정적 초기값
const INITIAL_FORM_DATA = { createdBy: '', receivingDate: '' };

// 변경 후: 동적 초기값 생성 함수
function createInitialFormData() {
  return {
    createdBy: getLoggedInUserName(),
    receivingDate: getTodayString(),
  };
}

2. 입고일 기본값 — 오늘 날짜 자동 입력

이전: 입고일 필드가 빈 값으로 초기화 → 매번 날짜를 수동 선택해야 함 이후: getTodayString() (YYYY-MM-DD 형식) 기본값 설정

3. 등록 완료 후 상세 페이지로 바로 이동

이전: 등록 성공 → 입고 목록 페이지로 이동 → 사용자가 다시 상세로 진입 (불필요한 단계) 이후: 등록 성공 → 생성된 입고 ID의 상세 페이지로 바로 이동

// 변경 전
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로 제한, 초과 시 해당 필드를 제외하고 저장 진행

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)을 점검해야 한다.

테스트 체크리스트

입고 등록 페이지 진입 시 작성자 = 세션 사용자 이름
입고 등록 페이지 진입 시 입고일 = 오늘 날짜 (YYYY-MM-DD)
입고 등록 완료 후 생성된 입고 상세 페이지로 이동 확인
수입검사 저장 시 413 에러 미발생 확인 (개발서버)
수입검사 저장 후 검사 데이터 정상 반영 확인
Dialog 접근성 경고 콘솔에서 사라짐 확인

문서	설명
stock-receiving-changes-20260317.md	입고관리 API 스펙
receiving-item-search-fix-20260318.md	입고등록 품목검색 수정

5.4 KiB Raw Blame History