feat: [대시보드] 복리후생비 현황 섹션 Phase 2 - 프론트엔드 API 연동

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 문서화

src/components/business/CEODashboard/CEODashboard.tsx

@@ -25,7 +25,7 @@ import { DEFAULT_DASHBOARD_SETTINGS } from './types';
 import { ScheduleDetailModal, DetailModal } from './modals';
 import { DashboardSettingsDialog } from './dialogs/DashboardSettingsDialog';
 import { mockData } from './mockData';
-import { useCEODashboard, useTodayIssue, useCalendar, useVat, useEntertainment, useWelfare } from '@/hooks/useCEODashboard';
+import { useCEODashboard, useTodayIssue, useCalendar, useVat, useEntertainment, useWelfare, useWelfareDetail } from '@/hooks/useCEODashboard';
 import {
   getMonthlyExpenseModalConfig,
   getCardManagementModalConfig,
@@ -100,6 +100,11 @@ export function CEODashboard() {
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
   const [dashboardSettings, setDashboardSettings] = useState<DashboardSettings>(DEFAULT_DASHBOARD_SETTINGS);
 
+  // WelfareDetail Hook (모달용 상세 API) - dashboardSettings 이후에 선언
+  const welfareDetailData = useWelfareDetail({
+    calculationType: dashboardSettings.welfare.calculationType,
+  });
+
   // 상세 모달 상태
   const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
   const [detailModalConfig, setDetailModalConfig] = useState<DetailModalConfig | null>(null);
@@ -179,11 +184,16 @@ export function CEODashboard() {
   }, []);
 
   // 복리후생비 현황 카드 클릭 (모든 카드가 동일한 상세 모달)
-  const handleWelfareCardClick = useCallback(() => {
-    const config = getWelfareModalConfig(dashboardSettings.welfare.calculationType);
+  // 복리후생비 클릭 - API 데이터로 모달 열기 (fallback: 정적 config)
+  const handleWelfareCardClick = useCallback(async () => {
+    // 1. 먼저 API에서 데이터 fetch 시도
+    await welfareDetailData.refetch();
+
+    // 2. API 데이터가 있으면 사용, 없으면 fallback config 사용
+    const config = welfareDetailData.modalConfig ?? getWelfareModalConfig(dashboardSettings.welfare.calculationType);
     setDetailModalConfig(config);
     setIsDetailModalOpen(true);
-  }, [dashboardSettings.welfare.calculationType]);
+  }, [welfareDetailData, dashboardSettings.welfare.calculationType]);
 
   // 부가세 클릭 (모든 카드가 동일한 상세 모달)
   const handleVatClick = useCallback(() => {

src/components/business/CEODashboard/modalConfigs/welfareConfigs.ts

@@ -2,7 +2,21 @@ 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 {