From 5b8eceef36bf48fc740cd2382f44c5810098d6f0 Mon Sep 17 00:00:00 2001 From: kent Date: Fri, 26 Dec 2025 17:28:29 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=EC=A0=84=EC=88=98=20=EC=A1=B0=EC=82=AC?= =?UTF-8?q?=20=EA=B2=B0=EA=B3=BC=20=EC=84=B9=EC=85=98=20=ED=86=B5=ED=95=A9?= =?UTF-8?q?=20(12-24=20=E2=86=92=2012-26)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 1.4 섹션 (2025-12-24 전수 조사 결과 요약) 삭제 - 1.6 섹션 (2025-12-26 전수 조사 결과)을 1.4로 이동 - 중복 내용 제거 및 최신 상태만 유지 - 섹션 번호 재조정 (1.7 → 1.6, 1.8 → 1.7) - mockData.ts 삭제 대상에 H-1~H-3 연동 완료 표시 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- plans/react-mock-to-api-migration-plan.md | 247 ++++++++++++++++++++-- 1 file changed, 226 insertions(+), 21 deletions(-) diff --git a/plans/react-mock-to-api-migration-plan.md b/plans/react-mock-to-api-migration-plan.md index 52222ce..ad2c065 100644 --- a/plans/react-mock-to-api-migration-plan.md +++ b/plans/react-mock-to-api-migration-plan.md @@ -23,36 +23,139 @@ └─────────────────────────────────────────────────────────────────┘ ``` -### 1.4 2025-12-24 전수 조사 결과 요약 +### 1.4 전수 조사 결과 (2025-12-26 최신) -> MCP Serena를 활용한 Mock 데이터 사용 현황 전수 조사 결과 +> MCP Serena를 활용한 React 전체 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 호출 없음 +#### 🔍 발견된 주요 패턴 -**📊 현황 요약:** +| 문제 유형 | 파일 수 | 설명 | +|----------|---------|------| +| **mockData.ts 파일** | 8개 | 별도 Mock 데이터 파일 (삭제 필요) | +| **MOCK_* 상수** | 15개+ | 인라인 Mock 상수 | +| **console.log CRUD** | 40개+ | API 대신 console.log 출력 | +| **TODO 주석** | 30개+ | 미구현 기능 | -| 분류 | 개수 | 상태 | -|------|------|------| -| 리스트 API 완료 | 12개 | Phase A-B | -| 상세 페이지 Mock | 10개+ | 연동 필요 | -| CRUD Mock (console.log) | 25개+ | 연동 필요 | -| 전체 Mock | 30개+ | Phase C-H | -| API 미존재 | 7개 | Phase I | +#### 🚨 "완료" 표시됐지만 잔여 작업 있는 Phase -**⚠️ 우선 연동 대상 (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` 연동 +| Phase | 항목 | 발견된 문제 | +|-------|------|------------| +| B-2 | 매입 관리 | **MOCK_ACCOUNTS, MOCK_VENDORS** 사용 (PurchaseDetailModal) | +| C-1 | 직원 관리 | `TODO: 파일 업로드`, `console.log('Invite user')` | +| D-4 | 근태 설정 | **MOCK_DEPARTMENTS** 사용 | +| F-1~4 | 결재 시스템 | **MOCK_EMPLOYEES** 사용 (결재선/참조자 선택) | + +#### 📋 문서에 누락된 모듈 (Phase J~L로 추가됨) + +| 카테고리 | 경로 | Mock 사용 현황 | +|----------|------|---------------| +| **게시판** | `/board/*` | MOCK_BOARDS, MOCK_DEPARTMENTS | +| **FAQ** | `/customer-center/faq` | MOCK_FAQS 전체 사용 | +| **이벤트** | `/customer-center/events` | MOCK_EVENTS 전체 사용 | +| **문의** | `/customer-center/inquiries` | MOCK_INQUIRIES, MOCK_REPLY, MOCK_COMMENTS | +| **공지사항** | `/customer-center/notices` | MOCK_NOTICES 전체 사용 | +| **공정관리** | `/master-data/process-management` | TODO + console.log | +| **견적** | `/sales/quote-management` | TODO (writer, 발주처 데이터) | + +#### 📁 mockData.ts 삭제 대상 + +``` +react/src/components/ +├── production/ProductionDashboard/mockData.ts ← G-3 +├── production/WorkOrders/mockData.ts ← G-1 (부분 사용) +├── production/WorkResults/mockData.ts ← G-2 (부분 사용) +├── quality/InspectionManagement/mockData.ts ← G-5 +├── material/ReceivingManagement/mockData.ts ← H-1 연동 완료 +├── material/StockStatus/mockData.ts ← H-2 연동 완료 +├── outbound/ShipmentManagement/mockData.ts ← H-3 연동 완료 +└── reports/mockData.ts ← 확인 필요 +``` ### 1.5 작업 진행 정책 > **단위 작업 → 검수 → 승인 → 문서 업데이트 → 커밋** 순서로 진행 +### 1.6 세션 규칙 및 Serena 메모리 관리 + +> **세션 간 일관성 보장을 위한 필수 규칙** + +#### 세션 시작 프로토콜 (필수) + +``` +1. Serena 메모리 로드 + read_memory("mock-to-api-state") → 현재 Phase/작업 확인 + read_memory("mock-to-api-snapshot") → 마지막 작업 내용 확인 + +2. 현재 상태 확인 + - 이 문서 읽기 + - 현재 Phase의 기능별 상태 확인 + - "다음 작업은 [Phase]-[번호]의 [기능] 입니다" 명시 + +3. 작업 범위 명확화 + - 사용자에게 작업 범위 확인 + - "[Phase] 전체를 진행할까요, 특정 기능만 진행할까요?" +``` + +#### Serena 메모리 구조 + +```javascript +// mock-to-api-state +{ + "current_phase": "G", + "current_item": "G-1", + "current_feature": "목록 조회", + "progress": { + "G-1": { "목록": "완료", "상세": "진행중", "등록": "대기" } + }, + "last_update": "2025-12-26 14:30" +} + +// mock-to-api-snapshot +"G-1 작업지시관리: 목록 조회 API 연동 완료. + 다음: 상세 조회 연동 예정" +``` + +#### 작업 완료 시 (필수) + +``` +1. 문서 업데이트 + - 해당 기능 상태 변경 (⏳ → ✅) + - 변경 이력 추가 + +2. Serena 메모리 저장 + write_memory("mock-to-api-state", 현재 상태) + write_memory("mock-to-api-snapshot", 작업 내용 요약) + +3. 커밋 + feat: [Phase명] 번호 작업명 - 기능 설명 +``` + +### 1.7 작업 템플릿 (표준) + +> **각 기능별 작업 시 사용하는 표준 템플릿** + +```markdown +## [Phase-번호] 페이지명 - [기능명] 연동 + +**작업 대상:** +- 컴포넌트: `ComponentName.tsx` +- 액션: `actions.ts` +- API: `GET/POST/PUT/DELETE /api/v1/endpoint` + +**작업 절차:** +1. [ ] API 스펙 확인 (Swagger) +2. [ ] actions.ts 함수 확인/생성 +3. [ ] 타입 정의 확인 (API ↔ Frontend) +4. [ ] 컴포넌트에서 actions 호출 +5. [ ] console.log/MOCK 제거 +6. [ ] 브라우저 테스트 + +**결과:** +- [ ] 검수 요청 +- [ ] [승인] 문서 업데이트 +- [ ] [승인] 커밋 +``` + ``` ┌─────────────────────────────────────────────────────────────────┐ │ 📋 작업 흐름 (페이지 단위) │ @@ -285,7 +388,109 @@ ListClient.tsx (클라이언트) - **특성**: 단일 레코드 설정 관리 → 등록/삭제 불필요 - **상태**: ✅ 완료 -### 2.10 상세 페이지 Mock 현황 +### 2.10 Phase J: 게시판 시스템 + +> **2025-12-26 전수 조사 결과**: MOCK_BOARDS, MOCK_DEPARTMENTS 사용 중 + +| # | 페이지 | React 경로 | 조회 | 등록 | 수정 | 삭제 | 비고 | +|---|--------|-----------|------|------|------|------|------| +| J-1 | 게시판 목록 | `/board` | 🔄 Mock | ⏭️ | ⏭️ | ⏭️ | MOCK_BOARDS 사용 | +| J-2 | 게시글 상세 | `/board/[id]` | 🔄 Mock | ⏭️ | 🔄 | 🔄 | TODO + console.log | +| J-3 | 게시글 작성/수정 | `/board/[id]/edit` | 🔄 Mock | 🔄 | 🔄 | ⏭️ | MOCK_BOARDS 사용 | +| J-4 | 게시판 관리 | `/board/board-management` | 🔄 Mock | 🔄 | 🔄 | 🔄 | MOCK_DEPARTMENTS 사용 | + +**파일 구조:** +``` +components/board/ +├── types.ts ← MOCK_BOARDS (삭제 대상) +├── BoardForm/ ← MOCK_BOARDS 사용 +├── BoardDetail/ ← TODO + console.log +├── BoardList/ ← MOCK_BOARDS 사용 +└── BoardManagement/ + ├── types.ts ← MOCK_DEPARTMENTS (삭제 대상) + └── BoardForm.tsx ← MOCK_DEPARTMENTS 사용 +``` + +### 2.11 Phase K: 고객센터 + +> **2025-12-26 전수 조사 결과**: 전체 Mock 데이터 사용 (MOCK_* 상수) + +| # | 페이지 | React 경로 | 조회 | 등록 | 수정 | 삭제 | 비고 | +|---|--------|-----------|------|------|------|------|------| +| K-1 | FAQ 관리 | `/customer-center/faq` | 🔄 Mock | 🔄 | 🔄 | 🔄 | **MOCK_FAQS** 전체 사용 | +| K-2 | 이벤트 관리 | `/customer-center/events` | 🔄 Mock | 🔄 | 🔄 | 🔄 | **MOCK_EVENTS** 전체 사용 | +| K-3 | 공지사항 관리 | `/customer-center/notices` | 🔄 Mock | 🔄 | 🔄 | 🔄 | **MOCK_NOTICES** 전체 사용 | +| K-4 | 문의 관리 | `/customer-center/inquiries` | 🔄 Mock | 🔄 | 🔄 | 🔄 | **MOCK_INQUIRIES, MOCK_REPLY, MOCK_COMMENTS** | + +**파일 구조:** +``` +components/customer-center/ +├── FAQManagement/ +│ ├── types.ts ← MOCK_FAQS (삭제 대상) +│ └── FAQList.tsx ← MOCK_FAQS 사용 +├── EventManagement/ +│ ├── types.ts ← MOCK_EVENTS (삭제 대상) +│ └── EventList.tsx ← MOCK_EVENTS 사용 +├── NoticeManagement/ +│ ├── types.ts ← MOCK_NOTICES (삭제 대상) +│ └── NoticeList.tsx ← MOCK_NOTICES 사용 +└── InquiryManagement/ + ├── types.ts ← MOCK_INQUIRIES, MOCK_REPLY, MOCK_COMMENTS (삭제 대상) + ├── InquiryList.tsx ← MOCK_INQUIRIES 사용 + ├── InquiryDetail.tsx ← TODO + console.log + └── InquiryForm.tsx ← TODO + console.log +``` + +### 2.12 Phase L: 기타 모듈 + +> **2025-12-26 전수 조사 결과**: TODO + console.log 사용 + +| # | 페이지 | React 경로 | 조회 | 등록 | 수정 | 삭제 | 비고 | +|---|--------|-----------|------|------|------|------|------| +| L-1 | 공정 관리 | `/master-data/process-management` | 🔄 | 🔄 | 🔄 | 🔄 | TODO + console.log | +| L-2 | 견적 관리 | `/sales/quote-management` | 🔄 | 🔄 | 🔄 | 🔄 | TODO (writer, 발주처) | +| L-3 | 종합 분석 | `/reports/comprehensive-analysis` | ✅ | ⏭️ | ⏭️ | ⏭️ | console.log (승인/반려) | + +**L-1 공정 관리:** +- `ProcessListClient.tsx` - TODO: 삭제 확인 모달 및 API 연동 +- `ProcessForm.tsx` - console.log (등록/수정 데이터) + +**L-2 견적 관리:** +- `QuoteRegistration.tsx` - TODO: 로그인 사용자 정보, 발주처 API + +**L-3 종합 분석:** +- `ComprehensiveAnalysis/index.tsx` - console.log (승인/반려) + +### 2.13 Phase M: 잔여 작업 (Phase A-F 보완) + +> **2025-12-26 전수 조사 결과**: "완료" 표시됐지만 Mock/TODO 잔존 + +| # | 페이지 | 문제 유형 | 상세 | +|---|--------|----------|------| +| M-1 | 매입 상세 모달 | **MOCK 상수** | `MOCK_ACCOUNTS`, `MOCK_VENDORS` 사용 (PurchaseDetailModal.tsx) | +| M-2 | 직원 관리 | **TODO** | 파일 업로드 처리, Invite user console.log | +| M-3 | 근태 설정 | **MOCK 상수** | `MOCK_DEPARTMENTS` 사용 | +| M-4 | 결재 문서 생성 | **MOCK 상수** | `MOCK_EMPLOYEES` 사용 (ApprovalLineSection, ReferenceSection) | +| M-5 | 결재함/기안함 | **console.log** | 승인/반려/수정/복제 버튼 | +| M-6 | 구독 관리 | **TODO** | 자료 내보내기, 서비스 해지 | +| M-7 | 계정 정보 | **TODO** | 탈퇴/사용중지 API 연동 | + +**M-1 매입 상세 모달 (PurchaseDetailModal.tsx):** +```typescript +// 삭제 필요 +const MOCK_ACCOUNTS = [...]; +const MOCK_VENDORS = [...]; +// → 계좌/거래처 API로 대체 +``` + +**M-4 결재 문서 생성 (DocumentCreate/):** +```typescript +// 삭제 필요 +export const MOCK_EMPLOYEES: ApprovalPerson[] = [...]; +// → 직원 목록 API (getActiveEmployees)로 대체 +``` + +### 2.14 상세 페이지 Mock 현황 > 리스트 페이지 API 연동 완료 후 상세 페이지 연동 필요