diff --git a/plans/react-mock-to-api-migration-plan.md b/plans/react-mock-to-api-migration-plan.md index 4e773c7..3b3b97e 100644 --- a/plans/react-mock-to-api-migration-plan.md +++ b/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 ; + case 'select': return