fix: [approvals] 위촉증명서 테이블 2열 행 텍스트 넘침 수정

- table-layout:fixed + colgroup(18%/32%/18%/32%)로 열 너비 고정
- td에 white-space:nowrap 추가하여 텍스트 줄바꿈 방지
- th width 고정값 제거 → colgroup 비율로 제어
- "위촉(재직)기간" → "위촉기간"으로 라벨 축소
- padding 18px→14px, font 16px→15px로 미세 조정
This commit is contained in:
김보곤
2026-03-06 10:56:07 +09:00
parent 6ebaa756a6
commit 2d327a8300
3 changed files with 14 additions and 12 deletions

View File

@@ -110,12 +110,12 @@ public function generatePdfResponse(array $content): \Illuminate\Http\Response
['소 속', $content['department'] ?? '-', 40],
['연 락 처', $content['phone'] ?? '-', 40],
]);
// 위촉(재직)기간 / 계약자격
// 위촉기간 / 계약자격
$hireDate = $content['hire_date'] ?? '';
$resignDate = $content['resign_date'] ?? '';
$periodDisplay = $hireDate ? $hireDate.' ~ '.($resignDate ?: '현재') : '-';
$this->addTableRow($pdf, $font, [
['위촉기간', $periodDisplay, 40],
['위촉기간', $periodDisplay, 45],
['계약자격', $content['contract_type'] ?? '-', 40],
]);
// 용도

View File

@@ -1282,7 +1282,7 @@ function printAppointmentCertPreview() {
const content = document.getElementById('appointment-cert-preview-content').innerHTML;
const win = window.open('', '_blank', 'width=800,height=1000');
win.document.write('<html><head><title>위촉증명서</title>');
win.document.write('<style>@page{size:A4;margin:0;} body{font-family:"Pretendard","Malgun Gothic",sans-serif;margin:0;padding:0;} .cert-page{padding:100px 56px 60px;box-sizing:border-box;} table{border-collapse:collapse;width:100%;} th,td{border:1px solid #333;padding:16px 18px;font-size:16px;} th{background:#f8f9fa;font-weight:600;text-align:left;white-space:nowrap;width:140px;}</style>');
win.document.write('<style>@page{size:A4;margin:0;} body{font-family:"Pretendard","Malgun Gothic",sans-serif;margin:0;padding:0;} .cert-page{padding:100px 56px 60px;box-sizing:border-box;} table{border-collapse:collapse;width:100%;table-layout:fixed;} th,td{border:1px solid #333;padding:16px 14px;font-size:15px;} th{background:#f8f9fa;font-weight:600;text-align:left;white-space:nowrap;}</style>');
win.document.write('</head><body><div class="cert-page">');
win.document.write(content);
win.document.write('</div></body></html>');
@@ -1292,13 +1292,14 @@ function printAppointmentCertPreview() {
function buildAppointmentCertPreviewHtml(d) {
const e = (s) => { const div = document.createElement('div'); div.textContent = s; return div.innerHTML; };
const thStyle = 'border:1px solid #333; padding:16px 18px; background:#f8f9fa; font-weight:600; text-align:left; white-space:nowrap; width:140px; font-size:16px;';
const tdStyle = 'border:1px solid #333; padding:16px 18px; font-size:16px;';
const thStyle = 'border:1px solid #333; padding:16px 14px; background:#f8f9fa; font-weight:600; text-align:left; white-space:nowrap; font-size:15px;';
const tdStyle = 'border:1px solid #333; padding:16px 14px; font-size:15px; white-space:nowrap;';
return `
<h1 style="text-align:center; font-size:30px; font-weight:700; letter-spacing:14px; margin-bottom:60px;">위 촉 증 명 서</h1>
<table style="border-collapse:collapse; width:100%; margin-bottom:60px;">
<table style="border-collapse:collapse; width:100%; margin-bottom:60px; table-layout:fixed;">
<colgroup><col style="width:18%"><col style="width:32%"><col style="width:18%"><col style="width:32%"></colgroup>
<tr>
<th style="${thStyle}">성 명</th>
<td style="${tdStyle}" colspan="3">${e(d.name)}</td>
@@ -1314,7 +1315,7 @@ function buildAppointmentCertPreviewHtml(d) {
<td style="${tdStyle}">${e(d.phone)}</td>
</tr>
<tr>
<th style="${thStyle}">위촉(재직)기간</th>
<th style="${thStyle}">위촉기간</th>
<td style="${tdStyle}">${e(d.hireDate)} ~ ${e(d.resignDate)}</td>
<th style="${thStyle}">계약자격</th>
<td style="${tdStyle}">${e(d.contractType)}</td>

View File

@@ -599,7 +599,7 @@ function printAppointmentCertShowPreview() {
const content = document.getElementById('appointment-cert-show-preview-content').innerHTML;
const win = window.open('', '_blank', 'width=800,height=1000');
win.document.write('<html><head><title>위촉증명서</title>');
win.document.write('<style>@page{size:A4;margin:0;} body{font-family:"Pretendard","Malgun Gothic",sans-serif;margin:0;padding:0;} .cert-page{padding:100px 56px 60px;box-sizing:border-box;} table{border-collapse:collapse;width:100%;} th,td{border:1px solid #333;padding:16px 18px;font-size:16px;} th{background:#f8f9fa;font-weight:600;text-align:left;white-space:nowrap;width:140px;}</style>');
win.document.write('<style>@page{size:A4;margin:0;} body{font-family:"Pretendard","Malgun Gothic",sans-serif;margin:0;padding:0;} .cert-page{padding:100px 56px 60px;box-sizing:border-box;} table{border-collapse:collapse;width:100%;table-layout:fixed;} th,td{border:1px solid #333;padding:16px 14px;font-size:15px;} th{background:#f8f9fa;font-weight:600;text-align:left;white-space:nowrap;}</style>');
win.document.write('</head><body><div class="cert-page">');
win.document.write(content);
win.document.write('</div></body></html>');
@@ -609,16 +609,17 @@ function printAppointmentCertShowPreview() {
function _buildAppointmentCertHtml(d) {
const e = (s) => { const div = document.createElement('div'); div.textContent = s; return div.innerHTML; };
const thStyle = 'border:1px solid #333; padding:16px 18px; background:#f8f9fa; font-weight:600; text-align:left; white-space:nowrap; width:140px; font-size:16px;';
const tdStyle = 'border:1px solid #333; padding:16px 18px; font-size:16px;';
const thStyle = 'border:1px solid #333; padding:16px 14px; background:#f8f9fa; font-weight:600; text-align:left; white-space:nowrap; font-size:15px;';
const tdStyle = 'border:1px solid #333; padding:16px 14px; font-size:15px; white-space:nowrap;';
return `
<h1 style="text-align:center; font-size:30px; font-weight:700; letter-spacing:14px; margin-bottom:60px;">위 촉 증 명 서</h1>
<table style="border-collapse:collapse; width:100%; margin-bottom:60px;">
<table style="border-collapse:collapse; width:100%; margin-bottom:60px; table-layout:fixed;">
<colgroup><col style="width:18%"><col style="width:32%"><col style="width:18%"><col style="width:32%"></colgroup>
<tr><th style="${thStyle}">성 명</th><td style="${tdStyle}" colspan="3">${e(d.name)}</td></tr>
<tr><th style="${thStyle}">주민등록번호</th><td style="${tdStyle}" colspan="3">${e(d.resident)}</td></tr>
<tr><th style="${thStyle}">소 속</th><td style="${tdStyle}">${e(d.department)}</td><th style="${thStyle}">연 락 처</th><td style="${tdStyle}">${e(d.phone)}</td></tr>
<tr><th style="${thStyle}">위촉(재직)기간</th><td style="${tdStyle}">${e(d.hireDate)} ~ ${e(d.resignDate)}</td><th style="${thStyle}">계약자격</th><td style="${tdStyle}">${e(d.contractType)}</td></tr>
<tr><th style="${thStyle}">위촉기간</th><td style="${tdStyle}">${e(d.hireDate)} ~ ${e(d.resignDate)}</td><th style="${thStyle}">계약자격</th><td style="${tdStyle}">${e(d.contractType)}</td></tr>
<tr><th style="${thStyle}">용 도</th><td style="${tdStyle}" colspan="3">${e(d.purpose)}</td></tr>
</table>
<p style="text-align:center; font-size:16px; line-height:2; margin:80px 0;">위와 같이 위촉하였음을 증명합니다.</p>