diff --git a/plans/react-mock-to-api-migration-plan.md b/plans/react-mock-to-api-migration-plan.md index e91ffe0..d5853fb 100644 --- a/plans/react-mock-to-api-migration-plan.md +++ b/plans/react-mock-to-api-migration-plan.md @@ -11,7 +11,7 @@ ### 1.1 현황 분석 -**목업 데이터 사용 페이지**: 66개 파일에서 목업 데이터 사용 중 +**목업 데이터 사용 페이지**: 80개+ 파일에서 목업 데이터 사용 중 ``` ┌─────────────────────────────────────────────────────────────────┐ @@ -19,10 +19,72 @@ ├─────────────────────────────────────────────────────────────────┤ │ - React 목업 데이터 → 실제 API 호출로 전환 │ │ - 단가관리(pricing-management) 패턴을 표준으로 적용 │ -│ - Phase 5~8 API 완료 기능 우선 연동 │ +│ - Phase A~B (API 완료 기능) 우선 연동 │ └─────────────────────────────────────────────────────────────────┘ ``` +### 1.4 2025-12-24 전수 조사 결과 요약 + +> MCP Serena를 활용한 Mock 데이터 사용 현황 전수 조사 결과 + +**🔍 발견된 주요 패턴:** +1. **리스트 API 연동 완료, 상세/CRUD Mock**: 리스트는 API 호출하지만 상세 조회, 등록, 수정, 삭제는 Mock +2. **actions.ts 존재하지만 미연동**: Server Actions 파일은 있으나 UI에서 호출하지 않음 (console.log 사용) +3. **MOCK_XXX 패턴**: 상수 배열로 Mock 데이터 정의 (예: `MOCK_POPUPS`, `mockEmployees`) +4. **generateMockData 함수**: 동적 Mock 데이터 생성 함수 사용 +5. **console.log CRUD**: 저장/삭제 시 console.log만 출력하고 실제 API 호출 없음 + +**📊 현황 요약:** + +| 분류 | 개수 | 상태 | +|------|------|------| +| 리스트 API 완료 | 12개 | Phase A-B | +| 상세 페이지 Mock | 10개+ | 연동 필요 | +| CRUD Mock (console.log) | 25개+ | 연동 필요 | +| 전체 Mock | 30개+ | Phase C-H | +| API 미존재 | 7개 | Phase I | + +**⚠️ 우선 연동 대상 (actions.ts 존재):** +- A-1 악성채권: `BadDebtDetail.tsx` → `actions.ts` 연동 *(다른 세션에서 진행)* +- A-2 팝업: `[id]/page.tsx`, `[id]/edit/page.tsx` → `actions.ts` 연동 +- B-1~B-6: 상세 페이지 및 CRUD → `actions.ts` 연동 + +### 1.5 작업 진행 정책 + +> **단위 작업 → 검수 → 승인 → 문서 업데이트 → 커밋** 순서로 진행 + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ 📋 작업 흐름 (페이지 단위) │ +├─────────────────────────────────────────────────────────────────┤ +│ 1️⃣ 작업 시작: 대상 페이지 Mock → API 연동 작업 │ +│ 2️⃣ 작업 완료: 코드 수정 완료 후 사용자에게 검수 요청 │ +│ 3️⃣ 검수: 사용자가 기능 확인 (브라우저 테스트) │ +│ 4️⃣ [승인] 문서 업데이트: 이 문서의 상태 갱신 │ +│ 5️⃣ [승인] 커밋: Git 커밋 생성 │ +│ 6️⃣ 다음 페이지로 이동 │ +└─────────────────────────────────────────────────────────────────┘ +``` + +**⚠️ 중요 규칙:** +- 각 단계에서 `[승인]` 표시된 작업은 **사용자 승인 후** 진행 +- 한 번에 하나의 페이지만 작업 (병렬 작업 금지) +- 검수 실패 시 수정 후 재검수 +- 커밋 메시지: `feat: [Phase]-[번호] [페이지명] Mock → API 연동` + +**📌 현재 진행 순서:** +1. ~~A-1 악성채권~~ *(완료 - 상세+CRUD+메모 API 연동)* +2. ~~A-2 팝업 관리~~ *(완료 - 상세+CRUD API 연동)* +3. A-3 결제 내역 (조회 전용, 완료) +4. A-4 구독 관리 (조회 전용, 완료) +5. A-5 알림 설정 (완료) +6. B-1 매출 관리 +7. B-2 매입 관리 +8. B-3 입금 관리 +9. B-4 출금 관리 +10. B-5 거래처 관리 +11. B-6 어음 관리 + ### 1.2 단가관리 연동 패턴 (표준 참조) ``` @@ -65,97 +127,135 @@ ListClient.tsx (클라이언트) ## 2. 우선순위별 연동 대상 +> **상태 범례**: +> - ✅ 완료: API 연동 완료 (Server Actions 호출) +> - 🔄 Mock: Mock 데이터 또는 console.log 사용 +> - ⚠️ API 필요: 백엔드 API 개발 선행 필요 +> - ⏭️ 건너뜀: API 미존재 또는 해당 없음 +> - 📦 actions.ts: Server Actions 파일 존재 (UI 연동 필요) + ### 2.1 Phase A: API 완료 기능 (즉시 연동 가능) > 이미 API가 구현되어 있어 React 연동만 필요 +> **⚠️ 2025-12-24 전수 조사 결과**: 리스트 API 연동 완료했으나 상세/CRUD 작업에서 Mock 사용 확인 -| # | 페이지 | React 경로 | API 엔드포인트 | 상태 | -|---|--------|-----------|---------------|------| -| A-1 | 악성채권 관리 | `/accounting/bad-debt-collection` | `GET/POST /v1/bad-debts` | ✅ 완료 | -| A-2 | 팝업 관리 | `/settings/popup-management` | `GET/POST /v1/popups` | ✅ 완료 | -| A-3 | 결제 내역 | `/settings/payment-history` | `GET /v1/payments` | ✅ 완료 | -| A-4 | 구독 관리 | `/settings/subscription` | `GET /v1/subscriptions` | ✅ 완료 | -| A-5 | 알림 설정 | `/settings/notifications` | `GET/PUT /v1/settings/notifications` | ✅ 완료 | -| A-6 | 거래처 원장 | `/accounting/vendor-ledger` | `GET /v1/vendor-ledger` | ⏭️ API 미존재 | +| # | 페이지 | React 경로 | 리스트 | 상세 조회 | 등록 | 수정 | 삭제 | 비고 | +|---|--------|-----------|--------|----------|------|------|------|------| +| A-1 | 악성채권 관리 | `/accounting/bad-debt-collection` | ✅ | ✅ | ✅ | ✅ | ✅ | 상세+CRUD+메모 API 연동 완료 (2025-12-24) | +| A-2 | 팝업 관리 | `/settings/popup-management` | ✅ | ✅ | ✅ | ✅ | ✅ | 상세+CRUD API 연동 완료 (2025-12-24) | +| A-3 | 결제 내역 | `/settings/payment-history` | ✅ | ⏭️ | ⏭️ | ⏭️ | ⏭️ | 조회 전용 | +| A-4 | 구독 관리 | `/settings/subscription` | ✅ | ⏭️ | ⏭️ | ⏭️ | ⏭️ | 조회 전용 | +| A-5 | 알림 설정 | `/settings/notifications` | ✅ | ⏭️ | ⏭️ | ✅ | ⏭️ | 저장 기능 완료 | +| A-6 | 거래처 원장 | `/accounting/vendor-ledger` | ⏭️ | ⏭️ | ⏭️ | ⏭️ | ⏭️ | API 미존재 | ### 2.2 Phase B: 핵심 업무 기능 -| # | 페이지 | React 경로 | API 엔드포인트 | 상태 | -|---|--------|-----------|---------------|------| -| B-1 | 매출 관리 | `/accounting/sales` | `GET/POST /v1/sales` | 🔄 Mock 사용중 (API 연동 필요) | -| B-2 | 매입 관리 | `/accounting/purchase` | `GET/POST /v1/purchases` | 🔄 Mock 사용중 (API 연동 필요) | -| B-3 | 입금 관리 | `/accounting/deposit` | `GET/POST /v1/deposits` | ✅ 완료 | -| B-4 | 출금 관리 | `/accounting/withdrawal` | `GET/POST /v1/withdrawals` | ✅ 완료 | -| B-5 | 거래처 관리 | `/accounting/vendor` | `GET/POST /v1/clients` | ✅ 완료 | -| B-6 | 어음 관리 | `/accounting/bills` | `GET/POST /v1/bills` | ✅ 완료 | +> **⚠️ 2025-12-24 전수 조사 결과**: actions.ts 존재하나 UI에서 console.log로 Mock 처리 + +| # | 페이지 | React 경로 | 리스트 | 상세 조회 | 등록 | 수정 | 삭제 | 비고 | +|---|--------|-----------|--------|----------|------|------|------|------| +| B-1 | 매출 관리 | `/accounting/sales` | ✅ | 🔄 Mock | 📦 | 📦 | 📦 | `index.tsx:179` console.log('삭제') | +| B-2 | 매입 관리 | `/accounting/purchase` | ✅ | 🔄 Mock | 📦 | 📦 | 📦 | `index.tsx:202` console.log('삭제') | +| B-3 | 입금 관리 | `/accounting/deposit` | ✅ | 🔄 Mock | 🔄 | 🔄 | 📦 | `DepositDetail.tsx:102,136` console.log | +| B-4 | 출금 관리 | `/accounting/withdrawal` | ✅ | 🔄 Mock | 🔄 | 🔄 | 📦 | `WithdrawalDetail.tsx:107,137` console.log | +| B-5 | 거래처 관리 | `/accounting/vendor` | ✅ | 🔄 Mock | 📦 | 📦 | 📦 | `VendorDetail.tsx:213,228` console.log | +| B-6 | 어음 관리 | `/accounting/bills` | ✅ | ⏭️ 모달 | 📦 | 📦 | 📦 | `index.tsx:203,427` console.log | ### 2.3 Phase C: 인사/근태 -| # | 페이지 | React 경로 | API 엔드포인트 | 상태 | -|---|--------|-----------|---------------|------| -| C-1 | 직원 관리 | `/hr/employees` | `GET/POST /v1/employees` | ⏳ 대기 | -| C-2 | 근태 관리 | `/hr/attendance` | `GET/POST /v1/attendances` | ⏳ 대기 | -| C-3 | 휴가 관리 | `/hr/vacation` | `GET/POST /v1/vacations` | ⏳ 대기 | -| C-4 | 부서 관리 | `/hr/departments` | `GET/POST /v1/departments` | ⏳ 대기 | +> **2025-12-24 분석 결과**: API 존재, 전체 Mock 사용 중 -### 2.4 Phase D: 게시판/고객센터 +| # | 페이지 | React 경로 | 리스트 | 상세 조회 | 등록 | 수정 | 삭제 | 비고 | +|---|--------|-----------|--------|----------|------|------|------|------| +| C-1 | 직원 관리 | `/hr/employee-management` | 🔄 Mock | 🔄 Mock | 🔄 | 🔄 | 🔄 | `new/page.tsx`, `[id]/page.tsx`, `[id]/edit/page.tsx` - console.log | +| C-2 | 근태 관리 | `/hr/attendance` | 🔄 Mock | ⏭️ | 🔄 | ⏭️ | ⏭️ | `index.tsx:286` console.log('Save attendance') | +| C-3 | 휴가 관리 | `/hr/vacation` | 🔄 Mock | ⏭️ | ⏭️ | ⏭️ | ⏭️ | `index.tsx:170` generateMockData | +| C-4 | 부서 관리 | `/hr/departments` | 🔄 Mock | ⏭️ | ⏭️ | ⏭️ | ⏭️ | `index.tsx:27-74` mockDepartments | -| # | 페이지 | React 경로 | API 엔드포인트 | 상태 | -|---|--------|-----------|---------------|------| -| D-1 | 게시판 목록 | `/board/list` | `GET /v1/boards` | 🔄 Mock 사용중 | -| D-2 | 게시판 관리 | `/settings/boards` | `GET/POST /v1/boards` | 🔄 Mock 사용중 | -| D-3 | 공지사항 | `/customer-center/notices` | `GET/POST /v1/posts` (board_id 필터) | 🔄 Mock 사용중 | -| D-4 | 이벤트 관리 | `/customer-center/events` | `GET/POST /v1/posts` (board_id 필터) | 🔄 Mock 사용중 | -| D-5 | 문의 관리 | `/customer-center/inquiries` | `GET/POST /v1/posts` (board_id 필터) | ⏳ 대기 | -| D-6 | FAQ 관리 | `/customer-center/faq` | `GET/POST /v1/posts` (board_id 필터) | ⏳ 대기 | +### 2.4 Phase D: 설정/시스템 관리 -### 2.5 Phase E: 설정/시스템 관리 +> **2025-12-24 분석 결과**: 대부분 Mock, console.log로 저장 처리 -| # | 페이지 | React 경로 | API 엔드포인트 | 상태 | -|---|--------|-----------|---------------|------| -| E-1 | 회사 정보 관리 | `/settings/company-info` | `GET/PUT /v1/companies` | 🔄 Mock 사용중 | -| E-2 | 계정 관리 | `/settings/accounts` | `GET/POST /v1/accounts` | 🔄 Mock 사용중 | +| # | 페이지 | React 경로 | 리스트 | 상세 조회 | 등록 | 수정 | 삭제 | 비고 | +|---|--------|-----------|--------|----------|------|------|------|------| +| D-1 | 회사 정보 관리 | `/settings/company-info` | 🔄 Mock | ⏭️ | ⏭️ | 🔄 | ⏭️ | `index.tsx:123` console.log('저장') | +| D-2 | 계정 관리 | `/settings/accounts` | 🔄 Mock | 🔄 Mock | 🔄 | 🔄 | 🔄 | `AccountDetail.tsx:94` console.log('Delete') | +| D-3 | 근무 일정 관리 | `/settings/work-schedule` | 🔄 Mock | ⏭️ | ⏭️ | 🔄 | ⏭️ | `index.tsx:101` console.log('저장') | +| D-4 | 근태 설정 관리 | `/settings/attendance-settings` | 🔄 Mock | ⏭️ | ⏭️ | 🔄 | ⏭️ | `index.tsx:89` console.log('저장') | +| D-5 | 휴가 정책 관리 | `/settings/leave-policy` | 🔄 Mock | ⏭️ | ⏭️ | 🔄 | ⏭️ | `index.tsx:48` console.log('저장') | -### 2.6 Phase F: 인사/급여 (API 연동 가능) +### 2.5 Phase E: 인사/급여 -| # | 페이지 | React 경로 | API 엔드포인트 | 상태 | -|---|--------|-----------|---------------|------| -| F-1 | 법인카드 관리 | `/hr/card-management` | `GET/POST /v1/cards` | 🔄 Mock 사용중 | -| F-2 | 급여 관리 | `/hr/salary` | `GET/POST /v1/payrolls` | 🔄 Mock 사용중 | -| F-3 | 휴가 관리 | `/hr/vacation` | `GET/POST /v1/leaves` | 🔄 Mock 사용중 | +> **2025-12-24 분석 결과**: 전체 Mock, CRUD 모두 console.log -### 2.7 Phase G: 결재 시스템 (API 연동 가능) +| # | 페이지 | React 경로 | 리스트 | 상세 조회 | 등록 | 수정 | 삭제 | 비고 | +|---|--------|-----------|--------|----------|------|------|------|------| +| E-1 | 법인카드 관리 | `/hr/card-management` | 🔄 Mock | 🔄 Mock | 🔄 | 🔄 | 🔄 | `new/[id]/page.tsx` - console.log | +| E-2 | 급여 관리 | `/hr/salary` | 🔄 Mock | ⏭️ | ⏭️ | ⏭️ | ⏭️ | `index.tsx:89,158` mockData | -| # | 페이지 | React 경로 | API 엔드포인트 | 상태 | -|---|--------|-----------|---------------|------| -| G-1 | 기안함 | `/approval/draft-box` | `GET/POST /v1/approvals` | 🔄 Mock 사용중 | -| G-2 | 참조함 | `/approval/reference-box` | `GET /v1/approvals` (필터) | 🔄 Mock 사용중 | -| G-3 | 결재함 | `/approval/approval-box` | `GET /v1/approvals` (필터) | 🔄 Mock 사용중 | -| G-4 | 비용견적서 양식 | `/approval/create/expense-estimate` | `GET/POST /v1/estimates` | 🔄 Mock 사용중 | +### 2.6 Phase F: 결재 시스템 -### 2.8 Phase H: API 신규 개발 필요 (후순위) +> **2025-12-24 분석 결과**: 전체 Mock, 삭제 console.log + +| # | 페이지 | React 경로 | 리스트 | 상세 조회 | 등록 | 수정 | 삭제 | 비고 | +|---|--------|-----------|--------|----------|------|------|------|------| +| F-1 | 기안함 | `/approval/draft-box` | 🔄 Mock | ⏭️ | ⏭️ | ⏭️ | 🔄 | `index.tsx:183,383,433` console.log('삭제') | +| F-2 | 참조함 | `/approval/reference-box` | 🔄 Mock | ⏭️ | ⏭️ | ⏭️ | ⏭️ | `index.tsx:115` mockData | +| F-3 | 결재함 | `/approval/approval-box` | 🔄 Mock | ⏭️ | ⏭️ | ⏭️ | ⏭️ | `index.tsx:123` mockData | +| F-4 | 비용견적서 양식 | `/approval/create/expense-estimate` | ⏭️ | ⏭️ | 🔄 | ⏭️ | ⏭️ | `ExpenseEstimateForm.tsx:20` mockData | + +### 2.7 Phase G: 생산 관리 + +> **2025-12-24 분석 결과**: 전체 Mock (mockData.ts 파일 사용) + +| # | 페이지 | React 경로 | 리스트 | 상세 조회 | 등록 | 수정 | 삭제 | 비고 | +|---|--------|-----------|--------|----------|------|------|------|------| +| G-1 | 작업지시 관리 | `/production/work-orders` | 🔄 Mock | 🔄 Mock | 🔄 | 🔄 | 🔄 | `mockData.ts` 전체 사용 | +| G-2 | 작업실적 관리 | `/production/work-results` | 🔄 Mock | ⏭️ | 🔄 | 🔄 | ⏭️ | `mockData.ts` 전체 사용 | +| G-3 | 생산 대시보드 | `/production/dashboard` | 🔄 Mock | ⏭️ | ⏭️ | ⏭️ | ⏭️ | `mockData.ts` 전체 사용 | +| G-4 | 작업자 화면 | `/production/worker-screen` | 🔄 Mock | ⏭️ | ⏭️ | ⏭️ | ⏭️ | 전체 Mock | +| G-5 | 품질 검사 | `/quality/inspection` | 🔄 Mock | 🔄 Mock | 🔄 | 🔄 | 🔄 | `mockData.ts` 전체 사용 | + +### 2.8 Phase H: 자재/출하 관리 + +> **2025-12-24 분석 결과**: 전체 Mock (mockData.ts 파일 사용) + +| # | 페이지 | React 경로 | 리스트 | 상세 조회 | 등록 | 수정 | 삭제 | 비고 | +|---|--------|-----------|--------|----------|------|------|------|------| +| H-1 | 입고 관리 | `/material/receiving` | 🔄 Mock | 🔄 Mock | 🔄 | 🔄 | 🔄 | `mockData.ts` 전체 사용 | +| H-2 | 재고 현황 | `/material/stock-status` | 🔄 Mock | 🔄 Mock | ⏭️ | ⏭️ | ⏭️ | `mockData.ts`, `StockStatusDetail.tsx:38` | +| H-3 | 출하 관리 | `/outbound/shipment` | 🔄 Mock | 🔄 Mock | 🔄 | 🔄 | 🔄 | `mockData.ts`, `ShipmentDetail.tsx:48` | + +### 2.9 Phase I: API 신규 개발 필요 (후순위) > 현재 API가 존재하지 않아 백엔드 개발 선행 필요 | # | 페이지 | React 경로 | 필요 API | 상태 | |---|--------|-----------|---------|------| -| H-1 | 미지급비용 관리 | `/accounting/expected-expense` | `GET/POST /v1/expected-expenses` | ⚠️ API 개발 필요 | -| H-2 | 거래처 원장 | `/accounting/vendor-ledger` | `GET /v1/vendor-ledger` | ⚠️ API 개발 필요 | -| H-3 | 카드 거래 조회 | `/accounting/card-transaction` | `GET /v1/card-transactions` | ⚠️ API 개발 필요 | -| H-4 | 은행 거래 조회 | `/accounting/bank-transaction` | `GET /v1/bank-transactions` | ⚠️ API 개발 필요 | -| H-5 | 채권 현황 | `/accounting/receivables-status` | `GET /v1/receivables` | ⚠️ API 개발 필요 | -| H-6 | 일일 보고서 | `/accounting/daily-report` | `GET /v1/daily-reports` | ⚠️ API 개발 필요 | -| H-7 | 출하 관리 상세 | `/outbound/shipment/[id]` | `GET/PUT /v1/shipments/:id` | ⚠️ API 개발 필요 | -| H-8 | 재고 현황 상세 | `/material/stock-status/[id]` | `GET /v1/stock/:id` | ⚠️ API 개발 필요 | +| I-1 | 미지급비용 관리 | `/accounting/expected-expense` | `GET/POST /v1/expected-expenses` | ⚠️ API 개발 필요 | +| I-2 | 거래처 원장 | `/accounting/vendor-ledger` | `GET /v1/vendor-ledger` | ⚠️ API 개발 필요 | +| I-3 | 카드 거래 조회 | `/accounting/card-transaction` | `GET /v1/card-transactions` | ⚠️ API 개발 필요 | +| I-4 | 은행 거래 조회 | `/accounting/bank-transaction` | `GET /v1/bank-transactions` | ⚠️ API 개발 필요 | +| I-5 | 채권 현황 | `/accounting/receivables-status` | `GET /v1/receivables` | ⚠️ API 개발 필요 | +| I-6 | 일일 보고서 | `/accounting/daily-report` | `GET /v1/daily-reports` | ⚠️ API 개발 필요 | +| I-7 | 종합 분석 보고서 | `/reports/comprehensive-analysis` | `GET /v1/reports/comprehensive` | ⚠️ API 개발 필요 | -### 2.9 상세 페이지 (부모 기능 연동 후 처리) +### 2.10 상세 페이지 Mock 현황 -| # | 페이지 | 부모 기능 | 상태 | -|---|--------|----------|------| -| S-1 | VendorDetail | B-5 거래처 관리 | ⏳ B-5 완료 후 | -| S-2 | BadDebtDetail | A-1 악성채권 관리 | ⏳ A-1 완료 후 | -| S-3 | PurchaseDetail | B-2 매입 관리 | ⏳ B-2 완료 후 | -| S-4 | VendorLedgerDetail | H-2 거래처 원장 | ⏳ H-2 완료 후 | +> 리스트 페이지 API 연동 완료 후 상세 페이지 연동 필요 + +| # | 컴포넌트 | 파일 위치 | Mock 사용 라인 | 부모 기능 | +|---|----------|----------|---------------|----------| +| S-1 | SalesDetail | `SalesManagement/SalesDetail.tsx` | L56-63 (MOCK_VENDORS), L77-110 (fetchSalesDetail) | B-1 매출 관리 | +| S-2 | PurchaseDetail | `PurchaseManagement/PurchaseDetail.tsx` | L49-56 (Mock 계좌/거래처), L65-126 (Mock 데이터) | B-2 매입 관리 | +| S-3 | DepositDetail | `DepositManagement/DepositDetail.tsx` | L52 (Mock 데이터 로드) | B-3 입금 관리 | +| S-4 | WithdrawalDetail | `WithdrawalManagement/WithdrawalDetail.tsx` | L59 (Mock 데이터 로드) | B-4 출금 관리 | +| S-5 | VendorDetail | `VendorManagement/VendorDetail.tsx` | L61 (Mock 데이터 가져오기) | B-5 거래처 관리 | +| S-6 | BadDebtDetail | `BadDebtCollection/BadDebtDetail.tsx` | L49-57 (Mock 담당자/데이터) | A-1 악성채권 관리 | +| S-7 | StockStatusDetail | `StockStatus/StockStatusDetail.tsx` | L38 (Mock 상세 정보) | H-2 재고 현황 | +| S-8 | ShipmentDetail | `ShipmentManagement/ShipmentDetail.tsx` | L48 (Mock 데이터) | H-3 출하 관리 | +| S-9 | ReceivingDetail | `ReceivingManagement/ReceivingDetail.tsx` | Mock 전체 | H-1 입고 관리 | +| S-10 | WorkOrderDetail | `WorkOrders/WorkOrderDetail.tsx` | Mock 전체 | G-1 작업지시 관리 | --- @@ -865,6 +965,11 @@ export function transformFrontendToApi(data: Record): Record