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/hooks/useCEODashboard.ts

@@ -21,6 +21,7 @@ import type {
   VatApiResponse,
   EntertainmentApiResponse,
   WelfareApiResponse,
+  WelfareDetailApiResponse,
 } from '@/lib/api/dashboard/types';
 
 import {
@@ -35,6 +36,7 @@ import {
   transformVatResponse,
   transformEntertainmentResponse,
   transformWelfareResponse,
+  transformWelfareDetailResponse,
 } from '@/lib/api/dashboard/transformers';
 
 import type {
@@ -49,6 +51,7 @@ import type {
   VatData,
   EntertainmentData,
   WelfareData,
+  DetailModalConfig,
 } from '@/components/business/CEODashboard/types';
 
 // ============================================
@@ -553,6 +556,71 @@ export function useWelfare(options: UseWelfareOptions = {}) {
   return { data, loading, error, refetch: fetchData };
 }
 
+// ============================================
+// 12. WelfareDetail Hook (복리후생비 상세 - 모달용)
+// ============================================
+
+export interface UseWelfareDetailOptions {
+  /** 계산 방식 (fixed: 1인당 정액, ratio: 급여 대비 비율) */
+  calculationType?: 'fixed' | 'ratio';
+  /** 1인당 월 정액 (calculation_type=fixed일 때 사용, 기본: 200000) */
+  fixedAmountPerMonth?: number;
+  /** 급여 대비 비율 (calculation_type=ratio일 때 사용, 기본: 0.05) */
+  ratio?: number;
+  /** 연도 (기본: 현재 연도) */
+  year?: number;
+  /** 분기 번호 (1-4, 기본: 현재 분기) */
+  quarter?: number;
+}
+
+/**
+ * 복리후생비 상세 데이터 Hook (모달용)
+ * API에서 상세 데이터를 가져와 DetailModalConfig로 변환
+ */
+export function useWelfareDetail(options: UseWelfareDetailOptions = {}) {
+  const {
+    calculationType = 'fixed',
+    fixedAmountPerMonth,
+    ratio,
+    year,
+    quarter,
+  } = options;
+  const [modalConfig, setModalConfig] = useState<DetailModalConfig | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      // 쿼리 파라미터 구성
+      const params = new URLSearchParams();
+      params.append('calculation_type', calculationType);
+      if (fixedAmountPerMonth) params.append('fixed_amount_per_month', fixedAmountPerMonth.toString());
+      if (ratio) params.append('ratio', ratio.toString());
+      if (year) params.append('year', year.toString());
+      if (quarter) params.append('quarter', quarter.toString());
+
+      const queryString = params.toString();
+      const endpoint = `welfare/detail?${queryString}`;
+
+      const apiData = await fetchApi<WelfareDetailApiResponse>(endpoint);
+      const transformed = transformWelfareDetailResponse(apiData);
+      setModalConfig(transformed);
+
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : '데이터 로딩 실패';
+      setError(errorMessage);
+      console.error('WelfareDetail API Error:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [calculationType, fixedAmountPerMonth, ratio, year, quarter]);
+
+  return { modalConfig, loading, error, refetch: fetchData };
+}
+
 // ============================================
 // 통합 Dashboard Hook (선택적 사용)
 // ============================================
@@ -568,7 +636,7 @@ export interface UseCEODashboardOptions {
   monthlyExpense?: boolean;
   /** CardManagement 섹션 활성화 */
   cardManagement?: boolean;
-  /** CardManagement fallback 데이터 */
+   /** CardManagement fallback 데이터 (가지급금, 법인세, 종합세 등) */
   cardManagementFallback?: CardManagementData;
   /** StatusBoard 섹션 활성화 */
   statusBoard?: boolean;