docs: [migration] Phase M 완료 상태 업데이트

plans/react-mock-to-api-migration-plan.md

@@ -54,7 +54,7 @@
 | **이벤트** | `/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 |
+| **공정관리** | `/master-data/process-management` | ✅ **완료** (2025-12-26) |
 | **견적** | `/sales/quote-management` | ✅ **완료** (2025-12-26) |
 
 #### 📁 mockData.ts 삭제 대상
@@ -390,55 +390,220 @@ ListClient.tsx (클라이언트)
 
 ### 2.10 Phase J: 게시판 시스템
 
-> **2025-12-26 전수 조사 결과**: MOCK_BOARDS, MOCK_DEPARTMENTS 사용 중
+> **2025-12-26 분석 결과**: mng 게시판 관리 시스템 (`mng.sam.kr/boards`) 연동 예정
 
-| # | 페이지 | 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 사용 |
+#### 🏗️ mng 게시판 시스템 아키텍처
 
-**파일 구조:**
+**EAV (Entity-Attribute-Value) 패턴 기반 통합 게시판:**
+```
+boards (게시판 정의)
+├── board_settings (EAV 필드 스키마)
+├── posts (게시글)
+│   └── post_custom_field_values (EAV 값 저장)
+└── 첨부파일 (Polymorphic: files → fileable)
+```
+
+**API 엔드포인트 (`/admin/boards/*`):**
+| 기능 | Method | Endpoint | 설명 |
+|------|--------|----------|------|
+| 게시판 CRUD | GET/POST/PUT/DELETE | `/boards`, `/boards/{id}` | 게시판 설정 관리 |
+| 통계 | GET | `/boards/stats` | 게시판 통계 (총/활성/비활성/삭제) |
+| 필드 관리 | GET/POST/PUT/DELETE | `/boards/{id}/fields` | EAV 필드 스키마 관리 |
+| 필드 순서 | POST | `/boards/{id}/fields/reorder` | 드래그앤드롭 정렬 |
+| 활성화 토글 | POST | `/boards/{id}/toggle-active` | 활성/비활성 전환 |
+| 복원/영구삭제 | POST/DELETE | `/boards/{id}/restore`, `/boards/{id}/force` | Soft Delete 관리 |
+| 템플릿 | GET/POST | `/boards/templates`, `/boards/create-from-template` | 템플릿 기반 생성 |
+
+**게시판 모델 주요 필드:**
+```typescript
+interface Board {
+  id: number;
+  tenant_id?: number;      // null = 시스템 게시판
+  is_system: boolean;      // 시스템/테넌트 구분
+  board_type: string;      // notice, qna, faq, free, gallery, download
+  board_code: string;      // 고유 코드
+  name: string;
+  description?: string;
+  editor_type: 'wysiwyg' | 'markdown' | 'text';
+  allow_files: boolean;
+  max_file_count: number;
+  max_file_size: number;   // KB
+  extra_settings: {        // JSON
+    allow_comment?: boolean;
+    allow_secret?: boolean;
+    write_roles?: string[];
+    read_roles?: string[];
+  };
+  is_active: boolean;
+}
+
+interface BoardSetting {   // EAV 필드 스키마
+  id: number;
+  board_id: number;
+  name: string;            // 필드명 (예: 카테고리)
+  field_key: string;       // 필드 키 (예: category)
+  field_type: 'text' | 'number' | 'select' | 'date' | 'textarea' | 'checkbox' | 'radio' | 'file';
+  field_meta?: {           // JSON (select 옵션, 기본값 등)
+    options?: string[];
+    default?: string;
+  };
+  is_required: boolean;
+  sort_order: number;
+}
+```
+
+**템플릿 시스템 (`config/board_templates.php`):**
+- **시스템 템플릿**: notice, qna, faq, popup (본사 ↔ 테넌트 소통용)
+- **테넌트 템플릿**: free, gallery, download, notice, qna (테넌트 내부용)
+
+#### 📋 React 연동 작업 현황
+
+| # | 페이지 | React 경로 | 조회 | 등록 | 수정 | 삭제 | API 연동 전략 |
+|---|--------|-----------|------|------|------|------|--------------|
+| J-1 | 게시판 목록 | `/board` | 🔄 Mock | ⏭️ | ⏭️ | ⏭️ | `GET /boards` + 게시글 API 필요 |
+| J-2 | 게시글 상세 | `/board/[id]` | 🔄 Mock | ⏭️ | 🔄 | 🔄 | 게시글 API 필요 (posts CRUD) |
+| J-3 | 게시글 작성/수정 | `/board/[id]/edit` | 🔄 Mock | 🔄 | 🔄 | ⏭️ | 게시글 API + 커스텀필드 동적 렌더링 |
+| J-4 | 게시판 관리 | `/board/board-management` | 🔄 Mock | 🔄 | 🔄 | 🔄 | ✅ `/admin/boards/*` API 완비 |
+
+**파일 구조 → 연동 계획:**
 ```
 components/board/
-├── types.ts           ← MOCK_BOARDS (삭제 대상)
-├── BoardForm/         ← MOCK_BOARDS 사용
-├── BoardDetail/       ← TODO + console.log
-├── BoardList/         ← MOCK_BOARDS 사용
+├── types.ts           ← 🔄 Board, Post, BoardSetting 타입으로 교체
+├── actions.ts         ← 🆕 Server Actions (게시판/게시글 CRUD)
+├── BoardForm/         ← 🔄 동적 폼 렌더링 (EAV 필드 기반)
+├── BoardDetail/       ← 🔄 게시글 상세 + 커스텀필드 표시
+├── BoardList/         ← 🔄 게시판별 필터링 + 페이지네이션
 └── BoardManagement/
-    ├── types.ts       ← MOCK_DEPARTMENTS (삭제 대상)
-    └── BoardForm.tsx  ← MOCK_DEPARTMENTS 사용
+    ├── types.ts       ← 🔄 Board 관리 타입으로 교체
+    ├── actions.ts     ← 🆕 `/admin/boards/*` API 연동
+    └── BoardForm.tsx  ← 🔄 템플릿 선택 + 필드 관리 UI
 ```
 
+#### ⚠️ 추가 API 개발 필요 (api 프로젝트)
+
+현재 mng에는 **게시판 설정 API**만 있고, **게시글 CRUD API**는 별도 구현 필요:
+
+| API | Method | Endpoint | 설명 |
+|-----|--------|----------|------|
+| 게시글 목록 | GET | `/boards/{boardCode}/posts` | 페이지네이션, 검색, 정렬 |
+| 게시글 상세 | GET | `/boards/{boardCode}/posts/{id}` | 조회수 증가, 커스텀필드 포함 |
+| 게시글 등록 | POST | `/boards/{boardCode}/posts` | 커스텀필드 값 저장 |
+| 게시글 수정 | PUT | `/boards/{boardCode}/posts/{id}` | 커스텀필드 값 수정 |
+| 게시글 삭제 | DELETE | `/boards/{boardCode}/posts/{id}` | Soft Delete |
+| 댓글 CRUD | GET/POST/PUT/DELETE | `/posts/{id}/comments` | 댓글 기능 |
+| 파일 업로드 | POST | `/posts/{id}/files` | 첨부파일 |
+
 ### 2.11 Phase K: 고객센터
 
-> **2025-12-26 전수 조사 결과**: 전체 Mock 데이터 사용 (MOCK_* 상수)
+> **2025-12-26 분석 결과**: mng 게시판 시스템의 **템플릿 기반 게시판**으로 통합 운영
 
-| # | 페이지 | 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** |
+#### 🎯 통합 전략: 고객센터 = 게시판 템플릿 활용
 
-**파일 구조:**
+각 고객센터 메뉴를 별도 `board_code`로 생성하여 통합 관리:
+
+| 메뉴 | board_code | board_type | 템플릿 | 커스텀 필드 |
+|------|------------|------------|--------|------------|
+| FAQ | `system-faq` | faq | system/faq | category (select) |
+| 공지사항 | `system-notice` | notice | system/notice | category (select) |
+| 이벤트 | `system-event` | notice | - | start_date, end_date, image_url |
+| 1:1 문의 | `system-qna` | qna | system/qna | inquiry_type, answer_status |
+
+**장점:**
+- 코드 중복 제거 (게시판 CRUD 재사용)
+- 커스텀 필드로 각 메뉴 특성 반영
+- 관리자 UI 통합 (mng.sam.kr/boards에서 일괄 관리)
+
+#### 📋 React 연동 작업 현황
+
+| # | 페이지 | React 경로 | 조회 | 등록 | 수정 | 삭제 | API 연동 전략 |
+|---|--------|-----------|------|------|------|------|--------------|
+| K-1 | FAQ 관리 | `/customer-center/faq` | 🔄 Mock | 🔄 | 🔄 | 🔄 | `board_code: system-faq` 게시글 API |
+| K-2 | 이벤트 관리 | `/customer-center/events` | 🔄 Mock | 🔄 | 🔄 | 🔄 | `board_code: system-event` 게시글 API |
+| K-3 | 공지사항 관리 | `/customer-center/notices` | 🔄 Mock | 🔄 | 🔄 | 🔄 | `board_code: system-notice` 게시글 API |
+| K-4 | 문의 관리 | `/customer-center/inquiries` | 🔄 Mock | 🔄 | 🔄 | 🔄 | `board_code: system-qna` 게시글 API + 답변 |
+
+**파일 구조 → 연동 계획:**
 ```
 components/customer-center/
+├── shared/
+│   ├── types.ts           ← 🆕 공통 Post, BoardField 타입
+│   ├── actions.ts         ← 🆕 게시글 CRUD Server Actions (board_code 파라미터)
+│   └── PostForm.tsx       ← 🆕 동적 폼 (커스텀필드 기반)
 ├── FAQManagement/
-│   ├── types.ts      ← MOCK_FAQS (삭제 대상)
-│   └── FAQList.tsx   ← MOCK_FAQS 사용
+│   ├── types.ts           ← 🔄 FAQ 특화 타입 (category 필드)
+│   ├── actions.ts         ← 🆕 board_code='system-faq' 고정
+│   └── FAQList.tsx        ← 🔄 카테고리별 그룹핑 UI
 ├── EventManagement/
-│   ├── types.ts      ← MOCK_EVENTS (삭제 대상)
-│   └── EventList.tsx ← MOCK_EVENTS 사용
+│   ├── types.ts           ← 🔄 Event 특화 타입 (start_date, end_date)
+│   ├── actions.ts         ← 🆕 board_code='system-event' 고정
+│   └── EventList.tsx      ← 🔄 진행중/예정/종료 필터
 ├── NoticeManagement/
-│   ├── types.ts      ← MOCK_NOTICES (삭제 대상)
-│   └── NoticeList.tsx ← MOCK_NOTICES 사용
+│   ├── types.ts           ← 🔄 Notice 특화 타입
+│   ├── actions.ts         ← 🆕 board_code='system-notice' 고정
+│   └── NoticeList.tsx     ← 🔄 공지 목록 UI
 └── InquiryManagement/
-    ├── types.ts      ← MOCK_INQUIRIES, MOCK_REPLY, MOCK_COMMENTS (삭제 대상)
-    ├── InquiryList.tsx ← MOCK_INQUIRIES 사용
-    ├── InquiryDetail.tsx ← TODO + console.log
-    └── InquiryForm.tsx ← TODO + console.log
+    ├── types.ts           ← 🔄 Inquiry 특화 타입 (answer_status)
+    ├── actions.ts         ← 🆕 board_code='system-qna' 고정
+    ├── InquiryList.tsx    ← 🔄 답변대기/완료 필터
+    ├── InquiryDetail.tsx  ← 🔄 문의 상세 + 답변 작성
+    └── InquiryForm.tsx    ← 🔄 문의 등록 폼
+```
+
+#### 🛠️ 구현 순서 (권장)
+
+**Step 1: API 프로젝트 게시글 API 개발**
+```
+api/app/Http/Controllers/Api/V1/PostController.php
+api/app/Services/PostService.php
+api/app/Http/Requests/Post/StorePostRequest.php
+```
+
+**Step 2: mng에서 시스템 게시판 생성**
+```
+mng.sam.kr/boards → 템플릿으로 생성:
+- system-faq (FAQ 템플릿)
+- system-notice (공지사항 템플릿)
+- system-event (커스텀: 이벤트)
+- system-qna (1:1문의 템플릿)
+```
+
+**Step 3: React 공통 모듈 개발**
+```
+react/src/lib/board/
+├── types.ts    ← API 타입 정의
+├── actions.ts  ← 게시글 CRUD Server Actions
+└── utils.ts    ← 커스텀필드 렌더링 유틸
+```
+
+**Step 4: 각 메뉴별 연동**
+```
+K-3 공지사항 (가장 단순) → K-1 FAQ → K-2 이벤트 → K-4 문의 (가장 복잡)
+```
+
+#### 💡 커스텀 필드 동적 렌더링 전략
+
+```typescript
+// 게시판 필드 스키마 기반 동적 폼 생성
+function renderCustomField(field: BoardSetting, value: string | null) {
+  switch (field.field_type) {
+    case 'text': return <Input {...} />;
+    case 'select': return <Select options={field.field_meta?.options} {...} />;
+    case 'date': return <DatePicker {...} />;
+    case 'textarea': return <Textarea {...} />;
+    case 'checkbox': return <Checkbox {...} />;
+    // ...
+  }
+}
+
+// 게시글 작성 시 커스텀필드 값 저장
+const formData = {
+  title: '...',
+  content: '...',
+  custom_fields: {
+    category: '이용안내',      // field_key: value
+    answer_status: '대기중',
+  }
+};
 ```
 
 ### 2.12 Phase L: 기타 모듈
@@ -447,14 +612,15 @@ components/customer-center/
 
 | # | 페이지 | React 경로 | 조회 | 등록 | 수정 | 삭제 | 비고 |
 |---|--------|-----------|------|------|------|------|------|
-| L-1 | 공정 관리 | `/master-data/process-management` | 🔄 | 🔄 | 🔄 | 🔄 | API 미존재 (Backend 작업 필요) |
+| L-1 | 공정 관리 | `/master-data/process-management` | ✅ | ✅ | ✅ | ✅ | **2025-12-26 완료** - Backend API + React 연동 |
 | L-2 | 견적 관리 | `/sales/quote-management` | ✅ | ✅ | ✅ | ✅ | **2025-12-26 완료** |
 | L-3 | 종합 분석 | `/reports/comprehensive-analysis` | ✅ | ⏭️ | ⏭️ | ⏭️ | ✅ **완료** - approveIssue/rejectIssue API 연동 (I-7에서 완료) |
 
-**L-1 공정 관리:**
-- `ProcessListClient.tsx` - TODO: 삭제 확인 모달 및 API 연동
-- `ProcessForm.tsx` - console.log (등록/수정 데이터)
-- **⚠️ Backend API 미존재** - 공정 관리 API 구현 필요
+**L-1 공정 관리:** ✅ **2025-12-26 완료**
+- Backend API 신규 개발 (ProcessController, ProcessService, Process 모델)
+- `ProcessListClient.tsx` - API 연동 완료 (삭제 확인 모달, 일괄삭제, 상태토글)
+- `ProcessForm.tsx` - API 연동 완료 (등록/수정)
+- `actions.ts` - Server Actions 신규 생성
 
 **L-2 견적 관리:** ✅ **2025-12-26 완료**
 - `quotes/types.ts` - Quote, QuoteItem, QuoteStatus, ProductCategory 타입 정의, QuoteFormData 변환 함수
@@ -471,32 +637,21 @@ components/customer-center/
 
 ### 2.13 Phase M: 잔여 작업 (Phase A-F 보완)
 
-> **2025-12-26 전수 조사 결과**: "완료" 표시됐지만 Mock/TODO 잔존
+> **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 | 매입 상세 모달 | **MOCK 상수** | `MOCK_ACCOUNTS`, `MOCK_VENDORS` → getBankAccounts, getVendors API | ✅ |
+| M-2 | 직원 관리 | **TODO** | 파일 업로드 → uploadProfileImage API (Invite API 백엔드 미구현) | ✅ |
+| M-3 | 근태 설정 | **MOCK 상수** | `MOCK_DEPARTMENTS` → 이전 Phase에서 완료 | ✅ |
+| M-4 | 결재 문서 생성 | **MOCK 상수** | `MOCK_EMPLOYEES` → getEmployees API | ✅ |
+| M-5 | 결재함/기안함 | **console.log** | 승인/반려 → API 연동, 수정/복제 → 백엔드 API 필요 | ✅ |
+| M-6 | 구독 관리 | **TODO** | 자료 내보내기 → requestDataExport, 서비스 해지 → cancelSubscription | ✅ |
+| M-7 | 계정 정보 | **TODO** | 탈퇴 → withdrawAccount, 사용중지 → suspendTenant | ✅ |
 
-**M-1 매입 상세 모달 (PurchaseDetailModal.tsx):**
-```typescript
-// 삭제 필요
-const MOCK_ACCOUNTS = [...];
-const MOCK_VENDORS = [...];
-// → 계좌/거래처 API로 대체
-```
-
-**M-4 결재 문서 생성 (DocumentCreate/):**
-```typescript
-// 삭제 필요
-export const MOCK_EMPLOYEES: ApprovalPerson[] = [...];
-// → 직원 목록 API (getActiveEmployees)로 대체
-```
+**잔여 백엔드 API 개발 필요 항목:**
+- 직원 관리: Invite user API (POST /api/v1/employees/invite)
+- 결재함: 수정(edit)/복제(copy) API
 
 ### 2.14 상세 페이지 Mock 현황
 
@@ -515,7 +670,7 @@ export const MOCK_EMPLOYEES: ApprovalPerson[] = [...];
 | S-9 | ReceivingDetail | `ReceivingManagement/ReceivingDetail.tsx` | ✅ | H-1 입고 관리 |
 | S-10 | WorkOrderDetail | `WorkOrders/WorkOrderDetail.tsx` | ✅ | G-1 작업지시 관리 |
 
-> **참고**: `PurchaseDetailModal.tsx`의 MOCK_ACCOUNTS, MOCK_VENDORS는 Phase M-1에서 처리 예정
+> **참고**: `PurchaseDetailModal.tsx`의 MOCK_ACCOUNTS, MOCK_VENDORS는 Phase M-1에서 완료 (2025-12-26)
 
 ---