Phase 2 프론트엔드 연동 완료: - WelfareDetailApiResponse 타입 정의 추가 (types.ts) - useWelfareDetail hook 추가 (useCEODashboard.ts) - transformWelfareDetailResponse 변환 함수 추가 (transformers.ts) - CEODashboard에 API 연동 및 Mock fallback 구현 변경 파일: - src/lib/api/dashboard/types.ts: 복리후생비 상세 API 응답 타입 - src/hooks/useCEODashboard.ts: useWelfareDetail hook - src/lib/api/dashboard/transformers.ts: API → DetailModalConfig 변환 - src/components/business/CEODashboard/CEODashboard.tsx: 모달 API 연동 - src/components/business/CEODashboard/modalConfigs/welfareConfigs.ts: deprecation 문서화
143 lines
6.2 KiB
TypeScript
143 lines
6.2 KiB
TypeScript
import type { DetailModalConfig } from '../types';
|
||
|
||
/**
|
||
* 복리후생비 현황 모달 설정
|
||
*
|
||
* @deprecated 정적 목업 데이터 - API 연동 후에는 useWelfareDetail hook 사용 권장
|
||
*
|
||
* API 연동 방법:
|
||
* 1. useWelfareDetail hook 호출하여 modalConfig 가져오기
|
||
* 2. API 호출 실패 시 이 fallback config 사용
|
||
*
|
||
* @example
|
||
* const { modalConfig, loading, error, refetch } = useWelfareDetail({
|
||
* calculationType: 'fixed',
|
||
* year: 2026,
|
||
* quarter: 1,
|
||
* });
|
||
* const config = modalConfig ?? getWelfareModalConfig('fixed'); // fallback
|
||
*
|
||
* @param calculationType - 계산 방식 ('fixed': 직원당 정액 금액/월, 'ratio': 연봉 총액 비율)
|
||
*/
|
||
export function getWelfareModalConfig(calculationType: 'fixed' | 'ratio'): DetailModalConfig {
|
||
// 계산 방식에 따른 조건부 calculationCards 생성
|
||
const calculationCards = calculationType === 'fixed'
|
||
? {
|
||
// 직원당 정액 금액/월 방식
|
||
title: '복리후생비 계산',
|
||
subtitle: '직원당 정액 금액/월 200,000원',
|
||
cards: [
|
||
{ label: '직원 수', value: 20, unit: '명' },
|
||
{ label: '연간 직원당 월급 금액', value: 2400000, unit: '원', operator: '×' as const },
|
||
{ label: '당해년도 복리후생비 총 한도', value: 48000000, unit: '원', operator: '=' as const },
|
||
],
|
||
}
|
||
: {
|
||
// 연봉 총액 비율 방식
|
||
title: '복리후생비 계산',
|
||
subtitle: '연봉 총액 기준 비율 20.5%',
|
||
cards: [
|
||
{ label: '연봉 총액', value: 1000000000, unit: '원' },
|
||
{ label: '비율', value: 20.5, unit: '%', operator: '×' as const },
|
||
{ label: '당해년도 복리후생비 총 한도', value: 205000000, unit: '원', operator: '=' as const },
|
||
],
|
||
};
|
||
|
||
return {
|
||
title: '복리후생비 상세',
|
||
summaryCards: [
|
||
// 1행: 당해년도 기준
|
||
{ label: '당해년도 복리후생비 계정', value: 3123000, unit: '원' },
|
||
{ label: '당해년도 복리후생비 한도', value: 600000, unit: '원' },
|
||
{ label: '당해년도 복리후생비 사용', value: 6000000, unit: '원' },
|
||
{ label: '당해년도 잔여한도', value: 0, unit: '원' },
|
||
// 2행: 1사분기 기준
|
||
{ label: '1사분기 복리후생비 총 한도', value: 3123000, unit: '원' },
|
||
{ label: '1사분기 복리후생비 잔여한도', value: 6000000, unit: '원' },
|
||
{ label: '1사분기 복리후생비 사용금액', value: 6000000, unit: '원' },
|
||
{ label: '1사분기 복리후생비 초과 금액', value: 6000000, unit: '원' },
|
||
],
|
||
barChart: {
|
||
title: '월별 복리후생비 사용 추이',
|
||
data: [
|
||
{ name: '1월', value: 1500000 },
|
||
{ name: '2월', value: 1800000 },
|
||
{ name: '3월', value: 2200000 },
|
||
{ name: '4월', value: 1900000 },
|
||
{ name: '5월', value: 2100000 },
|
||
{ name: '6월', value: 1700000 },
|
||
],
|
||
dataKey: 'value',
|
||
xAxisKey: 'name',
|
||
color: '#60A5FA',
|
||
},
|
||
pieChart: {
|
||
title: '항목별 사용 비율',
|
||
data: [
|
||
{ name: '식비', value: 55000000, percentage: 55, color: '#FBBF24' },
|
||
{ name: '건강검진', value: 25000000, percentage: 5, color: '#60A5FA' },
|
||
{ name: '경조사비', value: 10000000, percentage: 10, color: '#F87171' },
|
||
{ name: '기타', value: 10000000, percentage: 30, color: '#34D399' },
|
||
],
|
||
},
|
||
table: {
|
||
title: '일별 복리후생비 사용 내역',
|
||
columns: [
|
||
{ key: 'no', label: 'No.', align: 'center' },
|
||
{ key: 'cardName', label: '카드명', align: 'left' },
|
||
{ key: 'user', label: '사용자', align: 'center' },
|
||
{ key: 'date', label: '사용일자', align: 'center', format: 'date' },
|
||
{ key: 'store', label: '가맹점명', align: 'left' },
|
||
{ key: 'amount', label: '사용금액', align: 'right', format: 'currency' },
|
||
{ key: 'usageType', label: '사용항목', align: 'center' },
|
||
],
|
||
data: [
|
||
{ cardName: '카드명', user: '홍길동', date: '2025-12-12 12:12', store: '가맹점명', amount: 1000000, usageType: '식비' },
|
||
{ cardName: '카드명', user: '홍길동', date: '2025-12-12 12:12', store: '가맹점명', amount: 1200000, usageType: '건강검진' },
|
||
{ cardName: '카드명', user: '홍길동', date: '2025-12-12 12:12', store: '가맹점명', amount: 1500000, usageType: '경조사비' },
|
||
{ cardName: '카드명', user: '홍길동', date: '2025-12-12 12:12', store: '가맹점명', amount: 1300000, usageType: '기타' },
|
||
{ cardName: '카드명', user: '홍길동', date: '2025-12-12 12:12', store: '가맹점명', amount: 6000000, usageType: '식비' },
|
||
],
|
||
filters: [
|
||
{
|
||
key: 'usageType',
|
||
options: [
|
||
{ value: 'all', label: '전체' },
|
||
{ value: '식비', label: '식비' },
|
||
{ value: '건강검진', label: '건강검진' },
|
||
{ value: '경조사비', label: '경조사비' },
|
||
{ value: '기타', label: '기타' },
|
||
],
|
||
defaultValue: 'all',
|
||
},
|
||
{
|
||
key: 'sortOrder',
|
||
options: [
|
||
{ value: 'latest', label: '최신순' },
|
||
{ value: 'oldest', label: '등록순' },
|
||
{ value: 'amountDesc', label: '금액 높은순' },
|
||
{ value: 'amountAsc', label: '금액 낮은순' },
|
||
],
|
||
defaultValue: 'latest',
|
||
},
|
||
],
|
||
showTotal: true,
|
||
totalLabel: '합계',
|
||
totalValue: 11000000,
|
||
totalColumnKey: 'amount',
|
||
},
|
||
// 복리후생비 계산 (조건부 - calculationType에 따라)
|
||
calculationCards,
|
||
// 복리후생비 현황 (분기별 테이블)
|
||
quarterlyTable: {
|
||
title: '복리후생비 현황',
|
||
rows: [
|
||
{ label: '한도금액', q1: 12000000, q2: 12000000, q3: 12000000, q4: 12000000, total: 48000000 },
|
||
{ label: '이월금액', q1: 0, q2: '', q3: '', q4: '', total: '' },
|
||
{ label: '사용금액', q1: 1000000, q2: '', q3: '', q4: '', total: '' },
|
||
{ label: '잔여한도', q1: 11000000, q2: '', q3: '', q4: '', total: '' },
|
||
{ label: '초과금액', q1: '', q2: '', q3: '', q4: '', total: '' },
|
||
],
|
||
},
|
||
};
|
||
} |