fix: 품목관리 수정 기능 버그 수정 및 Sales 페이지 추가

## 품목관리 수정 버그 수정
- FG(제품) 수정 시 품목명 반영 안되는 문제 해결
  - productName → name 필드 매핑 추가
  - FG 품목코드 = 품목명 동기화 로직 추가
- Materials(SM, RM, CS) 수정페이지 진입 오류 해결
- UNIQUE 제약조건 위반 오류 해결

## Sales 페이지
- 거래처관리 (client-management-sales-admin) 페이지 구현
- 견적관리 (quote-management) 페이지 구현
- 관련 컴포넌트 및 훅 추가

## 기타
- 회원가입 페이지 차단 처리
- 디버깅용 콘솔 로그 추가 (PUT 요청/응답 확인용)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
2025-12-04 20:52:42 +09:00
parent 42f80e2b16
commit 751e65f59b
52 changed files with 8869 additions and 1088 deletions

View File

@@ -1,35 +1,98 @@
# 품목코드/품목명 자동생성 하드코딩 내역
# 품목관리 하드코딩 내역 종합 문서
> MVP용 프론트엔드 구현 - 추후 백엔드 API 또는 품목기준관리 설정으로 이관 필요
> **MVP용 프론트엔드 구현** - 추후 품목기준관리 설정 또는 백엔드 API로 이관 필요
## 개요
PT(부품) 품목 등록 시 품목코드와 품목명을 자동 생성하는 로직이 프론트엔드에 하드코딩되어 있습니다.
이 문서는 해당 하드코딩 내역을 정리하여 추후 백엔드 이관 시 참고할 수 있도록 합니다.
## 품목코드/품목명 생성 규칙
### 적용 범위
| 품목유형 | 품목코드 형식 | 품목명 형식 | 예시 |
|---------|-------------|------------|------|
| **PT (부품)** | `영문약어-순번` | 한글 조합 | `GR-001` / `가이드레일 130×80` |
| FG (제품) | `품목명-규격` | 직접 입력 | `스크린-2400` |
| SM (부자재) | `품목명-규격` | 직접 입력 | `볼트-M8` |
| RM (원자재) | `품목명-규격` | 직접 입력 | `알루미늄-T1.5` |
| CS (소모품) | `품목명-규격` | 직접 입력 | `테이프-50mm` |
품목기준관리에서 동적으로 설정해야 하지만 아직 해당 기능이 없어 프론트엔드에 하드코딩된 기능 목록입니다.
---
## 하드코딩 항목 1: 영문약어 매핑 테이블
## 하드코딩 항목 요약
| # | 항목 | 파일 위치 | 우선순위 | 상태 |
|---|------|----------|---------|------|
| 1 | 품목유형 등록 (FG/PT/SM/RM/CS) | `ItemTypeSelect.tsx` | 🔴 High | 하드코딩 |
| 2 | 품목코드/품목명 자동생성 | `itemCodeGenerator.ts`, `DynamicItemForm/index.tsx` | 🔴 High | 하드코딩 |
| 3 | 전개도/바라시 섹션 (조립/절곡) | `DynamicItemForm/index.tsx` | 🟡 Medium | 하드코딩 |
| 4 | BOM 섹션 내부 구조 | `DynamicBOMSection.tsx` | 🟡 Medium | 하드코딩 |
| 5 | 부품유형 판별 로직 | `DynamicItemForm/index.tsx` | 🟢 Low | 하드코딩 |
| 6 | FG(제품) 시방서/인정서 파일업로드 | `DynamicItemForm/index.tsx` | 🟡 Medium | 하드코딩 |
---
## 1. 품목유형 등록 (FG/PT/SM/RM/CS)
### 파일 위치
`src/components/items/DynamicItemForm/utils/itemCodeGenerator.ts`
`src/components/items/ItemTypeSelect.tsx`
### 상수명
`ITEM_CODE_PREFIX_MAP`
### 하드코딩 내용
```typescript
const ITEM_TYPE_LABELS_WITH_ENGLISH: Record<ItemType, string> = {
FG: '제품 (Finished Goods)',
PT: '부품 (Part)',
SM: '부자재 (Sub Material)',
RM: '원자재 (Raw Material)',
CS: '소모품 (Consumables)',
};
```
### 문제점
- 품목유형 추가/수정/삭제 불가
- 각 유형별 표시 순서 고정
- 영문명 커스터마이징 불가
### 마이그레이션 방안
```yaml
Phase 1: 품목기준관리 API 확장
- item_types 테이블 생성
- GET /api/v1/item-master/types 엔드포인트 추가
- 응답: { code: 'FG', name: '제품', englishName: 'Finished Goods', sortOrder: 1 }
Phase 2: 프론트엔드 연동
- ItemTypeSelect에서 API 호출
- 품목기준관리에 품목유형 관리 UI 추가
```
---
## 2. 품목코드/품목명 자동생성
### 파일 위치
- **부품(PT)**: `src/components/items/DynamicItemForm/utils/itemCodeGenerator.ts`
- **제품(FG)**: `src/components/items/DynamicItemForm/index.tsx` (Lines: 1430-1444)
### 2-0. 제품(FG) 품목코드 규칙
```typescript
// 제품(FG)의 품목코드는 품목명과 동일 (조합식 없음)
// DynamicItemForm/index.tsx에서 직접 처리
{/* FG(제품) 전용: 품목명 필드 다음에 품목코드 자동생성 */}
{isItemNameField && selectedItemType === 'FG' && (
<div className="mt-4">
<Label htmlFor="fg_item_code_auto">품목코드 (자동생성)</Label>
<Input
id="fg_item_code_auto"
value={(formData[itemNameKey] as string) || ''}
placeholder="품목명이 입력되면 자동으로 동일하게 생성됩니다"
disabled
className="bg-muted text-muted-foreground"
/>
<p className="text-xs text-muted-foreground mt-1">
* 제품(FG) 품목코드는 품목명과 동일하게 설정됩니다
</p>
</div>
)}
```
**제품(FG) 특징**:
- 품목코드 = 품목명 (단순 복사)
- 조합식이나 영문약어 매핑 없음
- `isItemNameField` 플래그로 품목명 필드 다음에 자동으로 표시
### 2-1. 영문약어 매핑 테이블
### 내용
```typescript
export const ITEM_CODE_PREFIX_MAP: Record<string, string> = {
// 부품 - 조립품
@@ -69,21 +132,8 @@ export const ITEM_CODE_PREFIX_MAP: Record<string, string> = {
};
```
### 마이그레이션 방안
- 품목기준관리 API에 `영문약어 설정` 기능 추가
- 또는 별도 `item_code_prefix` 테이블 생성
### 2-2. 절곡품 코드 체계
---
## 하드코딩 항목 2: 절곡품 코드 체계
### 파일 위치
`src/components/items/DynamicItemForm/utils/itemCodeGenerator.ts`
### 상수명
`BENDING_CODE_SYSTEM`
### 내용
```typescript
export const BENDING_CODE_SYSTEM = {
// 품목명코드 (category2)
@@ -128,25 +178,8 @@ export const BENDING_CODE_SYSTEM = {
};
```
### 사용 예시
- 품목명코드 `R` + 종류코드 `C` + 길이코드 `24` = `RC24`
- 가이드레일 채널 2438mm
### 2-3. 조립품 설치유형 매핑
### 마이그레이션 방안
- 품목기준관리 API에 `코드 체계 설정` 기능 추가
- 또는 별도 `bending_code_system` 테이블 생성
---
## 하드코딩 항목 3: 조립품 설치유형 매핑
### 파일 위치
`src/components/items/DynamicItemForm/utils/itemCodeGenerator.ts`
### 상수명
`INSTALLATION_TYPE_MAP`
### 내용
```typescript
export const INSTALLATION_TYPE_MAP: Record<string, string> = {
'standard': '표준형',
@@ -157,79 +190,359 @@ export const INSTALLATION_TYPE_MAP: Record<string, string> = {
};
```
### 사용 예시
- 품목명 `가이드레일` + 설치유형 `standard``가이드레일표준형`
### 자동생성 함수 목록
| 함수명 | 용도 | 형식 예시 |
|--------|------|----------|
| `generateItemCode` | PT 품목코드 | `GR-001`, `MOTOR-002` |
| `generateBendingItemCode` | 절곡품 품목코드 | `RC24` (가이드레일 채널 2438mm) |
| `generateAssemblyItemName` | 조립품 품목명 | `가이드레일표준형50*60*24` |
| `generateBendingItemName` | 절곡품 품목명 | `가이드레일 채널 50×30` |
| `generatePurchasedItemName` | 구매품 품목명 | `모터 0.4KW` |
### 마이그레이션 방안
- 품목기준관리 필드 옵션으로 설정 가능하도록 변경
```yaml
Phase 1: 품목기준관리 설정 확장
- 영문약어 필드 추가 (품목명 필드 옵션에 매핑)
- 코드생성규칙 설정 UI 추가
---
## 자동생성 함수 목록
### 1. generateItemCode (품목코드 생성)
```typescript
// 용도: PT(부품) 품목코드 자동생성
// 형식: 영문약어-순번 (예: GR-001, MOTOR-002)
generateItemCode(itemName: string, existingCodes: string[]): string
```
### 2. generateBendingItemCode (절곡품 품목코드)
```typescript
// 용도: 절곡품 전용 품목코드
// 형식: 품목명코드 + 종류코드 + 길이코드 (예: RC24)
generateBendingItemCode(category2: string, category3: string, lengthMm: number): string
```
### 3. generateAssemblyItemName (조립품 품목명)
```typescript
// 용도: 조립품 품목명 자동생성
// 형식: 품목명 + 설치유형 + 측면규격*길이코드 (예: 가이드레일표준형50*60*24)
generateAssemblyItemName(itemName, installationType, sideSpecWidth, sideSpecHeight, lengthMm): string
```
### 4. generateBendingItemName (절곡품 품목명)
```typescript
// 용도: 절곡품 품목명 자동생성
// 형식: 품목명 + 종류 + 규격 (예: 가이드레일 채널 50×30)
generateBendingItemName(category2Label, category3Label, specification): string
```
### 5. generatePurchasedItemName (구매품 품목명)
```typescript
// 용도: 구매품 품목명 자동생성
// 형식: 품목명 + 규격 (예: 모터 0.4KW)
generatePurchasedItemName(itemName, specification): string
Phase 2: 백엔드 이관
- 품목 저장 시 백엔드에서 코드 자동 생성
- 순번 관리를 DB 시퀀스로 변경 (동시성 처리)
```
---
## 추후 개발 계획
## 3. 전개도/바라시 섹션 (조립/절곡)
### Phase 1: 품목기준관리 설정 확장
1. `영문약어` 필드 추가 (품목명 필드 옵션에 매핑)
2. `코드생성규칙` 설정 UI 추가
3. API에서 코드 생성 규칙 반환
### 파일 위치
`src/components/items/DynamicItemForm/index.tsx` (Lines: 1474-1560)
### Phase 2: 백엔드 이관
1. 품목 저장 시 백엔드에서 코드 자동 생성
2. 순번 관리를 DB 시퀀스로 변경 (동시성 처리)
3. 프론트엔드 하드코딩 제거
### 하드코딩 내용
### Phase 3: 고급 기능
1. 품목별 코드 생성 규칙 커스터마이징
2. 코드 중복 검사 강화
3. 코드 변경 이력 관리
#### 3-1. 조립품 전개도 섹션 (바라시)
```typescript
{/* 조립품 전개도 섹션 (PT - 조립 부품 전용) */}
{selectedItemType === 'PT' && isAssemblyPart && assemblyItemNameKey && (
<BendingDiagramSection
title="조립품 전개도"
description="조립품 전개도(바라시)를 그리거나 편집합니다."
...
/>
)}
```
#### 3-2. 절곡품 전개도 섹션
```typescript
{/* 절곡품 전개도 섹션 (PT - 절곡 부품 전용) */}
{selectedItemType === 'PT' && isBendingPart && bendingFields.material && (
<BendingDiagramSection
title="절곡품 전개도"
description="절곡품 전개도를 그리거나 편집합니다."
...
/>
)}
```
### 문제점
- 전개도 섹션 표시 조건이 코드에 고정
- 조립/절곡 외 다른 부품유형에 전개도 추가 불가
- 전개도 섹션 필드 구성 변경 불가
### 데이터 구조 (저장 시)
```typescript
// 절곡품
{
bending_diagram: string | null, // 전개도 이미지 Base64
bending_details: BendingDetail[], // 전개도 상세 (좌표, 길이 등)
width_sum: string | null, // 폭 합계
shape_and_length: string | null, // 모양 & 길이
}
// 조립품 (동일 필드 사용)
{
bending_diagram: string | null,
width_sum: string | null,
shape_and_length: string | null,
}
```
### 마이그레이션 방안
```yaml
Phase 1: 품목기준관리에 "특수 섹션" 설정 추가
- 섹션 유형: 일반, 전개도, BOM 선택 가능
- 전개도 섹션 표시 조건 설정 (부품유형별)
Phase 2: 동적 렌더링 연동
- 품목기준관리 설정에 따라 전개도 섹션 표시
- 필드 구성도 동적으로 변경 가능
```
---
## 관련 파일
## 4. BOM 섹션 내부 구조
| 파일 | 설명 |
|-----|------|
| `src/components/items/DynamicItemForm/utils/itemCodeGenerator.ts` | 하드코딩된 매핑 및 생성 함수 |
| `src/components/items/DynamicItemForm/index.tsx` | 품목코드 자동생성 로직 호출 |
| `claudedocs/item-master/[IMPL-2025-12-02] item-code-auto-generation.md` | 기존 품목코드 자동생성 문서 |
### 파일 위치
`src/components/items/DynamicItemForm/sections/DynamicBOMSection.tsx`
### 하드코딩 내용
#### 4-1. BOM 라인 기본 구조
```typescript
const newLine: BOMLine = {
id: `bom-${Date.now()}`,
childItemCode: '',
childItemName: '',
quantity: 1,
unit: 'EA', // 기본 단위 고정
specification: '',
material: '',
note: '',
partType: '',
bendingDiagram: '',
};
```
#### 4-2. BOM 테이블 컬럼 구조
```typescript
// 고정된 컬럼들
<TableHead>품목코드</TableHead>
<TableHead>품목명</TableHead>
<TableHead>규격</TableHead>
<TableHead>재질</TableHead>
<TableHead className="w-24">수량</TableHead>
<TableHead className="w-20">단위</TableHead>
<TableHead>비고</TableHead>
```
#### 4-3. 품목 검색 결과 매핑
```typescript
const mappedItems: SearchedItem[] = rawItems.map((item) => ({
id: String(item.id),
itemCode: (item.code ?? item.item_code ?? '') as string,
itemName: (item.name ?? item.item_name ?? '') as string,
specification: (item.specification ?? '') as string,
material: (item.material ?? '') as string,
unit: (item.unit ?? 'EA') as string,
partType: (item.part_type ?? '') as string,
bendingDiagram: (item.bending_diagram ?? '') as string,
}));
```
### 문제점
- BOM 컬럼 추가/삭제/순서변경 불가
- 기본 단위 'EA' 고정
- BOM 필드별 필수여부 설정 불가
- 절곡품 전개도 표시 영역 고정
### 마이그레이션 방안
```yaml
Phase 1: 품목기준관리에 "BOM 섹션 설정" 추가
- BOM 컬럼 구성 설정 (표시/숨김, 순서)
- 기본값 설정 (단위, 수량 등)
Phase 2: 동적 BOM 렌더링
- 품목기준관리 설정에 따라 BOM 테이블 렌더링
- 컬럼별 width, 정렬 등 설정 가능
```
---
## 5. 부품유형 판별 로직
### 파일 위치
`src/components/items/DynamicItemForm/index.tsx` (Lines: 444-505)
### 하드코딩 내용
```typescript
// part_type 필드 탐지 (field_key 기반)
const isPartType = fieldKey.includes('part_type') ||
lowerKey.includes('부품유형') ||
lowerKey.includes('부품_유형') ||
fieldName.includes('부품유형') ||
fieldName.includes('부품 유형');
// 부품유형별 판별 (값 기반)
const isBending = currentPartType.includes('절곡') ||
currentPartType.toUpperCase() === 'BENDING';
const isAssembly = currentPartType.includes('조립') ||
currentPartType.toUpperCase() === 'ASSEMBLY';
const isPurchased = currentPartType.includes('구매') ||
currentPartType.toUpperCase() === 'PURCHASED';
```
### 문제점
- 부품유형 키워드 매칭이 코드에 고정
- 새로운 부품유형 추가 시 코드 수정 필요
- 다국어 지원 어려움
### 마이그레이션 방안
```yaml
Phase 1: 품목기준관리에 "부품유형 설정" 추가
- 부품유형 목록 관리 (절곡, 조립, 구매 등)
- 각 부품유형별 특수 처리 설정
Phase 2: 동적 부품유형 판별
- API에서 부품유형 목록과 매칭 키워드 제공
- 코드 기반 판별에서 설정 기반 판별로 전환
```
---
## 6. FG(제품) 시방서/인정서 파일업로드
### 파일 위치
`src/components/items/DynamicItemForm/index.tsx` (Lines: 1446-1494)
### 하드코딩 내용
#### 6-1. 파일업로드 상태 관리
```typescript
// FG(제품) 전용 파일 업로드 상태 관리
const [specificationFile, setSpecificationFile] = useState<File | null>(null);
const [certificationFile, setCertificationFile] = useState<File | null>(null);
```
#### 6-2. 인정 유효기간 종료일 필드 감지
```typescript
// 인정 유효기간 종료일 필드인지 체크 (FG 시방서/인정서 파일 업로드 위치)
const isCertEndDateField = fieldKey.includes('certification_end') ||
fieldKey.includes('인정_유효기간_종료') ||
fieldName.includes('인정 유효기간 종료') ||
fieldName.includes('유효기간 종료');
```
#### 6-3. 시방서/인정서 파일업로드 UI
```typescript
{/* FG(제품) 전용: 인정 유효기간 종료일 다음에 시방서/인정서 파일 업로드 */}
{isCertEndDateField && selectedItemType === 'FG' && (
<div className="mt-4 space-y-4">
{/* 시방서 파일 업로드 */}
<div>
<Label htmlFor="specification_file">시방서 (PDF)</Label>
<div className="mt-1.5">
<Input
id="specification_file"
type="file"
accept=".pdf"
onChange={(e) => {
const file = e.target.files?.[0] || null;
setSpecificationFile(file);
}}
disabled={isSubmitting}
className="cursor-pointer"
/>
{specificationFile && (
<p className="text-xs text-muted-foreground mt-1">
선택된 파일: {specificationFile.name}
</p>
)}
</div>
</div>
{/* 인정서 파일 업로드 */}
<div>
<Label htmlFor="certification_file">인정서 (PDF)</Label>
<div className="mt-1.5">
<Input
id="certification_file"
type="file"
accept=".pdf"
onChange={(e) => {
const file = e.target.files?.[0] || null;
setCertificationFile(file);
}}
disabled={isSubmitting}
className="cursor-pointer"
/>
{certificationFile && (
<p className="text-xs text-muted-foreground mt-1">
선택된 파일: {certificationFile.name}
</p>
)}
</div>
</div>
</div>
)}
```
### 표시 위치
- **조건**: `selectedItemType === 'FG'` (제품 유형일 때만)
- **위치**: 인정 유효기간 종료일 필드 바로 다음
- **파일 형식**: PDF만 허용 (`accept=".pdf"`)
### 문제점
- FG 유형 고정 (다른 품목유형에는 표시 안됨)
- 인정 유효기간 종료일 필드명 매칭이 하드코딩
- 파일 업로드 필드가 품목기준관리에서 설정 불가
### 마이그레이션 방안
```yaml
Phase 1: 품목기준관리에 "파일 첨부 필드" 유형 추가
- 필드 타입: file, image, document 등
- 허용 확장자 설정 (PDF, DOC, 이미지 등)
- 품목유형별 표시 조건 설정
Phase 2: 동적 파일업로드 렌더링
- 품목기준관리 설정에 따라 파일 필드 동적 표시
- 백엔드 파일 저장 API 연동
```
---
## 추가 하드코딩 발견 사항
### 속성 옵션 상태
**파일**: `src/components/items/ItemMasterDataManagement/hooks/useAttributeManagement.ts:77`
```typescript
// 속성 옵션 상태 (기본값 하드코딩 - TODO: 나중에 백엔드 API로 대체)
```
### BOM 가격 정보
**파일**: `src/components/items/ItemForm/hooks/useBOMManagement.ts:89`
```typescript
unitPrice: 0, // TODO: pricing에서 가져오기
```
---
## 종합 마이그레이션 로드맵
### Phase 1: 품목기준관리 API 확장 (백엔드)
1. `item_types` 테이블 - 품목유형 관리
2. `code_generation_rules` 테이블 - 코드 생성 규칙
3. `special_sections` 설정 - 전개도/BOM 섹션 설정
4. `part_types` 테이블 - 부품유형 관리
### Phase 2: 품목기준관리 UI 확장 (프론트엔드)
1. 품목유형 관리 탭 추가
2. 코드생성규칙 설정 UI
3. 특수 섹션 설정 UI
4. 부품유형 관리 UI
### Phase 3: 동적 렌더링 연동
1. 품목유형 API 연동 (ItemTypeSelect)
2. 코드 자동생성 API 연동 (itemCodeGenerator 대체)
3. 전개도 섹션 동적 렌더링
4. BOM 섹션 동적 렌더링
### Phase 4: 프론트엔드 하드코딩 제거
1. 상수 파일들 제거
2. 판별 로직 설정 기반으로 전환
3. 테스트 및 검증
---
## 관련 파일 목록
| 파일 | 하드코딩 항목 |
|------|-------------|
| `src/components/items/ItemTypeSelect.tsx` | 품목유형 목록 |
| `src/components/items/DynamicItemForm/utils/itemCodeGenerator.ts` | PT 코드 생성 규칙, 매핑 테이블 |
| `src/components/items/DynamicItemForm/index.tsx` | FG 품목코드, FG 시방서/인정서 파일업로드, 전개도 섹션, 부품유형 판별 |
| `src/components/items/DynamicItemForm/sections/DynamicBOMSection.tsx` | BOM 구조 |
| `src/components/items/DynamicItemForm/types.ts` | BOMLine 타입 정의 |
> **참고**: `src/components/items/ItemForm/forms/ProductForm.tsx`는 현재 사용되지 않음 (레거시)
---
@@ -237,5 +550,8 @@ generatePurchasedItemName(itemName, specification): string
| 날짜 | 내용 |
|-----|------|
| 2025-12-03 | PT 품목코드 `영문약어-순번` 형식 구현 |
| 2025-12-03 | 하드코딩 내역 문서화 |
| 2025-12-03 | 품목코드/품목명 자동생성 문서화 |
| 2025-12-04 | 전체 하드코딩 항목 종합 문서로 확장 |
| 2025-12-04 | 품목유형, 전개도/바라시, BOM 섹션 추가 |
| 2025-12-04 | 제품(FG) 품목코드 규칙 추가 (품목명=품목코드) - DynamicItemForm으로 이동 |
| 2025-12-04 | FG 전용 시방서/인정서 파일업로드 추가 |