docs: Phase J/K 작업을 react-mock-remaining-tasks.md로 분리

- 아키텍처 원칙 추가 (React → api.sam.kr 만 호출, mng 호출 금지) - API 상태 확인: api 프로젝트에 boards/posts API 이미 완비 - Phase J (게시판), Phase K (고객센터) 상세 계획 분리 - Serena 메모리 관리 규칙 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-27 17:24:37 +09:00
parent bb22cd36f6
commit 3cc539dc26
2 changed files with 390 additions and 220 deletions
--- a/plans/react-mock-to-api-migration-plan.md
+++ b/plans/react-mock-to-api-migration-plan.md
@@ -388,225 +388,9 @@ ListClient.tsx (클라이언트)
 - **특성**: 단일 레코드 설정 관리 → 등록/삭제 불필요
 - **상태**: ✅ 완료

-### 2.10 Phase J: 게시판 시스템
+> **Phase J (게시판), Phase K (고객센터)**: `react-mock-remaining-tasks.md`로 분리됨

-> **2025-12-26 분석 결과**: mng 게시판 관리 시스템 (`mng.sam.kr/boards`) 연동 예정
-
-#### 🏗️ 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           ← 🔄 Board, Post, BoardSetting 타입으로 교체
-├── actions.ts         ← 🆕 Server Actions (게시판/게시글 CRUD)
-├── BoardForm/         ← 🔄 동적 폼 렌더링 (EAV 필드 기반)
-├── BoardDetail/       ← 🔄 게시글 상세 + 커스텀필드 표시
-├── BoardList/         ← 🔄 게시판별 필터링 + 페이지네이션
-└── BoardManagement/
-    ├── 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 분석 결과**: mng 게시판 시스템의 **템플릿 기반 게시판**으로 통합 운영
-
-#### 🎯 통합 전략: 고객센터 = 게시판 템플릿 활용
-
-각 고객센터 메뉴를 별도 `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           ← 🔄 FAQ 특화 타입 (category 필드)
-│   ├── actions.ts         ← 🆕 board_code='system-faq' 고정
-│   └── FAQList.tsx        ← 🔄 카테고리별 그룹핑 UI
-├── EventManagement/
-│   ├── types.ts           ← 🔄 Event 특화 타입 (start_date, end_date)
-│   ├── actions.ts         ← 🆕 board_code='system-event' 고정
-│   └── EventList.tsx      ← 🔄 진행중/예정/종료 필터
-├── NoticeManagement/
-│   ├── types.ts           ← 🔄 Notice 특화 타입
-│   ├── actions.ts         ← 🆕 board_code='system-notice' 고정
-│   └── NoticeList.tsx     ← 🔄 공지 목록 UI
-└── InquiryManagement/
-    ├── 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: 기타 모듈
+### 2.10 Phase L: 기타 모듈

 > **2025-12-26 전수 조사 결과**: TODO + console.log 사용

@@ -635,7 +419,7 @@ const formData = {
 **L-3 종합 분석:**
 - `ComprehensiveAnalysis/index.tsx` - ✅ **완료** - approveIssue/rejectIssue API 연동 (I-7에서 완료)

-### 2.13 Phase M: 잔여 작업 (Phase A-F 보완)
+### 2.11 Phase M: 잔여 작업 (Phase A-F 보완)

 > **2025-12-26 완료**: 모든 잔여 Mock/TODO 제거 완료

@@ -653,7 +437,7 @@ const formData = {
 - 직원 관리: Invite user API (POST /api/v1/employees/invite)
 - 결재함: 수정(edit)/복제(copy) API

-### 2.14 상세 페이지 Mock 현황
+### 2.12 상세 페이지 Mock 현황

 > **2025-12-26 완료**: 모든 상세 페이지 API 연동 완료