sam-react-prod/CURRENT_WORKS.md

# SAM React 작업 현황

## 2025-01-09 (목) - 작업지시 process_type → process_id FK 변환

### 작업 목표
- 작업지시의 `process_type` (varchar enum: 'screen'/'slat'/'bending')를 `process_id` (FK → processes.id)로 변환
- API와 Frontend 전체 스택 마이그레이션

### 수정된 파일
| 파일명 | 설명 |
|--------|------|
| `src/components/production/WorkOrders/types.ts` | processId, processName, processCode 필드 추가, transformApiToFrontend에서 processType 하위 호환 유지 |
| `src/components/production/WorkOrders/actions.ts` | getProcessOptions() 추가, createWorkOrder에서 processId 사용 |
| `src/components/production/WorkOrders/WorkOrderCreate.tsx` | processType enum → processId FK 변경, 동적 공정 옵션 로딩 |
| `src/components/production/WorkOrders/WorkOrderList.tsx` | PROCESS_TYPE_LABELS 제거, order.processName 사용 |
| `src/components/production/WorkOrders/WorkOrderDetail.tsx` | PROCESS_TYPE_LABELS 제거, order.processName 사용 (비즈니스 로직은 processType 유지) |

### 주요 변경 내용

#### 1. types.ts - 타입 및 변환 함수
- `WorkOrder` 인터페이스에 `processId`, `processName`, `processCode` 추가
- `processType`은 `@deprecated` 마킹, 하위 호환용 유지
- `transformApiToFrontend`에서 `processName` → `processType` 자동 매핑

#### 2. actions.ts - 서버 액션
- `getProcessOptions()`: 공정 목록 API 조회 (GET /api/v1/processes)
- `createWorkOrder()`: `processId` 필드 사용 (기존 processType 제거)

#### 3. WorkOrderCreate.tsx - 등록 폼
- `processType: ProcessType` → `processId: number | null`
- `useEffect`로 공정 옵션 동적 로딩
- 첫 번째 공정 자동 선택 (기본값)
- Select 컴포넌트 동적 옵션 렌더링

#### 4. WorkOrderList.tsx / WorkOrderDetail.tsx - 목록/상세
- `PROCESS_TYPE_LABELS[order.processType]` → `order.processName`
- 비즈니스 로직(ProcessSteps, 절곡 확인)은 `processType` 유지

### 빌드 검증
✅ Next.js 빌드 성공 (TypeScript 오류 없음)

### 관련 API 변경 (api 저장소)
- `WorkOrder` 모델: `process_id` FK 추가, `process()` 관계 정의
- `WorkOrderService`: `process_id` 사용
- `WorkOrderStoreRequest/UpdateRequest`: `process_id` 검증 규칙

---

## 2025-01-09 (목) - 작업지시 코드 리뷰 기반 프론트엔드 개선

### 작업 목표
- 작업지시 기능 코드 리뷰 결과 기반 프론트엔드 개선
- Critical, High, Medium 우선순위 항목 전체 수정

### 수정된 파일
| 파일명 | 설명 |
|--------|------|
| `src/components/production/WorkOrders/WorkOrderList.tsx` | useCallback 의존성 순환 수정 |
| `src/components/production/WorkOrders/WorkOrderDetail.tsx` | 작업 버튼 핸들러 구현 |
| `src/components/production/WorkOrders/types.ts` | scheduledDate 매핑, 다중 담당자 타입 추가 |
| `src/components/production/WorkOrders/actions.ts` | API 경로 수정 (/sales-orders → /orders) |
| `src/components/production/WorkOrders/SalesOrderSelectModal.tsx` | debounce 적용 |
| `src/components/production/WorkOrders/hooks/useDebounce.ts` | 신규 생성 - 커스텀 debounce 훅 |

### 주요 변경 내용
1. **useCallback 의존성 수정**: 무한 루프 방지를 위한 의존성 배열 수정
2. **scheduledDate 매핑**: transformFrontendToApi에 scheduled_date 필드 추가
3. **작업 버튼 구현**: "시작"/"완료" 버튼 핸들러 추가
4. **API 경로 수정**: `/api/v1/sales-orders` → `/api/v1/orders` 변경
5. **debounce 적용**: 커스텀 useDebounce 훅 (300ms) 적용
6. **다중 담당자 타입**: WorkOrderAssigneeApi 인터페이스 및 assignees 필드 추가

### Git 커밋
- `12b4259 refactor(work-orders): 코드 리뷰 기반 프론트엔드 개선`

### 관련 문서
- 계획: `~/.claude/plans/purring-sparking-pinwheel.md`

---

## 2026-01-02 (목) - 견적 등록 자동산출 기능 구현

### 작업 목표
- 견적 등록 화면에서 BOM 기반 자동산출 기능 구현
- MNG 시뮬레이터와 동일하게 동작하도록 API 연동

### 수정된 파일
| 파일명 | 설명 |
|--------|------|
| `src/components/quotes/QuoteRegistration.tsx` | FormField type="custom" 추가, API 요청 구조 변경, 응답 파싱 수정 |
| `src/components/quotes/actions.ts` | Item 모델 필드 매핑 수정, BomCalculateItem 인터페이스 변경 |

### 주요 변경 내용
1. **FormField 렌더링 수정**:
   - Input 자식 컴포넌트도 `type="custom"` 필요
   - openWidth, openHeight 필드에 적용

2. **API 필드 매핑 수정** (actions.ts):
   - `item.item_code` → `item.code` (Laravel Item 모델 필드명)
   - `item.item_name` → `item.name`

3. **API 요청 구조 변경** (QuoteRegistration.tsx):
   - 중첩 구조 제거: `{ input_variables: { W0, H0 } }` → `{ openWidth, openHeight }`
   - flat 구조로 API FormRequest와 일치

4. **API Enum 값 변경**:
   - 가이드레일: "벽면형" → "wall", "측면형" → "floor"
   - 모터전원: "220V" → "single", "380V" → "three"
   - 제어기: "단독" → "basic", "연동" → "smart"

5. **API 응답 파싱 수정**:
   - `result.data.items` 배열 접근
   - `result.data.summary.grand_total` 총합계 접근

### Git 커밋
- `5a3e534` feat(WEB): 견적 등록 자동산출 기능 구현
- `5f062d5` chore(WEB): 견적 등록 디버깅 로그 제거

### 관련 API
- `POST /api/v1/quotes/calculate/bom/bulk` - 다건 BOM 자동산출 API

---

## 2026-01-02 (목) - 채권현황 동적월 지원 및 버그 수정

### 작업 목표
- "최근 1년" 필터 선택 시 동적 월 기간(최근 12개월) 지원
- year=0 파라미터 처리 버그 수정
- 거래처별 연체 상태 및 메모 관리 기능 추가

### 수정된 파일
| 파일명 | 설명 |
|--------|------|
| `src/components/accounting/ReceivablesStatus/types.ts` | MonthlyAmount 동적 배열로 변경, 새 필드 추가 |
| `src/components/accounting/ReceivablesStatus/actions.ts` | year=0 처리 버그 수정, updateMemos 액션 추가 |
| `src/components/accounting/ReceivablesStatus/index.tsx` | 동적 월 헤더 및 메모 입력 행 추가 |

### 주요 변경 내용
1. **types.ts 변경**:
   - `MonthlyAmount`: 고정 월 키 → `values: number[]` 동적 배열
   - `VendorReceivables`: `monthLabels`, `carryForwardBalance`, `memo` 필드 추가
   - 정적 `MONTH_LABELS`, `MONTH_KEYS` 상수 제거

2. **actions.ts 버그 수정**:
   - `typeof yearValue === 'number'` 명시적 타입 체크 추가
   - `year=0`일 때 `recent_year=true` 파라미터 올바르게 전송
   - `updateMemos` 액션 추가

3. **index.tsx UI 개선**:
   - API에서 받은 `monthLabels` 사용하여 동적 헤더 렌더링
   - 메모 입력 행 추가 (거래처 단위)
   - 연체/메모 변경사항 추적 및 저장

### Git 커밋
- `672b1b4` feat(WEB): 채권현황 동적월 지원 및 year=0 파라미터 버그 수정

### 남은 작업
- [ ] 디버깅 console.log 제거 (테스트 완료 후)
- [ ] 추가 UI 개선사항 확인

---

## 2025-12-28 (토) - 고객센터 시스템 게시판 API 연동 수정

### 작업 목표
- 고객센터 컴포넌트에서 시스템 게시판 API 엔드포인트 사용
- 날짜 범위 필터 초기값 수정 (전체 조회)

### 수정된 파일 (4개)

| 파일명 | 변경 내용 |
|--------|----------|
| `src/components/customer-center/shared/actions.ts` | `/boards/` → `/system-boards/` API 엔드포인트 변경 |
| `src/components/customer-center/EventManagement/EventList.tsx` | 날짜 범위 초기값 빈 문자열로 변경 (전체 조회) |
| `src/components/customer-center/InquiryManagement/InquiryList.tsx` | 날짜 범위 초기값 빈 문자열로 변경 (전체 조회) |
| `src/components/customer-center/NoticeManagement/NoticeList.tsx` | 날짜 범위 초기값 빈 문자열로 변경 (전체 조회) |

### 상세 변경사항

#### 1. shared/actions.ts API 엔드포인트 변경
```typescript
// 변경 전
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/boards/${boardCode}/posts`;

// 변경 후
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/system-boards/${boardCode}/posts`;
```

영향받는 함수:
- `getPosts()` - 게시글 목록 조회
- `getPost()` - 게시글 상세 조회
- `createPost()` - 게시글 생성
- `updatePost()` - 게시글 수정
- `deletePost()` - 게시글 삭제

#### 2. 날짜 범위 필터 초기값 변경
```typescript
// 변경 전
const [startDate, setStartDate] = useState(format(new Date(), 'yyyy-MM-dd'));
const [endDate, setEndDate] = useState(format(new Date(), 'yyyy-MM-dd'));

// 변경 후
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
```

- 초기 로드 시 모든 데이터 조회 가능
- 날짜 필터 미선택 시 전체 기간 조회

### 연관 API 수정 (api 저장소)
- `PostService.php` - 시스템 게시판 tenant_id 처리 개선
- custom_fields field_key → field_id 매핑 지원
- 댓글 생성 시 tenant_id 추가

---

## 2025-12-27 (금) - 결재 문서 작성 버그 수정

### 수정된 파일 (2개)

| 파일명 | 변경 내용 |
|--------|----------|
| `src/components/approval/DocumentCreate/actions.ts` | transformApiToFormData에서 `form.code` 처리 추가 |
| `src/components/approval/DocumentCreate/index.tsx` | useRef로 toast 중복 호출 방지 |

### 완료된 수정

#### 1. 복제 모드 documentType 매핑 오류 수정
- **문제**: 복제로 들어왔을 때 문서유형이 선택되지 않아 추가 폼이 안 보임
- **원인**: API는 `form.code`로 반환하는데 프론트엔드는 `form_code`를 기대
- **수정파일**: `src/components/approval/DocumentCreate/actions.ts`
- **수정내용**: `transformApiToFormData`에서 `apiData.form?.code || apiData.form_code` 처리

#### 2. 복제 모드 toast 중복 호출 수정
- **문제**: "문서가 복제되었습니다" 메시지가 두 번 표시됨
- **원인**: React.StrictMode에서 useEffect 두 번 실행
- **수정파일**: `src/components/approval/DocumentCreate/index.tsx`
- **수정내용**: `useRef`로 toast 호출 중복 방지

### 미해결 React Todo 🚧

#### TODO-1: 결재선/참조 Select 변경 불가 문제
- **증상**: 한번 결재자/참조자를 선택하면 다른 사람으로 변경 불가
- **원인 후보**:
  1. `SelectTrigger` 내부 조건부 렌더링(`span` vs `SelectValue`)이 Radix Select 상태 관리에 영향
  2. `employees` 배열에 선택된 person이 없어서 Select value가 유효하지 않음
- **해결 방향**:
  - A. `employees` 배열에 현재 선택된 사람들 포함 (useMemo)
  - B. `SelectTrigger` 내부를 항상 `SelectValue`만 렌더링하고 표시 내용만 변경
  - C. Shadcn/ui Select 컴포넌트 디버깅 필요
- **파일**: `ApprovalLineSection.tsx`, `ReferenceSection.tsx`

---

## 2025-12-26 (목) - 급여관리 직책/직급 매핑 수정

### 문제
- 급여관리 페이지에서 직책과 직급이 사원관리와 다르게 표시됨
- `position_label` → 직책으로 잘못 매핑 (실제로는 직위)
- `job_title_label` → 직급으로 잘못 매핑 (실제로는 직책)

### 수정된 파일 (1개)

| 파일명 | 변경 내용 |
|--------|----------|
| `src/components/hr/SalaryManagement/actions.ts` | 직책/직급 매핑 수정 |

### 상세 변경사항
- `transformApiToFrontend` (목록용):
  - `position: profile?.position_label` → `profile?.job_title_label` (직책)
  - `rank: profile?.job_title_label` → `profile?.rank` (직급)
- `transformApiToDetail` (상세용):
  - 동일하게 수정

### 매핑 기준 (사원관리 기준 통일)
| 필드 | API 필드 | 설명 | 예시 |
|------|----------|------|------|
| 직책 (position) | `job_title_label` | 직무상 책임 | 팀장, 팀원 |
| 직급 (rank) | `rank` | 호봉 등급 | 부장, 과장, 대리 |

---

## 2025-12-26 (목) - 휴가관리 사용현황 동기화 수정

### 작업 목표
- 휴가 승인 후 사용현황 즉시 반영
- 부여일수 계산 수정 (기본 15일 + 부여분)

### 수정된 파일 (1개)

| 파일명 | 변경 내용 |
|--------|----------|
| `src/components/hr/VacationManagement/index.tsx` | 승인 후 `fetchUsageData()` 호출 추가, baseVacation 고정 '15일', grantedVacation 계산식 수정 |

### 상세 변경사항
- `handleApproveConfirm`: 승인 후 `fetchUsageData()` 호출 추가
- `baseVacation`: 동적 `${totalDays}일` → 고정 `'15일'`
- `grantedVacation`: 하드코딩 `'0일'` → `Math.max(0, totalDays - 15)일`
- `useCallback` dependencies에 `fetchUsageData` 추가

### Git 커밋
```
909005c fix(vacation): 휴가 사용현황 동기화 및 부여일수 계산 수정
```

---

## 2025-12-23 (월) - React Mock Data to API 마이그레이션 Phase B

### 프로젝트 개요
React 컴포넌트에서 Mock 데이터를 실제 API 호출로 교체하는 작업

**참고 문서:** `docs/plans/react-mock-to-api-migration-plan.md`

### 진행 상황

#### Phase A (완료 - 이전 세션)
- [x] A-1 악성채권 관리 API 연동
- [x] A-2 거래처 관리 API 연동
- [x] A-3 어음 관리 API 연동
- [x] A-4 대출 관리 API 연동
- [x] A-5 알림 설정 API 연동
- [x] A-6 거래처 원장 (API 미존재로 스킵)

#### Phase B (진행 중)
- [x] B-1 매출관리 (SalesManagement) API 연동 ✅
- [x] B-2 매입관리 (PurchaseManagement) API 연동 ✅
- [x] B-2.1 매입 세금계산서 토글 기능 수정 ✅
- [ ] B-3 세금계산서 API 연동
- [ ] B-4 입금관리 API 연동
- [ ] B-5 출금관리 API 연동
- [ ] B-6 미수금현황 API 연동

---

### B-1 매출관리 API 연동 (완료)

#### 수정된 파일
- `src/components/accounting/SalesManagement/types.ts`
  - API 응답 타입 추가 (ApiSaleData, ApiSalesListResponse 등)
  - transformApiSaleToRecord() 변환 함수 추가
  - formatDate() 날짜 포맷 함수 추가

- `src/components/accounting/SalesManagement/index.tsx`
  - generateMockData() 제거
  - fetchSales(), deleteSale() API 함수 추가
  - useEffect로 API 데이터 로딩
  - 삭제 핸들러 API 연동

#### 테스트 결과
- API 연동 성공 (80개 레코드)
- 페이지네이션 정상 동작 (4페이지)
- 통계 카드 정상 표시 (총 매출: 679,876,062원)
- 날짜 포맷 정상 (YYYY-MM-DD)

---

### B-2 매입관리 API 연동 (완료)

#### 수정된 파일
- `src/components/accounting/PurchaseManagement/types.ts`
  - API 응답 타입 추가 (ApiPurchaseData, ApiPurchasesListResponse 등)
  - transformApiPurchaseToRecord() 변환 함수 추가
  - formatDate() 날짜 포맷 함수 추가

- `src/components/accounting/PurchaseManagement/index.tsx`
  - generateMockData() 제거
  - fetchPurchases(), deletePurchase() API 함수 추가
  - useEffect로 API 데이터 로딩
  - 삭제 핸들러 API 연동
  - toast 알림 추가

#### 테스트 결과
- API 연동 성공 (70개 레코드)
- 페이지네이션 정상 동작 (4페이지)
- 통계 카드 정상 표시:
  - 총 매입: 577,881,642원
  - 당월 매입: 164,988,080원
  - 매입유형 미설정: 20건
  - 세금계산서 수취 미확인: 8건
- 날짜 포맷 정상 (YYYY-MM-DD)

---

### B-2.1 매입 세금계산서 토글 기능 수정 (2025-12-24)

#### 문제
- 매입 관리 페이지에서 세금계산서 수취 토글이 작동하지 않음
- 원인 1: API 마이그레이션 미실행 (tax_invoice_received 컬럼 미존재)
- 원인 2: index.tsx에서 Mock 데이터 사용 중 (API 미연동)

#### 수정된 파일
- `src/components/accounting/PurchaseManagement/index.tsx`
  - Mock 데이터(generateMockData) → API 데이터로 전환
  - useEffect 추가로 API 데이터 로딩
  - isLoading 상태 추가
  - vendorOptions에서 빈 문자열 필터링 (Select.Item 에러 수정)
  - format import 제거 (미사용)
  - PurchaseType import 제거 (미사용)

- `src/components/accounting/PurchaseManagement/actions.ts` (신규)
  - getPurchases(): 매입 목록 조회 서버 액션
  - togglePurchaseTaxInvoice(): 세금계산서 수취 토글 서버 액션
  - API 응답 변환 함수 포함

#### API 변경사항 (api 저장소)
- 마이그레이션 실행: `2025_12_24_160000_add_tax_invoice_received_to_purchases_table`
- Purchase 모델: tax_invoice_received 필드 추가
- PurchaseService: toggleTaxInvoice() 메서드 추가

#### 버그 수정
- **Console Error**: `A <Select.Item /> must have a value prop that is not an empty string`
  - 원인: API 응답에 vendorName이 빈 문자열인 매입 레코드 존재
  - 해결: vendorOptions 생성 시 빈 문자열 필터링 추가
  ```typescript
  const uniqueVendors = [...new Set(data.map(d => d.vendorName).filter(v => v && v.trim() !== ''))];
  ```

#### 테스트 결과
- 세금계산서 수취 토글 정상 동작 ✅
- API 호출 및 UI 업데이트 정상 ✅
- Console 에러 해결 ✅

---

### API 연동 패턴 (공통)

```typescript
// 1. types.ts에 API 타입 추가
export interface ApiXxxData {
  id: number;
  // snake_case 필드들
}

export interface ApiXxxListResponse {
  success: boolean;
  message: string;
  data: {
    data: ApiXxxData[];
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
  };
}

// 2. 변환 함수 추가
export function transformApiXxxToRecord(apiData: ApiXxxData): XxxRecord {
  // snake_case → camelCase 변환
  // 날짜 포맷 변환
  // 상태 매핑
}

// 3. index.tsx에서 API 함수 추가
async function fetchXxx(params): Promise<ApiXxxListResponse> {
  const url = `/api/proxy/xxx?${searchParams.toString()}`;
  const response = await fetch(url);
  return response.json();
}

// 4. useEffect로 데이터 로딩
useEffect(() => {
  loadData();
}, [loadData]);
```

---

### 다음 작업
- B-3 세금계산서 API 연동
- B-4 ~ B-6 회계관리 나머지 컴포넌트

---