sam-react-prod/claudedocs/item-master/[NEXT-2025-12-13] item-file-upload-session-context.md

품목관리 파일 업로드 세션 컨텍스트

세션 정보

• 날짜: 2025-12-13
• 커밋: c026130 - feat: 품목관리 파일 업로드 기능 개선

완료된 작업

1. 파일 업로드 API 파라미터 추가

• src/lib/api/items.ts의 uploadItemFile 함수에 fieldKey, fileId 파라미터 추가
• FormData에 field_key, file_id 필드 append

2. 타입 정의 추가

• src/types/item.ts에 ItemFile, ItemFiles 인터페이스 추가

export interface ItemFile {
  id: number;
  file_name: string;
  file_path: string;
}

export interface ItemFiles {
  bending_diagram?: ItemFile[];
  specification?: ItemFile[];
  certification?: ItemFile[];
}

3. DynamicItemForm 파일 데이터 파싱

• 새 API 구조 (files 객체) 지원
• 기존 API 구조 폴백 유지 (하위 호환)
• 파일 ID 상태 추가: existingSpecificationFileId, existingCertificationFileId, existingBendingDiagramFileId

4. 시방서/인정서 파일 UI 개선

• 기존: 파일명 표시 + 별도 파일 선택 input
• 변경: 파일 있으면 [파일명] [⬇️] [✏️] [🗑️] 버튼 UI
• 파일 없으면 기존 파일 선택 UI 표시

진행 중 (백엔드 대기)

파일 업로드 500 에러

• 증상: POST /api/proxy/items/{id}/files → 500 에러
• 원인: 백엔드에서 field_key, file_id 파라미터 처리 미구현
• Next.js 프록시 로그:

📎 File field: file = 230601_test.pdf (70976 bytes)
📎 Form field: type = certification
📎 Form field: field_key = certification_file
📎 Form field: file_id = 0
🔵 Response status: 500

• 상태: 프론트엔드 준비 완료, 백엔드 수정 대기 중

다음 세션 TODO

1. DynamicItemForm index.tsx 분리 작업

• 현재 2000줄+ → 500줄 이하 목표
• 컴포넌트 분리:
  • FormHeader
  • ValidationAlert
  • DynamicSectionRenderer
  • 파일 업로드 섹션
  • BOM 섹션
• hooks/utils 정리

2. 파일 업로드 테스트 (백엔드 완료 후)

• 신규 품목 등록 → 파일 업로드 → 수정 페이지 확인
• 다운로드/수정/삭제 버튼 동작 검증
• 파일 덮어쓰기 (file_id: 0) 동작 확인

API 구조 참고

새 API 응답 구조 (조회)

{
  "files": {
    "bending_diagram": [{ "id": 1, "file_name": "벤딩도.pdf", "file_path": "/uploads/..." }],
    "specification": [{ "id": 2, "file_name": "규격서.pdf", "file_path": "/uploads/..." }],
    "certification": [{ "id": 3, "file_name": "인정서.pdf", "file_path": "/uploads/..." }]
  }
}

파일 업로드 요청 (FormData)

file: [File]
type: specification | certification | bending_diagram
field_key: specification_file | certification_file | bending_diagram
file_id: 0 (덮어쓰기) | 1, 2, 3... (추가)

주요 파일 위치

• 타입: src/types/item.ts
• API: src/lib/api/items.ts
• 폼: src/components/items/DynamicItemForm/index.tsx
• 프록시: src/app/api/proxy/[...path]/route.ts