SamProject/sam-docs

Fork 0

Files

김보곤 90064fa866 docs: [receiving] 입고등록 UX 개선 프론트엔드 요청 문서 추가

2026-03-18 17:29:54 +09:00

5.2 KiB

Raw Blame History

입고등록 UX 개선 요청

작성일: 2026-03-18 상태: API 수정 완료, React 구현 요청

1. 개요

입고관리 입고입력(등록) 페이지에서 4가지 UX 이슈를 개선한다. API 측 rendered_html 크기 제한(500KB)은 반영 완료. React 측 수정 사항을 정리한다.

2. 수정 항목

2.1 작성자 기본값 — 세션 사용자 이름

현상: 입고 등록 시 작성자 필드가 빈 값(-) 기대: 현재 로그인한 사용자의 이름이 기본값으로 표시

수정 위치: ReceivingDetail.tsx — INITIAL_FORM_DATA

// 변경 전 (정적 초기값)
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() 함수

// 변경 전
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() 함수

// 저장 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 추가:

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	입고관리 API 스펙
receiving-item-search-fix-20260318.md	입고등록 품목검색 수정

5.2 KiB Raw Blame History