fix: [payroll] PDF 급여명세서 레이아웃 수정

- 사원정보 테이블 colgroup으로 너비 고정 (오버플로우 해결)
- footer를 table 기반으로 변경 (dompdf float 미지원)
- 회사명 문자 인코딩 수정
This commit is contained in:
김보곤
2026-03-10 09:24:00 +09:00
parent 4a3d14a591
commit 5ca33cb24b

View File

@@ -7,20 +7,18 @@
body { font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; margin: 0; padding: 20px; background: #fff; }
.container { max-width: 720px; margin: 0 auto; background: #fff; padding: 40px 36px; }
h1 { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 2px; margin: 0 0 28px; border-bottom: 3px solid #333; padding-bottom: 16px; }
.info-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.info-table td { padding: 6px 10px; font-size: 13px; border: 1px solid #999; }
.info-table .label { font-weight: bold; background: #f0f0f0; width: 70px; white-space: nowrap; }
.info-table .value { min-width: 100px; }
.info-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; table-layout: fixed; }
.info-table td { padding: 6px 8px; font-size: 12px; border: 1px solid #999; overflow: hidden; }
.info-table .label { font-weight: bold; background: #f0f0f0; text-align: center; }
.payslip-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.payslip-table th, .payslip-table td { border: 1px solid #999; padding: 7px 12px; font-size: 13px; }
.payslip-table th { background: #e8e8e8; font-weight: 700; text-align: center; letter-spacing: 4px; }
.payslip-table .item-name { text-align: center; }
.payslip-table .item-amount { text-align: right; font-variant-numeric: tabular-nums; }
.payslip-table .item-amount { text-align: right; }
.payslip-table .total-row td { font-weight: 700; background: #f8f8f8; }
.payslip-table .net-row td { font-weight: 800; font-size: 14px; background: #f0f7ff; }
.footer { margin-top: 20px; padding-top: 12px; font-size: 12px; color: #666; overflow: hidden; }
.footer .left { float: left; }
.footer .right { float: right; }
.footer-table { width: 100%; margin-top: 20px; padding-top: 12px; border: none; }
.footer-table td { font-size: 12px; color: #666; border: none; padding: 0; }
</style>
</head>
<body>
@@ -29,21 +27,29 @@
{{-- 사원 정보 --}}
<table class="info-table">
<colgroup>
<col style="width: 13%;">
<col style="width: 20%;">
<col style="width: 13%;">
<col style="width: 20%;">
<col style="width: 13%;">
<col style="width: 21%;">
</colgroup>
<tr>
<td class="label">사원코드</td>
<td class="value">{{ $payslipData['employee_code'] ?? '-' }}</td>
<td>{{ $payslipData['employee_code'] ?? '-' }}</td>
<td class="label">사원명</td>
<td class="value">{{ $payslipData['employee_name'] ?? '-' }}</td>
<td>{{ $payslipData['employee_name'] ?? '-' }}</td>
<td class="label">입사일</td>
<td class="value">{{ $payslipData['hire_date'] ?? '-' }}</td>
<td>{{ $payslipData['hire_date'] ?? '-' }}</td>
</tr>
<tr>
<td class="label"> </td>
<td class="value">{{ $payslipData['department'] ?? '-' }}</td>
<td class="label"> </td>
<td class="value">{{ $payslipData['position'] ?? '-' }}</td>
<td class="label"> </td>
<td class="value">{{ $payslipData['grade'] ?? '-' }}</td>
<td class="label">부서</td>
<td>{{ $payslipData['department'] ?? '-' }}</td>
<td class="label">직급</td>
<td>{{ $payslipData['position'] ?? '-' }}</td>
<td class="label">호봉</td>
<td>{{ $payslipData['grade'] ?? '-' }}</td>
</tr>
</table>
@@ -100,10 +106,12 @@
</tbody>
</table>
<div class="footer">
<span class="left">귀하의 노고에 감사드립니다.</span>
<span class="right">&#13134;코드브릿지엑스(CodebridgeX)</span>
</div>
<table class="footer-table">
<tr>
<td style="text-align: left;">귀하의 노고에 감사드립니다.</td>
<td style="text-align: right;">()코드브릿지엑스(CodebridgeX)</td>
</tr>
</table>
</div>
</body>
</html>