Files
sam-docs/plans/react-mock-remaining-tasks.md
2026-01-05 15:56:46 +09:00

637 lines
30 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# React Mock → API 마이그레이션 - 잔여 작업
> **작성일**: 2025-12-27
> **목적**: 미완료 Mock → API 연동 작업 추적
> **원본 문서**: `react-mock-to-api-migration-plan.md`
> **참조 구현**: 단가관리 (`/sales/pricing-management`)
---
## 0. 로컬 개발 환경
### 도메인 구성
| 서비스 | 도메인 | 설명 |
|--------|--------|------|
| React (프론트엔드) | `http://dev.sam.kr` | 사용자 화면 |
| API (백엔드) | `http://api.sam.kr` | REST API 서버 |
| MNG (운영관리자) | `http://mng.sam.kr` | 관리자 패널 |
### 테스트 URL 예시
```
# 종합분석 페이지
http://dev.sam.kr/reports/comprehensive-analysis
# API 직접 호출
http://api.sam.kr/api/v1/comprehensive-analysis
```
### 테스트 대상 테넌트
| 항목 | 값 | 비고 |
|------|-----|------|
| **Tenant ID** | 287 | 프론트_테스트회사 |
| **테스트 User ID** | 33 | 홍킬동 (hhhhhh@example.com) |
| **보조 User ID** | 12 | Ops Admin (결재함/참조함 테스트용 기안자) |
> ⚠️ **주의**: Seeder 및 테스트 데이터 생성 시 반드시 `tenant_id = 287`, `user_id = 33` 사용
### 로그인 정보
| 사용자 | Email | 비밀번호 | Tenant |
|--------|-------|---------|--------|
| 홍킬동 | hhhhhh@example.com | (확인 필요) | 287 (기본) |
### 종합분석 페이지 작업 시 주의사항
> ⚠️ **필수**: 종합분석은 여러 모듈의 데이터를 통합 표시하므로, 데이터 수정 시 관련 페이지 점검 필수
| 종합분석 섹션 | 원본 데이터 | 관련 페이지 (점검 대상) |
|--------------|------------|----------------------|
| 오늘의 이슈 (결재 대기) | `approvals`, `approval_steps` | `/approval/draft` (기안함), `/approval/pending` (결재함), `/approval/reference` (참조함) |
| 월간 예상 지출 | `expected_expenses` | `/accounting/expected-expenses` |
| 입금 현황 | `deposits` | `/accounting/deposits` |
| 채권추심 | `bad_debts` | `/accounting/bad-debts` |
| 미수금/여신한도 | `clients` | `/sales/clients` |
**작업 흐름:**
```
종합분석 데이터 수정 → 종합분석 페이지 확인 → 관련 원본 페이지 점검
```
---
## 1. 작업 규칙
### 1.0 아키텍처 원칙 (필수)
> **React는 오직 `api.sam.kr` (api 프로젝트)만 호출한다**
```
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ react/ │ ───► │ api/ │ │ mng/ │
│ dev.sam.kr │ │ api.sam.kr │ │ mng.sam.kr │
│ (프론트엔드) │ │ (REST API) │ │ (관리자패널) │
└─────────────┘ └─────────────┘ └─────────────┘
│ │ │
│ ✅ 호출 허용 │ │
└────────────────────┘ │
❌ 절대 호출 금지 ─────────────────────────┘
```
**규칙:**
- React에서 mng API 직접 호출 **절대 금지**
- 필요한 API가 api 프로젝트에 없으면 **api에 새로 개발**
- mng의 모델/로직은 **참조만** (코드 복사 또는 재구현)
### 1.1 작업 진행 정책
> **단위 작업 → 검수 → 승인 → 문서 업데이트 → 커밋** 순서로 진행
### 1.2 세션 규칙 및 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": "J",
"current_item": "J-1",
"current_feature": "게시판 목록",
"progress": {
"J-1": { "목록": "대기", "상세": "대기" }
},
"last_update": "2025-12-27"
}
// mock-to-api-snapshot
"Phase J 게시판 시스템 시작 예정"
```
#### 작업 완료 시 (필수)
```
1. 문서 업데이트
- 해당 기능 상태 변경 (🔄 → ✅)
- 변경 이력 추가
2. Serena 메모리 저장
write_memory("mock-to-api-state", 현재 상태)
write_memory("mock-to-api-snapshot", 작업 내용 요약)
3. 커밋
feat: [Phase]-[번호] [페이지명] Mock → API 연동
```
### 1.3 작업 템플릿 (표준)
```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. [ ] 브라우저 테스트
**결과:**
- [ ] 검수 요청
- [ ] [승인] 문서 업데이트
- [ ] [승인] 커밋
```
```
┌─────────────────────────────────────────────────────────────────┐
│ 📋 작업 흐름 (페이지 단위) │
├─────────────────────────────────────────────────────────────────┤
│ 1⃣ 작업 시작: 대상 페이지 Mock → API 연동 작업 │
│ 2⃣ 작업 완료: 코드 수정 완료 후 사용자에게 검수 요청 │
│ 3⃣ 검수: 사용자가 기능 확인 (브라우저 테스트) │
│ 4⃣ [승인] 문서 업데이트: 이 문서의 상태 갱신 │
│ 5⃣ [승인] 커밋: Git 커밋 생성 │
│ 6⃣ 다음 페이지로 이동 │
└─────────────────────────────────────────────────────────────────┘
```
**⚠️ 중요 규칙:**
- 각 단계에서 `[승인]` 표시된 작업은 **사용자 승인 후** 진행
---
## 2. 잔여 작업 목록
### 2.1 Phase J: 게시판 시스템
> **상태**: ✅ api 프로젝트에 게시판/게시글 API 완비 → React 연동 작업 가능
#### ✅ api 프로젝트 게시판 API 아키텍처
> **핵심 설계**: 시스템 게시판과 테넌트 게시판을 **별도 엔드포인트**로 분리하고, **code 기반 URL** 사용
```
시스템 게시판 (본사 운영) 테넌트 게시판 (테넌트 내부)
┌─────────────────────────────┐ ┌─────────────────────────────┐
│ /api/v1/system-boards/{code}│ │ /api/v1/boards/{code} │
│ - is_system = true │ │ - is_system = false │
│ - tenant_id = null │ │ - tenant_id = {current} │
│ - 메뉴 → global_menus │ │ - 메뉴 → menus │
└─────────────────────────────┘ └─────────────────────────────┘
```
**장점:**
- 동일한 `board_code`도 시스템/테넌트에서 독립 사용 가능
- API 호출 시 `is_system` 플래그 불필요
- URL만으로 게시판 유형 구분 가능
- RESTful 원칙 준수
#### 📌 시스템 게시판 API (System Boards)
| 기능 | Method | Endpoint (api.sam.kr) | 상태 |
|------|--------|----------------------|------|
| 시스템 게시판 목록 | GET | `/api/v1/system-boards` | ✅ |
| 시스템 게시판 상세 | GET | `/api/v1/system-boards/{code}` | ✅ |
| 시스템 게시판 필드 | GET | `/api/v1/system-boards/{code}/fields` | ✅ |
| 시스템 게시글 목록 | GET | `/api/v1/system-boards/{code}/posts` | ✅ |
| 시스템 게시글 상세 | GET | `/api/v1/system-boards/{code}/posts/{id}` | ✅ |
| 시스템 게시글 등록 | POST | `/api/v1/system-boards/{code}/posts` | ✅ |
| 시스템 게시글 수정 | PUT | `/api/v1/system-boards/{code}/posts/{id}` | ✅ |
| 시스템 게시글 삭제 | DELETE | `/api/v1/system-boards/{code}/posts/{id}` | ✅ |
| 시스템 댓글 CRUD | * | `/api/v1/system-boards/{code}/posts/{id}/comments/*` | ✅ |
#### 📌 테넌트 게시판 API (Tenant Boards)
| 기능 | Method | Endpoint (api.sam.kr) | 상태 |
|------|--------|----------------------|------|
| 테넌트 게시판 목록 | GET | `/api/v1/boards` | ✅ |
| 테넌트 게시판 상세 | GET | `/api/v1/boards/{code}` | 🔄 변경 필요 (ID→code) |
| 테넌트 게시판 필드 | GET | `/api/v1/boards/{code}/fields` | ✅ |
| 테넌트 게시글 목록 | GET | `/api/v1/boards/{code}/posts` | ✅ |
| 테넌트 게시글 상세 | GET | `/api/v1/boards/{code}/posts/{id}` | ✅ |
| 테넌트 게시글 등록 | POST | `/api/v1/boards/{code}/posts` | ✅ |
| 테넌트 게시글 수정 | PUT | `/api/v1/boards/{code}/posts/{id}` | ✅ |
| 테넌트 게시글 삭제 | DELETE | `/api/v1/boards/{code}/posts/{id}` | ✅ |
| 테넌트 댓글 CRUD | * | `/api/v1/boards/{code}/posts/{id}/comments/*` | ✅ |
#### 📌 관리자 게시판 API (Admin - mng.sam.kr)
| 기능 | Method | Endpoint (mng.sam.kr) | 상태 |
|------|--------|----------------------|------|
| 전체 게시판 목록 | GET | `/boards` (Blade) | ✅ |
| 게시판 등록 | POST | `/boards` | ✅ |
| 게시판 수정 | PUT | `/boards/{id}` | ✅ |
| 게시판 삭제 | DELETE | `/boards/{id}` | ✅ |
| **게시판 CRUD 시 메뉴 자동 연동** | - | mng + api 프로젝트 | ✅ 완료 |
#### 📌 테넌트 게시판 메뉴 연동 (api 프로젝트)
> **2025-12-29 추가**: 테넌트 게시판 생성/수정/삭제 시 메뉴 자동 연동
| 기능 | 트리거 | 메뉴 처리 | 상태 |
|------|--------|----------|------|
| 게시판 생성 | `BoardService::createTenantBoard()` | `/board` 하위에 메뉴 자동 추가 | ✅ |
| 게시판 수정 | `BoardService::updateTenantBoard()` | 코드/이름 변경 시 메뉴 URL/이름 동기화 | ✅ |
| 게시판 삭제 | `BoardService::deleteTenantBoard()` | 메뉴 Soft Delete | ✅ |
**구현 파일:**
- `api/app/Services/MenuService.php` - 게시판 메뉴 연동 메서드 추가
- `api/app/Services/Boards/BoardService.php` - MenuService 호출 로직 추가
#### 🏗️ 게시판 시스템 아키텍처 (참조용)
**EAV (Entity-Attribute-Value) 패턴 기반 통합 게시판:**
```
boards (게시판 정의)
├── board_settings (EAV 필드 스키마)
├── posts (게시글)
│ └── post_custom_field_values (EAV 값 저장)
└── 첨부파일 (Polymorphic: files → fileable)
```
**게시판 모델 주요 필드:**
```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` | ✅ | ⏭️ | ⏭️ | ✅ | ✅ 완료 (2025-12-29) - `actions.ts` getPosts/getMyPosts |
| J-2 | 게시글 상세 | `/board/[boardCode]/[postId]` | ✅ | ⏭️ | ⏭️ | ✅ | ✅ 완료 (2025-12-29) - `actions.ts` getPost/deletePost |
| J-3 | 게시글 작성/수정 | `/board/[boardCode]/[postId]/edit` | ✅ | ✅ | ✅ | ⏭️ | ✅ 완료 (2025-12-29) - `actions.ts` createPost/updatePost |
| J-4 | 게시판 관리 | `/board/board-management` | ✅ | ✅ | ✅ | ✅ | ✅ 완료 (2025-12-27) |
> ✅ **Phase J 완료** (2025-12-29): 모든 게시판 Mock → API 연동 완료
**파일 구조 (완료):**
```
components/board/
├── types.ts ← ✅ Post, Comment, PostApiData 등 API 타입 정의
├── actions.ts ← ✅ Server Actions (getPosts, getPost, createPost, updatePost, deletePost)
├── BoardForm/ ← ✅ getBoards + createPost/updatePost API 연동
├── BoardDetail/ ← ✅ 게시글 상세 + 삭제 API 연동
├── BoardList/ ← ✅ 게시판별 필터링 + 페이지네이션 + 삭제
└── BoardManagement/
├── types.ts ← ✅ Board 관리 타입
├── actions.ts ← ✅ getBoards, createBoard, updateBoard, deleteBoard
└── index.tsx ← ✅ 게시판 CRUD 완료
```
**라우트 변경:**
- 기존: `/board/[id]` → 신규: `/board/[boardCode]/[postId]`
- 삭제된 파일: `board/[id]/page.tsx`, `board/[id]/edit/page.tsx`
---
### 2.2 Phase K: 고객센터
> **상태**: ✅ React 연동 완료 (2025-12-29) - `shared/actions.ts` 통해 시스템 게시판 API 호출
#### 🎯 통합 전략: 고객센터 = 게시판 템플릿 활용
각 고객센터 메뉴를 별도 `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` | ✅ | ⏭️ | ⏭️ | ⏭️ | ✅ 완료 (2025-12-29) - `shared/actions.ts` |
| K-2 | 이벤트 관리 | `/customer-center/events` | ✅ | ⏭️ | ⏭️ | ⏭️ | ✅ 완료 (2025-12-29) - `shared/actions.ts` |
| K-3 | 공지사항 관리 | `/customer-center/notices` | ✅ | ⏭️ | ⏭️ | ⏭️ | ✅ 완료 (2025-12-29) - `shared/actions.ts` |
| K-4 | 문의 관리 | `/customer-center/inquiries` | ✅ | ✅ | ✅ | ✅ | ✅ 완료 (2025-12-29) - `shared/actions.ts` + 댓글 CRUD |
**파일 구조 → 연동 계획:**
```
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: mng에서 시스템 게시판 생성**
```
mng.sam.kr/boards → 템플릿으로 생성:
- system-faq (FAQ 템플릿)
- system-notice (공지사항 템플릿)
- system-event (커스텀: 이벤트)
- system-qna (1:1문의 템플릿)
```
**Step 2: React 공통 모듈 개발** (✅ 게시판/게시글 API 이미 완비)
```
react/src/lib/board/
├── types.ts ← API 타입 정의
├── actions.ts ← 게시글 CRUD Server Actions
└── utils.ts ← 커스텀필드 렌더링 유틸
```
**Step 3: 각 메뉴별 연동**
```
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.3 Phase L: 설정 및 시스템 관리
> **상태**: 🔄 분석 완료 - 일부 API 연동 필요
#### 📋 React 연동 작업 현황
| # | 페이지 | React 경로 | Mock 데이터 | API 연동 | 상태 | 작업 계획 |
|---|--------|-----------|------------|---------|------|----------|
| L-1 | 계정관리 | `/settings/accounts` | ❌ | ✅ CRUD | ✅ 완료 | 데이터 확인 |
| L-2 | 권한관리 | `/settings/permissions` | ✅ defaultPermissions + localStorage | ❌ | 🔴 미연동 | API 개발 필요 |
| L-3 | 직급관리 | `/settings/ranks` | ❌ | ✅ positions API (type=rank) | ✅ 완료 | 통합 positions 테이블 |
| L-4 | 직책관리 | `/settings/titles` | ❌ | ✅ positions API (type=title) | ✅ 완료 | 통합 positions 테이블 |
| L-5 | 출퇴근설정 | `/settings/attendance-settings` | ✅ MOCK_DEPARTMENTS | 🔄 부분 | 🟡 부분완료 | 부서 API 연동 필요 |
| L-6 | 휴가정책 | `/settings/leave-policy` | ❌ | ✅ GET/PUT | ✅ 완료 | 데이터 확인 |
| L-7 | 근무일정 | `/settings/work-schedule` | ❌ | ✅ GET/PUT | ✅ 완료 | 데이터 확인 |
| L-8 | 알림설정 | `/settings/notification-settings` | ❌ (fallback만) | ✅ GET/PUT | ✅ 완료 | 데이터 확인 |
| L-9 | 팝업관리 | `/settings/popup-management` | ⚠️ MOCK_POPUPS (미사용) | ✅ CRUD | ✅ 완료 | Mock 제거 |
| L-10 | 회사정보 | `/company-info` | ❌ | ✅ GET/PUT | ✅ 완료 | 데이터 확인 |
| L-11 | 구독관리 | `/subscription` | ❌ | ✅ 조회/취소 | ✅ 완료 | 데이터 확인 |
#### 🛠️ 작업 계획 상세
**🔴 API 개발 필요 (1개)**
| 페이지 | 필요한 API | 모델/테이블 | 우선순위 |
|--------|-----------|------------|---------|
| L-2 권한관리 | `/api/v1/roles` CRUD | roles, role_permissions | 높음 |
**✅ API 개발 완료 (2개) - 2025-12-30**
| 페이지 | API | 모델/테이블 | 비고 |
|--------|-----|------------|------|
| L-3 직급관리 | `/api/v1/positions?type=rank` | positions | 통합 테이블 |
| L-4 직책관리 | `/api/v1/positions?type=title` | positions | 통합 테이블 |
**🟡 부분 연동 필요 (1개)**
| 페이지 | 현재 상태 | 필요 작업 |
|--------|----------|----------|
| L-5 출퇴근설정 | 설정 API 연동 완료 | 부서 목록 `getDepartments()` API 연동 필요 (MOCK_DEPARTMENTS 제거) |
**⚠️ Mock 제거 필요 (1개)**
| 파일 | 현재 상태 | 작업 |
|------|----------|------|
| `PopupManagement/types.ts` | MOCK_POPUPS 정의됨 (실제 미사용) | 불필요한 Mock 코드 제거 |
#### 📊 API 연동 완료 페이지 상세
| # | 페이지 | actions.ts 함수 | API Endpoint |
|---|--------|----------------|--------------|
| L-1 | 계정관리 | getBankAccounts, createBankAccount, updateBankAccount, deleteBankAccount | `/api/v1/bank-accounts` |
| L-6 | 휴가정책 | getLeavePolicy, updateLeavePolicy | `/api/v1/leave-policy` |
| L-7 | 근무일정 | getWorkSetting, updateWorkSetting | `/api/v1/settings/work` |
| L-8 | 알림설정 | getNotificationSettings, saveNotificationSettings | `/api/v1/settings/notifications` |
| L-9 | 팝업관리 | getPopups, getPopupById, createPopup, updatePopup, deletePopup | `/api/v1/popups` |
| L-10 | 회사정보 | getCompanyInfo, updateCompanyInfo | `/api/v1/tenants` |
| L-11 | 구독관리 | getSubscriptionData, cancelSubscription, requestDataExport | `/api/v1/subscriptions/*` |
#### 🗂️ 파일 구조
```
components/settings/
├── AccountManagement/
│ ├── index.tsx ← ✅ API 연동 완료
│ ├── actions.ts ← ✅ bank-accounts CRUD
│ ├── AccountDetail.tsx ← ✅ 상세/수정 API 연동
│ └── types.ts
├── PermissionManagement/
│ ├── index.tsx ← ❌ localStorage + defaultPermissions
│ ├── PermissionDetail.tsx
│ └── types.ts ← ❌ actions.ts 없음
├── RankManagement/
│ ├── index.tsx ← ✅ API 연동 완료 (positions API type=rank)
│ ├── RankDialog.tsx ← ✅ 수정 완료
│ └── types.ts ← ✅ 타입 정의 완료
├── TitleManagement/
│ ├── index.tsx ← ✅ API 연동 완료 (positions API type=title)
│ ├── TitleDialog.tsx ← ✅ 수정 완료
│ └── types.ts ← ✅ 타입 정의 완료
├── AttendanceSettingsManagement/
│ ├── index.tsx ← 🔄 부분 연동 (MOCK_DEPARTMENTS 사용)
│ ├── actions.ts ← ✅ 설정 API 연동
│ └── types.ts ← ✅ MOCK_DEPARTMENTS 정의
├── LeavePolicyManagement/
│ ├── index.tsx ← ✅ API 연동 완료
│ ├── actions.ts ← ✅ leave-policy GET/PUT
│ └── types.ts
├── WorkScheduleManagement/
│ ├── index.tsx ← ✅ API 연동 완료
│ ├── actions.ts ← ✅ settings/work GET/PUT
│ └── types.ts
├── NotificationSettings/
│ ├── index.tsx ← ✅ API 연동 완료
│ ├── actions.ts ← ✅ settings/notifications GET/PUT
│ └── types.ts
├── PopupManagement/
│ ├── index.tsx ← ✅ API 연동 완료
│ ├── PopupList.tsx ← ✅ 목록 API 연동
│ ├── PopupForm.tsx ← ✅ 등록/수정 API 연동
│ ├── actions.ts ← ✅ popups CRUD
│ └── types.ts ← ⚠️ MOCK_POPUPS (미사용, 제거 대상)
├── CompanyInfoManagement/
│ ├── index.tsx ← ✅ API 연동 완료
│ ├── actions.ts ← ✅ tenants GET/PUT
│ └── types.ts
└── SubscriptionManagement/
├── SubscriptionManagement.tsx ← ✅ API 연동 완료
├── actions.ts ← ✅ subscriptions API
└── types.ts
```
---
## 3. 잔여 Mock 파일 (정리 완료)
> **2025-12-29 정리 완료**: 모든 미사용 Mock 파일 삭제, 유틸리티만 유지
### 3.1 Production/Quality Mock 파일 (✅ 정리 완료)
**삭제된 파일 (4개):**
```
react/src/components/
├── production/ProductionDashboard/mockData.ts ← ✅ 삭제 (미사용)
├── production/WorkOrders/mockData.ts ← ✅ 삭제 (미사용)
├── production/WorkResults/mockData.ts ← ✅ 삭제 (미사용)
└── reports/mockData.ts ← ✅ 삭제 (formatAmount 중복)
```
**유틸리티만 유지 (1개):**
```
react/src/components/
└── quality/InspectionManagement/mockData.ts ← ✅ 유틸리티만 유지
- inspectionItemsTemplate, inspectionTypeLabels
- statusColorMap, judgmentColorMap
- judgeMeasurement()
```
### 3.2 Settings Mock 데이터 (Phase L)
```
react/src/components/settings/
├── PermissionManagement/index.tsx ← defaultPermissions (하드코딩, 삭제 대상)
├── RankManagement/index.tsx ← defaultRanks (하드코딩, 삭제 대상)
├── TitleManagement/index.tsx ← defaultTitles (하드코딩, 삭제 대상)
├── AttendanceSettingsManagement/
│ └── types.ts ← MOCK_DEPARTMENTS (API 연동 필요)
└── PopupManagement/
└── types.ts ← MOCK_POPUPS (미사용, 제거 대상)
```
---
## 4. 참고 문서
- **API 스펙**: http://api.sam.kr/api-docs
- **원본 계획**: `react-mock-to-api-migration-plan.md`
- **API 개발 계획**: `erp-api-development-plan-d1.0-changes.md`
- **표준 구현 참조**: `/sales/pricing-management`
---
## 5. 변경 이력
| 날짜 | 작업 | 상세 내용 |
|------|------|----------|
| 2025-12-29 | 잔여 Mock 파일 정리 완료 | 미사용 Mock 파일 4개 삭제 (ProductionDashboard, WorkOrders, WorkResults, reports). InspectionManagement/mockData.ts 유틸리티만 유지 (inspectionItemsTemplate, statusColorMap, judgmentColorMap, judgeMeasurement). 304→68줄 감소 |
| 2025-12-29 | Phase L 설정 페이지 분석 완료 | 11개 설정 페이지 분석: 7개 API 연동 완료 (계정관리, 휴가정책, 근무일정, 알림설정, 팝업관리, 회사정보, 구독관리), 3개 API 개발 필요 (권한/직급/직책), 1개 부분 연동 필요 (출퇴근설정-부서). Mock 데이터: MOCK_DEPARTMENTS, MOCK_POPUPS, defaultPermissions/Ranks/Titles |
| 2025-12-29 | 검사 테이블 통합 및 출하 대시보드 수정 | **검사 시스템 통합**: 레거시 검사 모델 삭제 (MaterialInspection, MaterialInspectionItem, MaterialReceipt) → 통합 검사 모델 추가 (Inspection.php - IQC/PQC/FQC), 품목 입고 모델 추가 (ItemReceipt.php). **출하 대시보드**: ShipmentService stats() 프론트엔드 호환 필드 추가 (today_shipment_count, scheduled_count, shipping_count, urgent_count). 더미 데이터 tenant_id = 287로 수정 |
| 2025-12-29 | api 프로젝트 게시판 메뉴 자동 연동 | 테넌트 게시판 생성/수정/삭제 시 메뉴 자동 연동. `MenuService::createMenuForBoard()`, `updateMenuForBoard()`, `deleteMenuForBoard()` 추가. `BoardService`에서 호출. 부모 메뉴 `/board` 하위 배치 |
| 2025-12-29 | K-4 문의 댓글 API 연동 완료 | 댓글 CRUD API 연동 (getComments, createComment, updateComment, deleteComment). BoardComment 모델 replies() 추가, PostService user eager loading 추가, user.id localStorage 저장으로 본인 글 수정/삭제 버튼 표시 |
| 2025-12-29 | Phase J 게시판 시스템 React 연동 완료 | J-1~J-3 완료: `board/actions.ts` 생성 (getPosts, getPost, createPost, updatePost, deletePost). BoardList, BoardDetail, BoardForm 모두 API 연동. 라우트 변경: `/board/[id]` → `/board/[boardCode]/[postId]`. Toast sonner 통일, MOCK_BOARDS 완전 제거 |
| 2025-12-29 | Phase K 고객센터 API 연동 완료 확인 | K-1~K-4 모두 `shared/actions.ts` 통해 시스템 게시판 API 호출. FAQList, NoticeList, EventList, InquiryList/Form 모두 `getPosts()` 사용 |
| 2025-12-28 | 시스템 게시판 API 개발 완료 | `/api/v1/system-boards/*` 엔드포인트 12개 추가 (게시판 3개 + 게시글 5개 + 댓글 4개), SystemBoardController, SystemPostController, Swagger 문서 |
| 2025-12-27 | 게시판 API 아키텍처 개선 | 시스템/테넌트 게시판 엔드포인트 분리 (`/system-boards/{code}` vs `/boards/{code}`), ID 기반에서 code 기반 URL로 통일, 메뉴 자동 생성 기능 추가 예정 |
| 2025-12-27 | 종합분석 승인/반려 버그 수정 | `ComprehensiveAnalysisService::getTodayIssue()` - 현재 사용자가 결재자인 문서만 표시하도록 수정. 이전에는 테넌트의 모든 대기 결재가 표시되어 "결재 순서가 아닙니다" 오류 발생 |
| 2025-12-27 | 테스트 데이터 수정 | `ComprehensiveAnalysisSeeder` - User 33 (홍킬동) 기준으로 변경 |
| 2025-12-29 | 프로필 이미지 업로드 API 연동 | **API**: `TenantUserProfileService::updateMe()` 수정 - `profile_photo_path`, `display_name` 고정 필드 직접 처리. **React**: `uploadProfileImage()` 액션 추가, `handleImageUpload()` API 연동. **URL 수정**: `types.ts`에서 `/storage/tenants/{path}` 경로 사용. **심볼릭 링크**: `storage/app/public/tenants -> ../tenants` 추가 |
| 2025-12-27 | 테스트 환경 정보 추가 | 테넌트/사용자 정보, 로그인 정보, 주의사항 추가 |