fix: [approvals] 위촉증명서 레이아웃 개선 - 테이블 행 높이/글자크기 증가

- HTML 미리보기: th/td padding 16px 18px, font-size 16px, th width 140px - PDF(TCPDF): rowHeight 8→12, 본문 폰트 10→12, 증명문구/날짜 12→14, 회사명 14→16 - create/show 동일하게 적용
2026-03-06 10:19:04 +09:00
parent b60f2109af
commit f00eee7f12
3 changed files with 28 additions and 28 deletions
--- a/app/Services/AppointmentCertService.php
+++ b/app/Services/AppointmentCertService.php
@@ -95,7 +95,7 @@ public function generatePdfResponse(array $content): \Illuminate\Http\Response

        $pageWidth = $pdf->getPageWidth() - 40;
        $thWidth = 30;
-        $rowHeight = 8;
+        $rowHeight = 12;

        // 성명 / (빈칸)
        $this->addTableRow($pdf, $font, [
@@ -125,21 +125,21 @@ public function generatePdfResponse(array $content): \Illuminate\Http\Response
        $pdf->Ln(30);

        // 증명 문구
-        $pdf->SetFont($font, '', 12);
-        $pdf->Cell(0, 10, '위와 같이 위촉하였음을 증명합니다.', 0, 1, 'C');
+        $pdf->SetFont($font, '', 14);
+        $pdf->Cell(0, 12, '위와 같이 위촉하였음을 증명합니다.', 0, 1, 'C');
        $pdf->Ln(20);

        // 발급일
        $issueDate = $content['issue_date'] ?? date('Y-m-d');
        $issueDateFormatted = $this->formatDate($issueDate);
-        $pdf->SetFont($font, 'B', 12);
-        $pdf->Cell(0, 10, $issueDateFormatted, 0, 1, 'C');
+        $pdf->SetFont($font, 'B', 14);
+        $pdf->Cell(0, 12, $issueDateFormatted, 0, 1, 'C');
        $pdf->Ln(30);

        // 회사명 + 대표이사
        $ceoName = $content['ceo_name'] ?? '';
-        $pdf->SetFont($font, 'B', 14);
-        $pdf->Cell(0, 10, ($content['company_name'] ?? '').'    대표이사    '.$ceoName.' (인)', 0, 1, 'C');
+        $pdf->SetFont($font, 'B', 16);
+        $pdf->Cell(0, 12, ($content['company_name'] ?? '').'    대표이사    '.$ceoName.' (인)', 0, 1, 'C');

        $pdfContent = $pdf->Output('', 'S');
        $fileName = '위촉증명서_'.($content['name'] ?? '').'.pdf';
@@ -153,22 +153,22 @@ public function generatePdfResponse(array $content): \Illuminate\Http\Response
    private function addTableRow(\TCPDF $pdf, string $font, array $cells): void
    {
        $pageWidth = $pdf->getPageWidth() - 40;
-        $rowHeight = 8;
+        $rowHeight = 12;
        $thWidth = 30;

        if (count($cells) === 1) {
-            $pdf->SetFont($font, 'B', 10);
+            $pdf->SetFont($font, 'B', 12);
            $pdf->SetFillColor(248, 249, 250);
            $pdf->Cell($thWidth, $rowHeight, $cells[0][0], 1, 0, 'L', true);
-            $pdf->SetFont($font, '', 10);
+            $pdf->SetFont($font, '', 12);
            $pdf->Cell($pageWidth - $thWidth, $rowHeight, $cells[0][1], 1, 1, 'L');
        } else {
            $tdWidth = ($pageWidth - $thWidth * 2) / 2;
            foreach ($cells as $cell) {
-                $pdf->SetFont($font, 'B', 10);
+                $pdf->SetFont($font, 'B', 12);
                $pdf->SetFillColor(248, 249, 250);
                $pdf->Cell($thWidth, $rowHeight, $cell[0], 1, 0, 'L', true);
-                $pdf->SetFont($font, '', 10);
+                $pdf->SetFont($font, '', 12);
                $pdf->Cell($tdWidth, $rowHeight, $cell[1], 1, 0, 'L');
            }
            $pdf->Ln();
--- a/resources/views/approvals/create.blade.php
+++ b/resources/views/approvals/create.blade.php
@@ -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:10px 14px;font-size:14px;} th{background:#f8f9fa;font-weight:600;text-align:left;white-space:nowrap;width:120px;}</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%;} 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('</head><body><div class="cert-page">');
    win.document.write(content);
    win.document.write('</div></body></html>');
@@ -1292,11 +1292,11 @@ 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:10px 14px; background:#f8f9fa; font-weight:600; text-align:left; white-space:nowrap; width:120px; font-size:14px;';
-    const tdStyle = 'border:1px solid #333; padding:10px 14px; font-size:14px;';
+    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;';

    return `
-        <h1 style="text-align:center; font-size:28px; font-weight:700; letter-spacing:12px; margin-bottom:60px;">위 촉 증 명 서</h1>
+        <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;">
            <tr>
@@ -1325,17 +1325,17 @@ function buildAppointmentCertPreviewHtml(d) {
            </tr>
        </table>

-        <p style="text-align:center; font-size:15px; line-height:2; margin:80px 0;">
+        <p style="text-align:center; font-size:16px; line-height:2; margin:80px 0;">
            위와 같이 위촉하였음을 증명합니다.
        </p>

-        <p style="text-align:center; font-size:15px; font-weight:500; margin-bottom:80px;">
+        <p style="text-align:center; font-size:16px; font-weight:500; margin-bottom:80px;">
            ${e(d.issueDateFormatted)}
        </p>

        <div style="text-align:center; margin-top:60px;">
-            <p style="font-size:16px; font-weight:600; margin-bottom:8px;">${e(d.company)}</p>
-            <p style="font-size:14px; color:#555;">대표이사 &nbsp;&nbsp; ${e(d.ceoName)} &nbsp;&nbsp; (인)</p>
+            <p style="font-size:18px; font-weight:600; margin-bottom:10px;">${e(d.company)}</p>
+            <p style="font-size:15px; color:#555;">대표이사 &nbsp;&nbsp; ${e(d.ceoName)} &nbsp;&nbsp; (인)</p>
        </div>
    `;
 }
--- a/resources/views/approvals/show.blade.php
+++ b/resources/views/approvals/show.blade.php
@@ -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:10px 14px;font-size:14px;} th{background:#f8f9fa;font-weight:600;text-align:left;white-space:nowrap;width:120px;}</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%;} 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('</head><body><div class="cert-page">');
    win.document.write(content);
    win.document.write('</div></body></html>');
@@ -609,11 +609,11 @@ 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:10px 14px; background:#f8f9fa; font-weight:600; text-align:left; white-space:nowrap; width:120px; font-size:14px;';
-    const tdStyle = 'border:1px solid #333; padding:10px 14px; font-size:14px;';
+    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;';

    return `
-        <h1 style="text-align:center; font-size:28px; font-weight:700; letter-spacing:12px; margin-bottom:60px;">위 촉 증 명 서</h1>
+        <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;">
            <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>
@@ -621,11 +621,11 @@ function _buildAppointmentCertHtml(d) {
            <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:15px; line-height:2; margin:80px 0;">위와 같이 위촉하였음을 증명합니다.</p>
-        <p style="text-align:center; font-size:15px; font-weight:500; margin-bottom:80px;">${e(d.issueDateFormatted)}</p>
+        <p style="text-align:center; font-size:16px; line-height:2; margin:80px 0;">위와 같이 위촉하였음을 증명합니다.</p>
+        <p style="text-align:center; font-size:16px; font-weight:500; margin-bottom:80px;">${e(d.issueDateFormatted)}</p>
        <div style="text-align:center; margin-top:60px;">
-            <p style="font-size:16px; font-weight:600; margin-bottom:8px;">${e(d.company)}</p>
-            <p style="font-size:14px; color:#555;">대표이사 &nbsp;&nbsp; ${e(d.ceoName)} &nbsp;&nbsp; (인)</p>
+            <p style="font-size:18px; font-weight:600; margin-bottom:8px;">${e(d.company)}</p>
+            <p style="font-size:15px; color:#555;">대표이사 &nbsp;&nbsp; ${e(d.ceoName)} &nbsp;&nbsp; (인)</p>
        </div>
    `;
 }