fix: [approvals] 사용인감계 미리보기를 인감비교 형식으로 통일

- edit/show 페이지의 buildSealUsagePreviewHtml을 법인인감|사용인감 비교 레이아웃으로 교체
- 구 테이블 형식(인감종류/비고 필드) 제거
- create 페이지와 동일한 확약문구, 일자 포맷, 회사정보 레이아웃 적용
This commit is contained in:
김보곤
2026-03-06 21:03:15 +09:00
parent c850172f5b
commit 2e4cccc19e
2 changed files with 85 additions and 89 deletions

View File

@@ -755,19 +755,7 @@ function applyBodyTemplate(formId) {
document.getElementById('su-usage-date').value = suContent.usage_date || '';
document.getElementById('su-purpose').value = suContent.purpose || '';
document.getElementById('su-submit-to').value = suContent.submit_to || '';
document.getElementById('su-remarks').value = suContent.remarks || '';
// 인감종류 복원
const sealTypeSelect = document.getElementById('su-seal-type');
const sealType = suContent.seal_type || '';
const predefinedSeals = ['법인인감', '사용인감', '대표이사 인감', '직인'];
if (predefinedSeals.includes(sealType)) {
sealTypeSelect.value = sealType;
} else if (sealType) {
sealTypeSelect.value = '__custom__';
document.getElementById('su-seal-type-custom-wrap').style.display = '';
document.getElementById('su-seal-type-custom').value = sealType;
}
document.getElementById('su-attachment-desc').value = suContent.attachment_desc || '';
}
}
@@ -860,10 +848,9 @@ function applyBodyTemplate(formId) {
formContent = {
usage_date: document.getElementById('su-usage-date').value,
seal_type: getSealUsageType(),
purpose: suPurpose,
submit_to: suSubmitTo,
remarks: document.getElementById('su-remarks').value.trim(),
attachment_desc: document.getElementById('su-attachment-desc').value.trim(),
company_name: document.getElementById('su-company-name').value,
business_num: document.getElementById('su-business-num').value,
ceo_name: document.getElementById('su-ceo-name').value,
@@ -1113,63 +1100,59 @@ function buildCertPreviewHtml(d) {
// 사용인감계 관련 함수
// =========================================================================
document.getElementById('su-seal-type')?.addEventListener('change', function() {
const customWrap = document.getElementById('su-seal-type-custom-wrap');
if (this.value === '__custom__') {
customWrap.style.display = '';
document.getElementById('su-seal-type-custom').focus();
} else {
customWrap.style.display = 'none';
}
});
function getSealUsageType() {
const sel = document.getElementById('su-seal-type');
if (sel.value === '__custom__') {
return document.getElementById('su-seal-type-custom').value.trim() || '기타';
}
return sel.value;
}
function buildSealUsagePreviewHtml(data) {
const e = (s) => s ? String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') : '-';
const dateObj = data.usage_date ? new Date(data.usage_date + 'T00:00:00') : new Date();
const y = dateObj.getFullYear();
const m = String(dateObj.getMonth() + 1).padStart(2, ' ');
const d = String(dateObj.getDate()).padStart(2, ' ');
return `
<div style="text-align:center; margin-bottom:48px;">
<h1 style="font-size:28px; font-weight:700; letter-spacing:12px; margin:0;">사 용 인 감 계</h1>
<div style="text-align:center; margin-bottom:40px;">
<h1 style="font-size:26px; font-weight:700; letter-spacing:14px; margin:0;">사 용 인 감 계</h1>
</div>
<table style="width:100%; border-collapse:collapse; margin-bottom:36px; font-size:14px;">
<!-- 인감 비교란 -->
<table style="width:360px; margin:0 auto 32px; border-collapse:collapse;">
<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; width:120px; text-align:center;">사용일자</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.usage_date)}</td>
<td style="border:1px solid #333; padding:8px; text-align:center; font-weight:600; font-size:13px; width:180px; background:#f8f8f8;">법인인감</td>
<td style="border:1px solid #333; padding:8px; text-align:center; font-weight:600; font-size:13px; width:180px; background:#f8f8f8;">사용인감</td>
</tr>
<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; text-align:center;">인감종류</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.seal_type)}</td>
<td style="border:1px solid #333; height:140px; text-align:center; vertical-align:middle;">
<span style="color:#bbb; font-size:11px;">(인감 날인)</span>
</td>
<td style="border:1px solid #333; height:140px; text-align:center; vertical-align:middle;">
<span style="color:#bbb; font-size:11px;">(인감 날인)</span>
</td>
</tr>
<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; text-align:center;">용 도</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.purpose)}</td>
</tr>
<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; text-align:center;">제출처</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.submit_to)}</td>
</tr>
${data.remarks ? `<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; text-align:center;"> </td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.remarks)}</td>
</tr>` : ''}
</table>
<p style="text-align:center; font-size:13px; color:#666; margin-bottom:36px;">
위와 같이 인감 사용을 신청하오니 허가하여 주시기 바랍니다.
</p>
<!-- 용도 / 제출처 -->
<div style="font-size:13px; line-height:2; margin-bottom:8px;">
<p style="margin:0;"><span style="font-weight:600;">용도:</span> ${e(data.purpose)}</p>
<p style="margin:0;"><span style="font-weight:600;">제출처:</span> ${e(data.submit_to)}</p>
</div>
<div style="margin-top:40px; padding:20px 24px; border:1px solid #ddd; border-radius:6px; background:#fafafa;">
<p style="font-size:13px; margin:4px 0; color:#333;"><span style="display:inline-block; width:110px; font-weight:600;">상 호</span>: ${e(data.company_name)}</p>
<p style="font-size:13px; margin:4px 0; color:#333;"><span style="display:inline-block; width:110px; font-weight:600;">사업자등록번호</span>: ${e(data.business_num)}</p>
<p style="font-size:13px; margin:4px 0; color:#333;"><span style="display:inline-block; width:110px; font-weight:600;">주 소</span>: ${e(data.company_address)}</p>
<p style="font-size:13px; margin:4px 0; color:#333;"><span style="display:inline-block; width:110px; font-weight:600;">대표이사</span>: ${e(data.ceo_name)}</p>
<!-- 확약 문구 -->
<div style="margin:28px 0; padding:16px 20px; border:1px solid #ccc; border-radius:4px; background:#fafafa;">
<p style="font-size:12px; line-height:1.8; margin:0; color:#333;">
위 사용인감은 당사에서 사용하는 인감입니다. 당사는 위 인감사용으로 인한 모든 책임을 질 것을 확약하고 사용인감계를 제출합니다.
</p>
</div>
<!-- 첨부서류 -->
${data.attachment_desc ? `<p style="font-size:12px; margin:0 0 24px; color:#333;"><span style="font-weight:600;">첨부서류:</span> ${e(data.attachment_desc)}</p>` : ''}
<!-- 일자 -->
<p style="text-align:center; font-size:14px; margin:32px 0 28px; letter-spacing:2px;">${y}년 ${m}월 ${d}일</p>
<!-- 회사 정보 -->
<div style="margin-top:20px; font-size:12px; line-height:2;">
<p style="margin:0;"><span style="display:inline-block; width:110px; font-weight:600; letter-spacing:6px;">상 호</span>: ${e(data.company_name)}</p>
<p style="margin:0;"><span style="display:inline-block; width:110px; font-weight:600;">사업자등록번호</span>: ${e(data.business_num)}</p>
<p style="margin:0;"><span style="display:inline-block; width:110px; font-weight:600; letter-spacing:6px;">주 소</span>: ${e(data.company_address)}</p>
<p style="margin:0;"><span style="display:inline-block; width:110px; font-weight:600;">대표이사</span>: ${e(data.ceo_name)}</p>
</div>
`;
}
@@ -1177,10 +1160,9 @@ function buildSealUsagePreviewHtml(data) {
function openSealUsagePreview() {
const data = {
usage_date: document.getElementById('su-usage-date').value,
seal_type: getSealUsageType(),
purpose: document.getElementById('su-purpose').value,
submit_to: document.getElementById('su-submit-to').value,
remarks: document.getElementById('su-remarks').value,
attachment_desc: document.getElementById('su-attachment-desc').value,
company_name: document.getElementById('su-company-name').value,
business_num: document.getElementById('su-business-num').value,
ceo_name: document.getElementById('su-ceo-name').value,

View File

@@ -801,43 +801,57 @@ function _buildCertHtml(d) {
function buildSealUsageShowPreviewHtml(data) {
const e = (s) => s ? String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') : '-';
const dateObj = data.usage_date ? new Date(data.usage_date + 'T00:00:00') : new Date();
const y = dateObj.getFullYear();
const m = String(dateObj.getMonth() + 1).padStart(2, ' ');
const d = String(dateObj.getDate()).padStart(2, ' ');
return `
<div style="text-align:center; margin-bottom:48px;">
<h1 style="font-size:28px; font-weight:700; letter-spacing:12px; margin:0;">사 용 인 감 계</h1>
<div style="text-align:center; margin-bottom:40px;">
<h1 style="font-size:26px; font-weight:700; letter-spacing:14px; margin:0;">사 용 인 감 계</h1>
</div>
<table style="width:100%; border-collapse:collapse; margin-bottom:36px; font-size:14px;">
<!-- 인감 비교란 -->
<table style="width:360px; margin:0 auto 32px; border-collapse:collapse;">
<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; width:120px; text-align:center;">사용일자</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.usage_date)}</td>
<td style="border:1px solid #333; padding:8px; text-align:center; font-weight:600; font-size:13px; width:180px; background:#f8f8f8;">법인인감</td>
<td style="border:1px solid #333; padding:8px; text-align:center; font-weight:600; font-size:13px; width:180px; background:#f8f8f8;">사용인감</td>
</tr>
<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; text-align:center;">인감종류</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.seal_type)}</td>
<td style="border:1px solid #333; height:140px; text-align:center; vertical-align:middle;">
<span style="color:#bbb; font-size:11px;">(인감 날인)</span>
</td>
<td style="border:1px solid #333; height:140px; text-align:center; vertical-align:middle;">
<span style="color:#bbb; font-size:11px;">(인감 날인)</span>
</td>
</tr>
<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; text-align:center;">용 도</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.purpose)}</td>
</tr>
<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; text-align:center;">제출처</td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.submit_to)}</td>
</tr>
${data.remarks ? `<tr>
<td style="border:1px solid #333; padding:10px 14px; background:#f8f8f8; font-weight:600; text-align:center;"> </td>
<td style="border:1px solid #333; padding:10px 14px;">${e(data.remarks)}</td>
</tr>` : ''}
</table>
<p style="text-align:center; font-size:13px; color:#666; margin-bottom:36px;">
위와 같이 인감 사용을 신청하오니 허가하여 주시기 바랍니다.
</p>
<!-- 용도 / 제출처 -->
<div style="font-size:13px; line-height:2; margin-bottom:8px;">
<p style="margin:0;"><span style="font-weight:600;">용도:</span> ${e(data.purpose)}</p>
<p style="margin:0;"><span style="font-weight:600;">제출처:</span> ${e(data.submit_to)}</p>
</div>
<div style="margin-top:40px; padding:20px 24px; border:1px solid #ddd; border-radius:6px; background:#fafafa;">
<p style="font-size:13px; margin:4px 0; color:#333;"><span style="display:inline-block; width:110px; font-weight:600;">상 호</span>: ${e(data.company_name)}</p>
<p style="font-size:13px; margin:4px 0; color:#333;"><span style="display:inline-block; width:110px; font-weight:600;">사업자등록번호</span>: ${e(data.business_num)}</p>
<p style="font-size:13px; margin:4px 0; color:#333;"><span style="display:inline-block; width:110px; font-weight:600;">주 소</span>: ${e(data.company_address)}</p>
<p style="font-size:13px; margin:4px 0; color:#333;"><span style="display:inline-block; width:110px; font-weight:600;">대표이사</span>: ${e(data.ceo_name)}</p>
<!-- 확약 문구 -->
<div style="margin:28px 0; padding:16px 20px; border:1px solid #ccc; border-radius:4px; background:#fafafa;">
<p style="font-size:12px; line-height:1.8; margin:0; color:#333;">
위 사용인감은 당사에서 사용하는 인감입니다. 당사는 위 인감사용으로 인한 모든 책임을 질 것을 확약하고 사용인감계를 제출합니다.
</p>
</div>
<!-- 첨부서류 -->
${data.attachment_desc ? `<p style="font-size:12px; margin:0 0 24px; color:#333;"><span style="font-weight:600;">첨부서류:</span> ${e(data.attachment_desc)}</p>` : ''}
<!-- 일자 -->
<p style="text-align:center; font-size:14px; margin:32px 0 28px; letter-spacing:2px;">${y}년 ${m}월 ${d}일</p>
<!-- 회사 정보 -->
<div style="margin-top:20px; font-size:12px; line-height:2;">
<p style="margin:0;"><span style="display:inline-block; width:110px; font-weight:600; letter-spacing:6px;">상 호</span>: ${e(data.company_name)}</p>
<p style="margin:0;"><span style="display:inline-block; width:110px; font-weight:600;">사업자등록번호</span>: ${e(data.business_num)}</p>
<p style="margin:0;"><span style="display:inline-block; width:110px; font-weight:600; letter-spacing:6px;">주 소</span>: ${e(data.company_address)}</p>
<p style="margin:0;"><span style="display:inline-block; width:110px; font-weight:600;">대표이사</span>: ${e(data.ceo_name)}</p>
</div>
`;
}