master_api_sum

- 2025-12-28 고객센터 시스템 게시판 API 연동 수정 기록
- 날짜 범위 필터 초기값 변경 내용 문서화

fix: 고객센터 목록 날짜 범위 초기값 변경

- EventList, InquiryList, NoticeList 날짜 범위 초기값 빈 문자열로 변경
- 페이지 진입 시 전체 데이터 조회 가능하도록 수정

feat: 1:1 문의 댓글 기능 API 연동

- 댓글 CRUD API 함수 구현 (shared/actions.ts)
  - getComments, createComment, updateComment, deleteComment
- CommentApiData 타입 및 transformApiToComment 변환 함수 추가
- InquiryDetail 컴포넌트 callback props 방식으로 변경
- user.id localStorage 저장으로 본인 글 수정/삭제 버튼 표시
- page.tsx에서 댓글 API 호출 및 상태 관리

feat(WEB): 게시판 시스템 Mock → API 연동 (Phase J)

- BoardList: getPosts, getMyPosts API 연동
- BoardDetail: getPost API 연동, 새 라우트 구조 적용
- BoardForm: getBoards, createPost, updatePost API 연동
- 라우트 변경: /board/[id] → /board/[boardCode]/[postId]
- Toast 라이브러리 sonner로 통일
- MOCK_BOARDS 완전 제거, types.ts 정리

chore: 작업 현황 업데이트

refactor: BoardForm 부서 Mock 데이터 분리

- types.ts에서 MOCK_DEPARTMENTS 제거
- BoardForm 내부에 임시 Mock 데이터 정의
- TODO: API에서 부서 목록 연동 필요

feat: 종합현황 반려 사유 입력 Dialog 추가

- 반려 시 사유 입력 Dialog 표시
- 사유 미입력 시 toast 에러 메시지
- rejectIssue 함수에 reason 파라미터 추가

feat: 고객센터 Mock → API 연동 완료

- shared/actions.ts: 공통 게시글 API 액션 추가
- shared/types.ts: 공통 타입 정의
- InquiryList: Mock → API 연동, transform 함수 추가
- FAQList: Mock → API 연동, transform 함수 추가
- 상세 페이지: API 연동 (notices, events, inquiries)
- 각 types.ts: transformPost 함수 추가

fix: 고객센터 board_code 불일치 수정

- 공지사항: notice → notices
- 이벤트: event → events
- DB 시스템 게시판 코드와 일치하도록 수정

feat: 결재 문서 작성 파일 첨부 기능 구현

- UploadedFile 타입 추가 및 ProposalData/ExpenseReportData에 uploadedFiles 필드 추가
- uploadFiles() 함수 구현 (/api/v1/files/upload API 연동)
- createApproval/updateApproval에서 파일 업로드 후 저장 처리
- ProposalForm/ExpenseReportForm에 첨부파일 UI 개선
  - 기존 업로드 파일 표시 (파일 보기/삭제 기능)
  - 새 첨부 파일 목록 표시 및 삭제 기능
- DraftBox에서 결재자 부서/직책 정보 표시
- 문서 상세 모달에서 실제 API 데이터 표시 (목업 데이터 제거)
- 수정 모드 상신 시 PATCH 메서드 사용 (405 에러 수정)

feat: [mock-migration] Phase J-4 게시판 관리 Mock → API 연동 완료

- types.ts: BoardApiData, BoardExtraSettings API 타입 추가
- actions.ts: Server Actions 생성 (CRUD, 변환 함수)
- index.tsx: Mock 데이터 → API 호출로 전환
- [id]/page.tsx: 상세 페이지 API 연동
- [id]/edit/page.tsx: 수정 페이지 API 연동
- new/page.tsx: 등록 페이지 API 연동

주요 정책:
- /boards/tenant 엔드포인트로 테넌트 게시판만 조회
- 수정 시 board_code 전송 안함 (코드 변경 불가)
- extra_settings 내 target/target_name 저장

feat: 매입유형(purchase_type) 필드 저장 기능 추가

- actions.ts: API 응답/요청에 purchase_type 매핑 추가
- PurchaseDetail.tsx: 저장 시 purchaseType 포함하도록 수정

fix(salary): 직책/직급 매핑 수정 (사원관리 기준 통일)

- transformApiToFrontend: position → job_title_label (직책), rank → rank (직급)
- transformApiToDetail: 동일하게 수정
- 기존 잘못된 매핑: position_label(직위) → 직책, job_title_label(직책) → 직급

feat: [mock-migration] Phase M 잔여 Mock/TODO 제거 완료

- M-1: 매입 상세 모달 MOCK_ACCOUNTS, MOCK_VENDORS → API 연동
- M-2: 직원 관리 파일 업로드 API 연동 (uploadProfileImage)
- M-4: 결재 문서 생성 MOCK_EMPLOYEES 제거 → getEmployees API
- M-5: 결재함/기안함 console.log 제거 → 승인/반려 API 연동
- M-6: 구독 관리 TODO 제거 → requestDataExport, cancelSubscription
- M-7: 계정 정보 TODO 제거 → withdrawAccount, suspendTenant

docs: 휴가관리 사용현황 동기화 수정 작업 기록

- 2025-12-26 휴가 사용현황 동기화 수정 내용 추가
- fetchUsageData 호출 추가, 부여일수 계산 수정 문서화

feat: Phase G 생산관리/품질검사 Mock → API 연동 완료

G-1 작업지시관리:
- WorkOrderList: getWorkOrders, getWorkOrderStats API
- WorkOrderDetail: getWorkOrderById API
- WorkOrderCreate: createWorkOrder API
- SalesOrderSelectModal: getSalesOrdersForWorkOrder API

G-2 작업실적관리:
- WorkResultList: getWorkResults, getWorkResultStats API

G-3 생산대시보드:
- actions.ts 생성, getDashboardData API

G-4 작업자화면:
- actions.ts 생성
- getMyWorkOrders, completeWorkOrder API
- MaterialInputModal: getMaterialsForWorkOrder, registerMaterialInput API
- ProcessDetailSection: getProcessSteps, requestInspection API

G-5 품질검사:
- actions.ts 생성
- InspectionList: getInspections, getInspectionStats API
- InspectionDetail: getInspectionById, updateInspection API
- InspectionCreate: createInspection API

fix: [vacation] 휴가 사용현황 동기화 및 부여일수 계산 수정

- 승인 후 fetchUsageData() 호출 추가로 사용현황 즉시 반영
- baseVacation: 동적 totalDays → 고정 '15일' (기본 연차)
- grantedVacation: 하드코딩 '0일' → Math.max(0, totalDays-15) 계산
- useCallback dependencies에 fetchUsageData 추가

feat: Phase I Excel/PDF 다운로드 API 연동

- ReceivablesStatus: 채권현황 엑셀 다운로드 API 연동
- VendorLedger: 거래처원장 목록 엑셀, 상세 PDF 다운로드 API 연동
- DailyReport: 일일일보 엑셀 다운로드 API 연동
- Blob 다운로드 패턴 및 toast 알림 적용

feat: L-2 견적 관리 Mock → API 연동

## 변경사항
- SAMPLE_QUOTES Mock 데이터 제거
- Server Actions 생성 (CRUD + 특수 기능 14개)
- QuoteManagementClient 분리 (SSR/CSR 패턴)
- Quote 타입 및 변환 함수 정의

## 추가된 API 연동
- 목록/상세/등록/수정/삭제/일괄삭제
- 최종확정/확정취소/수주전환
- PDF 생성/이메일/카카오 발송
- 견적번호 미리보기/요약 통계

feat: 공정관리 페이지 및 컴포넌트 추가

- 공정관리 목록/상세/등록/수정 페이지 구현
- ProcessListClient, ProcessDetail, ProcessForm 컴포넌트 추가
- ProcessWorkLogPreviewModal, RuleModal 추가
- MobileCard 공통 컴포넌트 추가
- WorkLogModal.tsx 개선
- .gitignore 업데이트

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
(cherry picked from commit f0c0de2ecd)

chore: React 공통 컴포넌트 업데이트

- VacationManagement: API 연동 개선
- WorkOrders: 작업자 선택 모달 개선
- TypeScript 빌드 설정 업데이트

feat: I-8 휴가 정책 관리 API 연동

- actions.ts: 휴가 정책 CRUD Server Actions
- LeavePolicyManagement 컴포넌트 API 연동

feat: I-7 종합분석 API 연동

- actions.ts: 종합분석 조회 Server Actions
- ComprehensiveAnalysis 컴포넌트 API 연동

feat: I-6 일일 생산현황 API 연동

- actions.ts: 일일 리포트 조회 Server Actions
- DailyReport 컴포넌트 API 연동

feat: I-5 미수금 현황 API 연동

- actions.ts: 미수금 조회 Server Actions
- ReceivablesStatus 컴포넌트 API 연동

feat: I-4 거래통장 조회 API 연동

- actions.ts: 은행 거래내역 조회 Server Actions
- BankTransactionInquiry 컴포넌트 API 연동

feat: I-3 법인카드 사용내역 API 연동

- actions.ts: 카드 거래내역 조회 Server Actions
- CardTransactionInquiry 컴포넌트 API 연동

feat: I-2 거래처 원장 API 연동

- actions.ts: 거래처 원장 조회 Server Actions
- VendorLedger 컴포넌트 API 연동
- VendorLedgerDetail 상세 조회 연동

feat: H-3 출하 관리 API 연동

- actions.ts: Server Actions (CRUD, 상태 변경)
- ShipmentList: 출하 목록 API 연동
- ShipmentCreate: 출하 등록 API 연동
- ShipmentEdit: 출하 수정 API 연동
- ShipmentDetail: 출하 상세 API 연동

feat: G-2 작업실적 관리 API 연동

- types.ts API 타입 추가 (WorkResultApi, WorkResultStatsApi 등)
- transformApiToFrontend/transformFrontendToApi 변환 함수 추가
- actions.ts 서버 액션 생성 (8개 함수)
- index.ts 액션 exports 추가

Server Actions:
- getWorkResults: 목록 조회 (페이징, 필터링)
- getWorkResultStats: 통계 조회
- getWorkResultById: 상세 조회
- createWorkResult: 등록
- updateWorkResult: 수정
- deleteWorkResult: 삭제
- toggleInspection: 검사 상태 토글
- togglePackaging: 포장 상태 토글

fix: StockStatusList Hook 순서 오류 수정

- 조건부 return 전에 모든 Hooks(useCallback, useMemo) 선언
- React Rules of Hooks 준수

feat: H-2 재고현황 Mock → API 연동 완료

- StockStatusDetail.tsx: 상세 조회 API 연동
- StockStatusList.tsx: 목록 조회 API 연동 (이전 세션)
- actions.ts: 재고 현황 Server Actions 구현

feat: H-1 입고 관리 Mock → API 연동 완료

- ReceivingDetail.tsx: 상세 조회 및 입고처리 API 연동
- ReceivingProcessDialog.tsx: 폼 데이터 API 전달 구조로 변경
- InspectionCreate.tsx: 검사 대상 목록 API 조회 적용
- ReceivingList.tsx: 미사용 타입 import 정리

feat: G-1 작업지시 관리 API 연동

- actions.ts 서버 액션 11개 함수 구현
- types.ts API 타입 및 변환 함수 추가
- index.ts 액션 함수 export 추가

Server Actions:
- getWorkOrders (목록)
- getWorkOrderStats (통계)
- getWorkOrderById (상세)
- createWorkOrder (등록)
- updateWorkOrder (수정)
- deleteWorkOrder (삭제)
- updateWorkOrderStatus (상태변경)
- assignWorkOrder (담당자배정)
- toggleBendingField (벤딩토글)
- addWorkOrderIssue (이슈등록)
- resolveWorkOrderIssue (이슈해결)

feat: I-1 미지급비용 관리 React 연동

- Server Actions 패턴으로 API 연동 구현 (actions.ts)
- Mock 데이터 제거, props 기반 데이터 주입
- Server Component로 초기 데이터 로딩
- 삭제/지급일 변경 등 CRUD 액션 연동

feat: HR 모듈 API 연동 완료 및 휴가관리 버그 수정

## 휴가관리 (VacationManagement)
- 휴가 부여 API 연동: createLeaveGrant 호출 추가
- 휴가 신청 시 선택된 사원 userId 전달 (잔여휴가 오류 수정)
- LeaveType 타입 분리 (VacationType과 구분)
- VacationGrantDialog에 부여일(grantDate) 필드 추가

## 근태관리 (AttendanceManagement)
- actions.ts 추가: API 호출 함수 분리
- 타입 정의 확장 및 개선

## 기타 개선
- CardManagement, SalaryManagement: actions 개선
- DocumentCreate: 전자결재 actions 및 index 개선
- GoogleMap: 지도 컴포넌트 개선

feat: Phase E 인사관리 Mock → API 마이그레이션

- E-1 법인카드 관리 API 연동
  - actions.ts 생성 (getCards, createCard, updateCard, deleteCard, toggleCardStatus)
  - CardForm, 페이지 컴포넌트 API 연동
- E-2 급여 관리 API 연동
  - actions.ts 생성 (getSalaries, getSalary, updateSalaryStatus, bulkUpdateSalaryStatus)
  - 급여 목록 컴포넌트 API 연동
- 결재 시스템 actions.ts 추가 (ApprovalBox, DraftBox, ReferenceBox, DocumentCreate)
- DepositManagement actions.ts 페이지네이션 응답 구조 수정
- 부서 관리, 휴가 관리 actions.ts 개선
- API URL에 /api prefix 추가

회계 및 설정 모듈 리팩토링: actions 분리, 타입 정의 개선

feat: 휴가 부여현황 Mock 데이터 제거 및 API 연동

- getLeaveGrants, createLeaveGrant, deleteLeaveGrant API 함수 추가
- LeaveGrantType, LeaveGrantRecord, CreateLeaveGrantRequest 타입 추가
- generateGrantData Mock 함수 제거
- fetchGrantData로 실제 API 호출
- grantData 상태를 API 데이터로 갱신

feat: 휴가 사용현황 Mock 데이터 제거 및 API 연동

- getLeaveBalances() API 함수 추가
- LeaveBalanceRecord, GetLeaveBalancesParams 타입 정의
- generateUsageData() Mock 함수 제거
- fetchUsageData()로 실제 API 호출
- hireDate 날짜 포맷팅 예외 처리 추가

feat: C-4 부서 관리 Mock → API 연동

- actions.ts 생성 (getDepartmentTree, createDepartment, updateDepartment, deleteDepartment, deleteDepartmentsMany)
- index.tsx Mock 데이터 제거 및 API 연동
- 트리 구조 CRUD 완전 연동

⚠️ .env.local에 API_URL=https://api.sam.kr/api 설정 필요 (Server Actions용)

feat: C-3 휴가 관리 Mock → API 연동

- actions.ts 생성: getLeaves, createLeave, approveLeave, rejectLeave, cancelLeave 등
- index.tsx 수정: 신청현황 탭 Mock 데이터 → API 호출 전환
- 일괄 승인/반려 API 연동 (approveLeavesMany, rejectLeavesMany)
- 휴가 신청 다이얼로그 createLeave API 연동

feat: C-2 근태 관리 Mock → API 연동

- actions.ts 생성 (checkIn/checkOut/getTodayAttendance)
- GoogleMap.tsx userLocation 콜백 추가
- page.tsx Mock console.log 제거 + API 연동
- 처리중 상태 및 버튼 텍스트 추가

feat: C-1 직원 관리 Mock → API 연동

- actions.ts 생성 (CRUD + 통계 + 일괄삭제 Server Actions)
- utils.ts 생성 (API ↔ Frontend 데이터 변환)
- index.tsx Mock 데이터 제거, API 연동
- [id]/page.tsx 상세 페이지 API 연동
- [id]/edit/page.tsx 수정 페이지 API 연동
- new/page.tsx 등록 페이지 API 연동

API Endpoints:
- GET/POST /api/v1/employees
- GET/PATCH/DELETE /api/v1/employees/{id}
- POST /api/v1/employees/bulk-delete
- GET /api/v1/employees/stats

feat: Daum 우편번호 서비스 연동 및 악성채권 UI 개선

- useDaumPostcode 공통 훅 생성 (Daum Postcode API 연동)
- 우편번호 찾기 기능 적용: 악성채권, 거래처, 직원, 회사정보, 주문등록
- 악성채권 페이지 토글 순서 변경 (라벨 → 토글)
- 악성채권 토글 기능 수정 (매출/매입 → 등록/해제)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
(cherry picked from commit 41ef0bdd86)

feat: A-2 팝업 관리 Mock → API 연동

- 상세 조회 페이지: MOCK_POPUPS → getPopupById() API
- 수정 페이지: MOCK_POPUPS → getPopupById() API + 로딩 상태
- PopupForm: console.log → createPopup/updatePopup Server Actions
- 삭제 기능: deletePopup() API 연동 + 로딩 상태
- 데이터 변환 유틸리티 추가 (API ↔ Frontend)

feat: A-1 악성채권 관리 Mock → API 연동 완료

- 상세 페이지 서버 컴포넌트 전환 ([id]/page.tsx, [id]/edit/page.tsx)
- BadDebtDetail.tsx: CRUD API 연동 (createBadDebt, updateBadDebt, deleteBadDebt)
- actions.ts: 메모 API 추가 (addBadDebtMemo, deleteBadDebtMemo)

feat: 매입 관리 Mock → API 전환 및 세금계산서 토글 연동

- index.tsx: Mock 데이터 제거, API 데이터 로딩으로 전환
- actions.ts: getPurchases(), togglePurchaseTaxInvoice() 서버 액션 추가
- vendorOptions 빈 문자열 필터링 (Select.Item 에러 수정)

feat: 매출 상세 페이지 API 연동

- 목데이터(MOCK_VENDORS, fetchSalesDetail) 제거
- getSaleById, createSale, updateSale, deleteSale API 연동
- getClients로 거래처 목록 로드
- 상태 관리 개선 (clients, isLoading, isSaving)

fix: Mock 데이터를 실제 API 연동으로 복원

- 팝업 관리, 결제 내역, 구독 관리, 알림 설정 API 연동
- 입금/출금/거래처 관리 API 연동
- page.tsx를 서버 컴포넌트로 변환
- actions.ts 서버 액션 추가
This commit is contained in:
2025-12-24 14:04:36 +09:00
committed by byeongcheolryu
parent 69832b4c58
commit 8af838ab55
276 changed files with 62126 additions and 7007 deletions

View File

@@ -0,0 +1,390 @@
/**
* 결재함 서버 액션
*
* API Endpoints:
* - GET /api/v1/approvals/inbox - 결재함 목록 조회
* - GET /api/v1/approvals/inbox/summary - 결재함 통계
* - POST /api/v1/approvals/{id}/approve - 승인 처리
* - POST /api/v1/approvals/{id}/reject - 반려 처리
*/
'use server';
import { cookies } from 'next/headers';
import type { ApprovalRecord, ApprovalType, ApprovalStatus } from './types';
// ============================================
// API 응답 타입 정의
// ============================================
interface ApiResponse<T> {
success: boolean;
data: T;
message: string;
}
interface PaginatedResponse<T> {
current_page: number;
data: T[];
total: number;
per_page: number;
last_page: number;
}
interface InboxSummary {
total: number;
pending: number;
approved: number;
rejected: number;
}
// API 응답의 결재 문서 타입
interface InboxApiData {
id: number;
document_number: string;
title: string;
status: string;
form?: {
id: number;
name: string;
code: string;
category: string;
};
drafter?: {
id: number;
name: string;
position?: string;
department?: { name: string };
};
steps?: InboxStepApiData[];
created_at: string;
updated_at: string;
}
interface InboxStepApiData {
id: number;
step_order: number;
step_type: string;
approver_id: number;
approver?: {
id: number;
name: string;
position?: string;
department?: { name: string };
};
status: string;
processed_at?: string;
comment?: string;
}
// ============================================
// 헬퍼 함수
// ============================================
/**
* API 헤더 생성
*/
async function getApiHeaders(): Promise<HeadersInit> {
const cookieStore = await cookies();
const token = cookieStore.get('access_token')?.value;
return {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': token ? `Bearer ${token}` : '',
'X-API-KEY': process.env.API_KEY || '',
};
}
/**
* API 상태 → 프론트엔드 상태 변환
*/
function mapApiStatus(apiStatus: string): ApprovalStatus {
const statusMap: Record<string, ApprovalStatus> = {
'pending': 'pending',
'approved': 'approved',
'rejected': 'rejected',
};
return statusMap[apiStatus] || 'pending';
}
/**
* 양식 카테고리 → 결재 유형 변환
*/
function mapApprovalType(formCategory?: string): ApprovalType {
const typeMap: Record<string, ApprovalType> = {
'expense_report': 'expense_report',
'proposal': 'proposal',
'expense_estimate': 'expense_estimate',
};
return typeMap[formCategory || ''] || 'proposal';
}
/**
* 문서 상태 텍스트 변환
*/
function mapDocumentStatus(status: string): string {
const statusMap: Record<string, string> = {
'pending': '진행중',
'approved': '완료',
'rejected': '반려',
};
return statusMap[status] || '진행중';
}
/**
* API 데이터 → 프론트엔드 데이터 변환
*/
function transformApiToFrontend(data: InboxApiData): ApprovalRecord {
// 현재 사용자의 결재 단계 정보 추출
const currentStep = data.steps?.find(s => s.step_type === 'approval');
const approver = currentStep?.approver;
const stepStatus = currentStep?.status || 'pending';
return {
id: String(data.id),
documentNo: data.document_number,
approvalType: mapApprovalType(data.form?.category),
documentStatus: mapDocumentStatus(data.status),
title: data.title,
draftDate: data.created_at.replace('T', ' ').substring(0, 16),
drafter: data.drafter?.name || '',
drafterDepartment: data.drafter?.department?.name || '',
drafterPosition: data.drafter?.position || '',
approvalDate: currentStep?.processed_at?.replace('T', ' ').substring(0, 16),
approver: approver?.name,
status: mapApiStatus(stepStatus),
priority: 'normal',
createdAt: data.created_at,
updatedAt: data.updated_at,
};
}
// ============================================
// API 함수
// ============================================
/**
* 결재함 목록 조회
*/
export async function getInbox(params?: {
page?: number;
per_page?: number;
search?: string;
status?: string;
approval_type?: string;
sort_by?: string;
sort_dir?: 'asc' | 'desc';
}): Promise<{ data: ApprovalRecord[]; total: number; lastPage: number }> {
try {
const headers = await getApiHeaders();
const searchParams = new URLSearchParams();
if (params?.page) searchParams.set('page', String(params.page));
if (params?.per_page) searchParams.set('per_page', String(params.per_page));
if (params?.search) searchParams.set('search', params.search);
if (params?.status && params.status !== 'all') {
searchParams.set('status', params.status);
}
if (params?.approval_type && params.approval_type !== 'all') {
searchParams.set('approval_type', params.approval_type);
}
if (params?.sort_by) searchParams.set('sort_by', params.sort_by);
if (params?.sort_dir) searchParams.set('sort_dir', params.sort_dir);
const url = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/inbox?${searchParams.toString()}`;
const response = await fetch(url, {
method: 'GET',
headers,
cache: 'no-store',
});
if (!response.ok) {
console.error('[ApprovalBoxActions] GET inbox error:', response.status);
return { data: [], total: 0, lastPage: 1 };
}
const result: ApiResponse<PaginatedResponse<InboxApiData>> = await response.json();
if (!result.success || !result.data?.data) {
console.warn('[ApprovalBoxActions] No data in response');
return { data: [], total: 0, lastPage: 1 };
}
return {
data: result.data.data.map(transformApiToFrontend),
total: result.data.total,
lastPage: result.data.last_page,
};
} catch (error) {
console.error('[ApprovalBoxActions] getInbox error:', error);
return { data: [], total: 0, lastPage: 1 };
}
}
/**
* 결재함 통계 조회
*/
export async function getInboxSummary(): Promise<InboxSummary | null> {
try {
const headers = await getApiHeaders();
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/inbox/summary`,
{
method: 'GET',
headers,
cache: 'no-store',
}
);
if (!response.ok) {
console.error('[ApprovalBoxActions] GET inbox/summary error:', response.status);
return null;
}
const result: ApiResponse<InboxSummary> = await response.json();
if (!result.success || !result.data) {
return null;
}
return result.data;
} catch (error) {
console.error('[ApprovalBoxActions] getInboxSummary error:', error);
return null;
}
}
/**
* 승인 처리
*/
export async function approveDocument(id: string, comment?: string): Promise<{ success: boolean; error?: string }> {
try {
const headers = await getApiHeaders();
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}/approve`,
{
method: 'POST',
headers,
body: JSON.stringify({ comment: comment || '' }),
}
);
const result = await response.json();
if (!response.ok || !result.success) {
return {
success: false,
error: result.message || '승인 처리에 실패했습니다.',
};
}
return { success: true };
} catch (error) {
console.error('[ApprovalBoxActions] approveDocument error:', error);
return {
success: false,
error: '서버 오류가 발생했습니다.',
};
}
}
/**
* 반려 처리
*/
export async function rejectDocument(id: string, comment: string): Promise<{ success: boolean; error?: string }> {
try {
if (!comment?.trim()) {
return {
success: false,
error: '반려 사유를 입력해주세요.',
};
}
const headers = await getApiHeaders();
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/approvals/${id}/reject`,
{
method: 'POST',
headers,
body: JSON.stringify({ comment }),
}
);
const result = await response.json();
if (!response.ok || !result.success) {
return {
success: false,
error: result.message || '반려 처리에 실패했습니다.',
};
}
return { success: true };
} catch (error) {
console.error('[ApprovalBoxActions] rejectDocument error:', error);
return {
success: false,
error: '서버 오류가 발생했습니다.',
};
}
}
/**
* 일괄 승인 처리
*/
export async function approveDocumentsBulk(ids: string[], comment?: string): Promise<{ success: boolean; failedIds?: string[]; error?: string }> {
const failedIds: string[] = [];
for (const id of ids) {
const result = await approveDocument(id, comment);
if (!result.success) {
failedIds.push(id);
}
}
if (failedIds.length > 0) {
return {
success: false,
failedIds,
error: `${failedIds.length}건의 승인 처리에 실패했습니다.`,
};
}
return { success: true };
}
/**
* 일괄 반려 처리
*/
export async function rejectDocumentsBulk(ids: string[], comment: string): Promise<{ success: boolean; failedIds?: string[]; error?: string }> {
if (!comment?.trim()) {
return {
success: false,
error: '반려 사유를 입력해주세요.',
};
}
const failedIds: string[] = [];
for (const id of ids) {
const result = await rejectDocument(id, comment);
if (!result.success) {
failedIds.push(id);
}
}
if (failedIds.length > 0) {
return {
success: false,
failedIds,
error: `${failedIds.length}건의 반려 처리에 실패했습니다.`,
};
}
return { success: true };
}

View File

@@ -1,7 +1,6 @@
'use client';
import { useState, useMemo, useCallback } from 'react';
import { format } from 'date-fns';
import { useState, useMemo, useCallback, useEffect, useTransition } from 'react';
import {
FileCheck,
Check,
@@ -11,10 +10,21 @@ import {
Files,
Edit,
} from 'lucide-react';
import { toast } from 'sonner';
import {
getInbox,
getInboxSummary,
approveDocument,
rejectDocument,
approveDocumentsBulk,
rejectDocumentsBulk,
} from './actions';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Badge } from '@/components/ui/badge';
import { TableRow, TableCell } from '@/components/ui/table';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import {
Select,
SelectContent,
@@ -59,46 +69,17 @@ import {
APPROVAL_STATUS_COLORS,
} from './types';
// ===== Mock 데이터 생성 =====
const generateApprovalData = (): ApprovalRecord[] => {
const departments = ['개발팀', '디자인팀', '기획팀', '영업팀', '인사팀'];
const positions = ['팀장', '파트장', '선임', '주임', '사원'];
const approvalTypes: ApprovalType[] = ['expense_report', 'proposal', 'expense_estimate'];
const statuses: ApprovalStatus[] = ['pending', 'approved', 'rejected'];
const titlesByType: Record<ApprovalType, string[]> = {
expense_report: ['12월 출장비 정산', '사무용품 구매비 청구', '고객 미팅 식대 정산', '세미나 참가비 정산'],
proposal: ['신규 프로젝트 품의', '장비 구매 품의', '외주 용역 품의', '마케팅 예산 품의'],
expense_estimate: ['2024년 하반기 예산', '신규 사업 예상 지출', '부서 운영비 예상', '행사 예산 내역'],
};
return Array.from({ length: 76 }, (_, i) => {
const status = statuses[i % statuses.length];
const approvalType = approvalTypes[i % approvalTypes.length];
const titles = titlesByType[approvalType];
const draftDate = new Date(2024, 8, Math.floor(Math.random() * 30) + 1);
const approvalDate = status !== 'pending' ? new Date(draftDate.getTime() + Math.random() * 7 * 24 * 60 * 60 * 1000) : undefined;
return {
id: `approval-${i + 1}`,
documentNo: `DOC-${String(i + 1).padStart(4, '0')}`,
approvalType,
documentStatus: status === 'pending' ? '진행중' : status === 'approved' ? '완료' : '반려',
title: titles[i % titles.length],
draftDate: format(draftDate, 'yyyy-MM-dd HH:mm'),
drafter: ['김철수', '이영희', '박민수', '정수진', '최동현', '강미영', '윤상호'][i % 7],
drafterDepartment: departments[i % departments.length],
drafterPosition: positions[i % positions.length],
approvalDate: approvalDate ? format(approvalDate, 'yyyy-MM-dd') : undefined,
approver: status !== 'pending' ? ['김부장', '이차장', '박과장'][i % 3] : undefined,
status,
priority: i % 5 === 0 ? 'high' : 'normal',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
};
});
};
// ===== 통계 타입 =====
interface InboxSummary {
total: number;
pending: number;
approved: number;
rejected: number;
}
export function ApprovalBox() {
const [isPending, startTransition] = useTransition();
// ===== 상태 관리 =====
const [activeTab, setActiveTab] = useState<ApprovalTabType>('all');
const [searchQuery, setSearchQuery] = useState('');
@@ -109,26 +90,91 @@ export function ApprovalBox() {
const itemsPerPage = 20;
// 날짜 범위 상태
const [startDate, setStartDate] = useState('2024-09-01');
const [endDate, setEndDate] = useState('2024-09-03');
const [startDate, setStartDate] = useState('2025-09-01');
const [endDate, setEndDate] = useState('2025-09-03');
// 다이얼로그 상태
const [approveDialogOpen, setApproveDialogOpen] = useState(false);
const [rejectDialogOpen, setRejectDialogOpen] = useState(false);
const [rejectComment, setRejectComment] = useState('');
// ===== 문서 상세 모달 상태 =====
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedDocument, setSelectedDocument] = useState<ApprovalRecord | null>(null);
// Mock 데이터
const [approvalData] = useState<ApprovalRecord[]>(generateApprovalData);
// API 데이터
const [data, setData] = useState<ApprovalRecord[]>([]);
const [totalCount, setTotalCount] = useState(0);
const [totalPages, setTotalPages] = useState(1);
const [isLoading, setIsLoading] = useState(true);
// 통계 데이터
const [summary, setSummary] = useState<InboxSummary | null>(null);
// ===== 데이터 로드 =====
const loadData = useCallback(async () => {
setIsLoading(true);
try {
// 정렬 옵션 변환
const sortConfig: { sort_by: string; sort_dir: 'asc' | 'desc' } = (() => {
switch (sortOption) {
case 'latest': return { sort_by: 'created_at', sort_dir: 'desc' };
case 'oldest': return { sort_by: 'created_at', sort_dir: 'asc' };
case 'draftDateAsc': return { sort_by: 'created_at', sort_dir: 'asc' };
case 'draftDateDesc': return { sort_by: 'created_at', sort_dir: 'desc' };
default: return { sort_by: 'created_at', sort_dir: 'desc' };
}
})();
const result = await getInbox({
page: currentPage,
per_page: itemsPerPage,
search: searchQuery || undefined,
status: activeTab !== 'all' ? activeTab : undefined,
approval_type: filterOption !== 'all' ? filterOption : undefined,
...sortConfig,
});
setData(result.data);
setTotalCount(result.total);
setTotalPages(result.lastPage);
} catch (error) {
console.error('Failed to load inbox:', error);
toast.error('결재함 목록을 불러오는데 실패했습니다.');
} finally {
setIsLoading(false);
}
}, [currentPage, itemsPerPage, searchQuery, filterOption, sortOption, activeTab]);
// ===== 통계 로드 =====
const loadSummary = useCallback(async () => {
try {
const result = await getInboxSummary();
setSummary(result);
} catch (error) {
console.error('Failed to load summary:', error);
}
}, []);
// ===== 초기 로드 및 필터 변경 시 데이터 재로드 =====
useEffect(() => {
loadData();
}, [loadData]);
useEffect(() => {
loadSummary();
}, [loadSummary]);
// ===== 검색어/필터/탭 변경 시 페이지 초기화 =====
useEffect(() => {
setCurrentPage(1);
}, [searchQuery, filterOption, sortOption, activeTab]);
// ===== 탭 변경 핸들러 =====
const handleTabChange = useCallback((value: string) => {
setActiveTab(value as ApprovalTabType);
setSelectedItems(new Set());
setSearchQuery('');
setCurrentPage(1);
}, []);
// ===== 체크박스 핸들러 =====
@@ -142,71 +188,22 @@ export function ApprovalBox() {
}, []);
const toggleSelectAll = useCallback(() => {
if (selectedItems.size === filteredData.length && filteredData.length > 0) {
if (selectedItems.size === data.length && data.length > 0) {
setSelectedItems(new Set());
} else {
setSelectedItems(new Set(filteredData.map(item => item.id)));
setSelectedItems(new Set(data.map(item => item.id)));
}
}, [selectedItems.size]);
}, [selectedItems.size, data]);
// ===== 필터링된 데이터 =====
const filteredData = useMemo(() => {
let data = approvalData;
// 탭 필터
if (activeTab !== 'all') {
data = data.filter(item => item.status === activeTab);
}
// 유형 필터
if (filterOption !== 'all') {
data = data.filter(item => item.approvalType === filterOption);
}
// 검색 필터
if (searchQuery) {
data = data.filter(item =>
item.title.includes(searchQuery) ||
item.drafter.includes(searchQuery) ||
item.drafterDepartment.includes(searchQuery)
);
}
// 정렬
switch (sortOption) {
case 'latest':
data = [...data].sort((a, b) => new Date(b.draftDate).getTime() - new Date(a.draftDate).getTime());
break;
case 'oldest':
data = [...data].sort((a, b) => new Date(a.draftDate).getTime() - new Date(b.draftDate).getTime());
break;
case 'draftDateAsc':
data = [...data].sort((a, b) => new Date(a.draftDate).getTime() - new Date(b.draftDate).getTime());
break;
case 'draftDateDesc':
data = [...data].sort((a, b) => new Date(b.draftDate).getTime() - new Date(a.draftDate).getTime());
break;
}
return data;
}, [approvalData, activeTab, filterOption, searchQuery, sortOption]);
// 페이지네이션
const paginatedData = useMemo(() => {
const startIndex = (currentPage - 1) * itemsPerPage;
return filteredData.slice(startIndex, startIndex + itemsPerPage);
}, [filteredData, currentPage, itemsPerPage]);
const totalPages = Math.ceil(filteredData.length / itemsPerPage);
// ===== 통계 데이터 =====
// ===== 통계 데이터 (API summary 사용) =====
const stats = useMemo(() => {
const all = approvalData.length;
const pending = approvalData.filter(item => item.status === 'pending').length;
const approved = approvalData.filter(item => item.status === 'approved').length;
const rejected = approvalData.filter(item => item.status === 'rejected').length;
return { all, pending, approved, rejected };
}, [approvalData]);
return {
all: summary?.total ?? 0,
pending: summary?.pending ?? 0,
approved: summary?.approved ?? 0,
rejected: summary?.rejected ?? 0,
};
}, [summary]);
// ===== 승인/반려 핸들러 =====
const handleApproveClick = useCallback(() => {
@@ -214,24 +211,67 @@ export function ApprovalBox() {
setApproveDialogOpen(true);
}, [selectedItems.size]);
const handleApproveConfirm = useCallback(() => {
console.log('승인:', Array.from(selectedItems));
// TODO: API 호출
setSelectedItems(new Set());
const handleApproveConfirm = useCallback(async () => {
const ids = Array.from(selectedItems);
startTransition(async () => {
try {
const result = await approveDocumentsBulk(ids);
if (result.success) {
toast.success('승인 완료', {
description: '결재 승인이 완료되었습니다.',
});
setSelectedItems(new Set());
loadData();
loadSummary();
} else {
toast.error(result.error || '승인 처리에 실패했습니다.');
}
} catch (error) {
console.error('Approve error:', error);
toast.error('승인 처리 중 오류가 발생했습니다.');
}
});
setApproveDialogOpen(false);
}, [selectedItems]);
}, [selectedItems, loadData, loadSummary]);
const handleRejectClick = useCallback(() => {
if (selectedItems.size === 0) return;
setRejectComment('');
setRejectDialogOpen(true);
}, [selectedItems.size]);
const handleRejectConfirm = useCallback(() => {
console.log('반려:', Array.from(selectedItems));
// TODO: API 호출
setSelectedItems(new Set());
const handleRejectConfirm = useCallback(async () => {
if (!rejectComment.trim()) {
toast.error('반려 사유를 입력해주세요.');
return;
}
const ids = Array.from(selectedItems);
startTransition(async () => {
try {
const result = await rejectDocumentsBulk(ids, rejectComment);
if (result.success) {
toast.success('반려 완료', {
description: '결재 반려가 완료되었습니다.',
});
setSelectedItems(new Set());
setRejectComment('');
loadData();
loadSummary();
} else {
toast.error(result.error || '반려 처리에 실패했습니다.');
}
} catch (error) {
console.error('Reject error:', error);
toast.error('반려 처리 중 오류가 발생했습니다.');
}
});
setRejectDialogOpen(false);
}, [selectedItems]);
}, [selectedItems, rejectComment, loadData, loadSummary]);
// ===== 통계 카드 =====
const statCards: StatCard[] = useMemo(() => [
@@ -270,24 +310,41 @@ export function ApprovalBox() {
}, []);
const handleModalEdit = useCallback(() => {
console.log('문서 수정:', selectedDocument?.id);
// TODO: 수정 페이지로 이동 - 라우터 연동 필요
console.log('[ApprovalBox] 문서 수정 - 라우터 연동 필요:', selectedDocument?.id);
setIsModalOpen(false);
}, [selectedDocument]);
const handleModalCopy = useCallback(() => {
console.log('문서 복제:', selectedDocument?.id);
// TODO: 문서 복제 API 개발 필요 - POST /api/v1/approvals/{id}/copy
console.log('[ApprovalBox] 문서 복제 - API 미구현:', selectedDocument?.id);
toast.info('문서 복제 기능은 준비 중입니다.');
setIsModalOpen(false);
}, [selectedDocument]);
const handleModalApprove = useCallback(() => {
console.log('문서 승인:', selectedDocument?.id);
const handleModalApprove = useCallback(async () => {
if (!selectedDocument?.id) return;
const result = await approveDocument(selectedDocument.id);
if (result.success) {
toast.success('문서가 승인되었습니다.');
loadData();
} else {
toast.error(result.error || '승인에 실패했습니다.');
}
setIsModalOpen(false);
}, [selectedDocument]);
}, [selectedDocument, loadData]);
const handleModalReject = useCallback(() => {
console.log('문서 반려:', selectedDocument?.id);
const handleModalReject = useCallback(async () => {
if (!selectedDocument?.id) return;
const result = await rejectDocument(selectedDocument.id, '반려');
if (result.success) {
toast.success('문서가 반려되었습니다.');
loadData();
} else {
toast.error(result.error || '반려에 실패했습니다.');
}
setIsModalOpen(false);
}, [selectedDocument]);
}, [selectedDocument, loadData]);
// ===== ApprovalType → DocumentType 변환 =====
const getDocumentType = (approvalType: ApprovalType): DocumentType => {
@@ -534,19 +591,20 @@ export function ApprovalBox() {
activeTab={activeTab}
onTabChange={handleTabChange}
tableColumns={tableColumns}
data={paginatedData}
totalCount={filteredData.length}
allData={filteredData}
data={data}
totalCount={totalCount}
allData={data}
selectedItems={selectedItems}
onToggleSelection={toggleSelection}
onToggleSelectAll={toggleSelectAll}
getItemId={(item: ApprovalRecord) => item.id}
renderTableRow={renderTableRow}
renderMobileCard={renderMobileCard}
isLoading={isLoading || isPending}
pagination={{
currentPage,
totalPages,
totalItems: filteredData.length,
totalItems: totalCount,
itemsPerPage,
onPageChange: setCurrentPage,
}}
@@ -576,14 +634,27 @@ export function ApprovalBox() {
<AlertDialogHeader>
<AlertDialogTitle> </AlertDialogTitle>
<AlertDialogDescription>
{selectedItems.size} ?
{selectedItems.size} . .
</AlertDialogDescription>
</AlertDialogHeader>
<div className="py-4">
<Label htmlFor="reject-comment" className="text-sm font-medium">
<span className="text-destructive">*</span>
</Label>
<Textarea
id="reject-comment"
placeholder="반려 사유를 입력해주세요..."
value={rejectComment}
onChange={(e) => setRejectComment(e.target.value)}
className="mt-2 min-h-[100px]"
/>
</div>
<AlertDialogFooter>
<AlertDialogCancel></AlertDialogCancel>
<AlertDialogCancel onClick={() => setRejectComment('')}></AlertDialogCancel>
<AlertDialogAction
onClick={handleRejectConfirm}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
disabled={!rejectComment.trim()}
>
</AlertDialogAction>