[Feat] 백엔드 API 응답 필드 추가 반영 - 계약 목록/급여 상세

* [Feat] 백엔드 API 응답 필드 추가 반영 (급여명세서) (#17)

- ContractListItem에 workplaceId, workplaceName, paymentDay, payrollDeductionType 필드 추가
- SalaryDetailResponse에 4대보험 개별 항목 및 주휴수당 필드 추가
- useWorkplaces: getContractDetail N+1 호출 제거, 리스트 응답에서 직접 사용
- useSalaryStatement: getContractDetail N+1 호출 제거, 리스트 응답에서 직접 사용
- DeductionSection: 4대보험 개별 항목 실제 값 표시 (국민연금/건강보험/장기요양보험/고용보험)

* [Chore] 가족수당/노동조합비 항목 삭제

- DeductionSection에서 노동조합비 행 제거
- PaymentSection에서 가족수당 행 제거
- 백엔드와 협의하여 미사용 확정

* [Feat] 주휴수당 급여명세서 UI 표시 추가

- PaymentSection에 weeklyPaidLeaveAmount(주휴수당) SalaryItemRow 추가
- 휴일근로수당 아래에 배치

Author: l2juhan

src/api/worker/types.ts

@@ -6,14 +6,17 @@ export type PayrollDeductionType = 'FREELANCER' | 'PART_TIME_NONE' | 'PART_TIME_
 // 계약 목록 아이템 (GET /api/worker/contracts)
 export interface ContractListItem {
 	id: number;
+	workplaceId: number;
+	workplaceName: string;
 	workerName: string;
 	workerCode: string;
 	workerPhone: string;
 	hourlyWage: number;
 	contractStartDate: string;
 	contractEndDate: string | null;
+	paymentDay: number;
+	payrollDeductionType: PayrollDeductionType;
 	isActive: boolean;
-	workplaceName?: string;
 }
 
 // 계약 상세 (GET /api/worker/contracts/{id})
@@ -170,8 +173,13 @@ export interface SalaryDetailResponse {
 	overtimePay: number;
 	nightPay: number;
 	holidayPay: number;
+	weeklyPaidLeaveAmount: number;
 	totalGrossPay: number;
 	fourMajorInsurance: number;
+	nationalPension: number;
+	healthInsurance: number;
+	longTermCare: number;
+	employmentInsurance: number;
 	incomeTax: number;
 	localIncomeTax: number;
 	totalDeduction: number;

src/components/worker/salary/DeductionSection.tsx

@@ -24,12 +24,10 @@ const DeductionSection: React.FC<DeductionSectionProps> = ({ salary }) => {
 				label="지방소득세"
 				value={salary?.localIncomeTax ?? null}
 			/>
-			{/* 4대보험 개별 항목: 백엔드에서 개별 필드 추가 전까지 ? 표시 */}
-			<SalaryItemRow label="국민연금" value={null} />
-			<SalaryItemRow label="고용보험" value={null} />
-			<SalaryItemRow label="건강보험" value={null} />
-			<SalaryItemRow label="장기요양보험" value={null} />
-			<SalaryItemRow label="노동조합비" value={null} />
+			<SalaryItemRow label="국민연금" value={salary?.nationalPension ?? null} />
+			<SalaryItemRow label="고용보험" value={salary?.employmentInsurance ?? null} />
+			<SalaryItemRow label="건강보험" value={salary?.healthInsurance ?? null} />
+			<SalaryItemRow label="장기요양보험" value={salary?.longTermCare ?? null} />
 			<View style={styles.divider} />
 			<View style={styles.subtotalRow}>
 				<Text style={styles.subtotalText} weight="SemiBold">

src/components/worker/salary/PaymentSection.tsx

@@ -32,7 +32,10 @@ const PaymentSection: React.FC<PaymentSectionProps> = ({ salary }) => {
 				label="휴일근로수당"
 				value={salary?.holidayPay ?? null}
 			/>
-			<SalaryItemRow label="가족수당" value={null} />
+			<SalaryItemRow
+				label="주휴수당"
+				value={salary?.weeklyPaidLeaveAmount ?? null}
+			/>
 			<View style={styles.divider} />
 			<View style={styles.subtotalRow}>
 				<Text style={styles.subtotalText} weight="SemiBold">

src/hooks/worker/useSalaryStatement.ts

@@ -1,14 +1,10 @@
 /**
  * 급여명세서 바텀시트 데이터 관리 훅.
- * 계약 목록 → 계약 상세(근무지명, payrollDeductionType) + 급여 계산을 병렬 호출하여
- * 근무지별 급여명세서 데이터를 구성.
+ * 계약 목록 응답에서 근무지명, payrollDeductionType을 직접 사용하고
+ * 급여 계산만 병렬 호출하여 근무지별 급여명세서 데이터를 구성.
  */
 import { useState, useCallback } from "react";
-import {
-	getContracts,
-	getContractDetail,
-	calculateSalary,
-} from "../../api/worker";
+import { getContracts, calculateSalary } from "../../api/worker";
 import type {
 	PayrollDeductionType,
 	SalaryCalculateResponse,
@@ -35,29 +31,23 @@ const useSalaryStatement = (year: number, month: number) => {
 
 			const results = await Promise.all(
 				activeContracts.map(async (contract) => {
-					const [detailRes, salaryRes] = await Promise.allSettled([
-						getContractDetail(contract.id),
-						calculateSalary(contract.id, year, month),
-					]);
-
-					const detail =
-						detailRes.status === "fulfilled"
-							? detailRes.value.data
-							: null;
-					const salary =
-						salaryRes.status === "fulfilled"
-							? salaryRes.value.data
-							: null;
+					let salary: SalaryCalculateResponse | null = null;
+					try {
+						const salaryRes = await calculateSalary(
+							contract.id,
+							year,
+							month
+						);
+						salary = salaryRes.data ?? null;
+					} catch {
+						// 급여 계산 실패 시 null
+					}
 
 					return {
 						contractId: contract.id,
-						workplaceName:
-							detail?.workplaceName ??
-							contract.workplaceName ??
-							"알 수 없음",
-						payrollDeductionType:
-							detail?.payrollDeductionType ?? "PART_TIME_NONE",
-						salary: salary ?? null,
+						workplaceName: contract.workplaceName,
+						payrollDeductionType: contract.payrollDeductionType,
+						salary,
 					};
 				})
 			);

src/hooks/worker/useWorkplaces.ts

@@ -1,10 +1,10 @@
 /**
  * 근로자의 활성 근무지 목록을 조회하는 커스텀 훅
- * - 계약 목록 → 상세 조회를 통해 근무지명, 시급 정보를 가공
+ * - 계약 목록 응답에서 근무지명, 시급 정보를 직접 사용
  * - WheelPicker용 items 변환까지 포함
  */
 import { useState, useMemo, useCallback } from "react";
-import { getContracts, getContractDetail } from "../../api/worker";
+import { getContracts } from "../../api/worker";
 import type { WheelPickerItem } from "../../components/common/WheelPicker";
 
 export interface WorkplaceOption {
@@ -25,18 +25,12 @@ const useWorkplaces = () => {
 			const activeContracts =
 				contractsRes.data?.filter((c) => c.isActive) ?? [];
 
-			const details = await Promise.all(
-				activeContracts.map(async (contract) => {
-					const detailRes = await getContractDetail(contract.id);
-					return {
-						contractId: contract.id,
-						workplaceId: detailRes.data?.workplaceId ?? 0,
-						workplaceName:
-							detailRes.data?.workplaceName ?? "알 수 없음",
-						hourlyWage: detailRes.data?.hourlyWage ?? 0,
-					};
-				})
-			);
+			const details = activeContracts.map((contract) => ({
+				contractId: contract.id,
+				workplaceId: contract.workplaceId,
+				workplaceName: contract.workplaceName,
+				hourlyWage: contract.hourlyWage,
+			}));
 
 			setWorkplaces(details);
 		} catch {