[다모아 : 기능 구현] 전자 계약서 작성 및 PDF 저장하기

[다모아 : 기능 구현] 전자 계약서 작성하기

 

 

 

1. 계약서 작성하기 페이지

<div class="form-container" style="display:none;">
    <h1 class="title">계약서 작성하기</h1>
    <form id="contractForm">
        <label for="companyName">사업체명:</label>
        <input type="text" id="companyName" required><br>

        <label for="freelancerName">근로자 이름:</label>
        <input type="text" id="freelancerName" required><br>

        <label for="year">근로개시일 연도:</label>
        <input type="number" id="year" required><br>

        <label for="month">근로개시일 월:</label>
        <input type="number" id="month" required><br>

        <label for="day">근로개시일 일:</label>
        <input type="number" id="day" required><br>

        <label for="place">근무장소:</label>
        <input type="text" id="place" required><br>

        <label for="work">업무 내용:</label>
        <input type="text" id="work" required><br>

        <label for="startHour">근무 시작 시간:</label>
        <input type="number" id="startHour" required>시
        <input type="number" id="startMinute" required>분<br>

        <label for="finishHour">근무 종료 시간:</label>
        <input type="number" id="finishHour" required>시
        <input type="number" id="finishMinute" required>분<br>

        <label for="startRestHour">휴게 시작 시간:</label>
        <input type="number" id="startRestHour">시
        <input type="number" id="startRestMinute">분<br>

        <label for="finishRestHour">휴게 종료 시간:</label>
        <input type="number" id="finishRestHour">시
        <input type="number" id="finishRestMinute">분<br>

        <label for="workDayNum">근무일 수:</label>
        <input type="number" id="workDayNum" required><br>

        <label for="restDays">주휴일:</label>
        <input type="text" id="restDays" required><br>

        <label for="hourMoney">임금:</label>
        <input type="number" id="hourMoney" required>원<br>

        <label for="salaryDay">임금 지급일:</label>
        <input type="number" id="salaryDay" required><br>

        <label>지급 방법:</label>
        <input type="radio" name="salaryMethod" value="직접 지급" required>직접 지급
        <input type="radio" name="salaryMethod" value="은행 입금" required>은행 입금<br>

        <label>사회 보험 적용 여부:</label><br>
        <input type="checkbox" id="goyong" value="고용보험">고용보험
        <input type="checkbox" id="sanjae" value="산재 보험">산재 보험
        <input type="checkbox" id="gookmin" value="국민 보험">국민 보험
        <input type="checkbox" id="gungang" value="건강 보험">건강 보험<br>

        <label for="companyPhoneNumber">사업체 전화:</label>
        <input type="text" id="companyPhoneNumber" required><br>

        <label for="companyAddress">사업체 주소:</label>
        <input type="text" id="companyAddress" required><br>

        <label for="companyOwner">사업체 대표자:</label>
        <input type="text" id="companyOwner" required><br>

        <label for="companySign">사업체 서명 이미지:</label>
        <input type="text" id="companySign" required><br>

        <label for="freelancerAddress">근로자 주소:</label>
        <input type="text" id="freelancerAddress" required><br>

        <label for="freelancerContact">근로자 연락처:</label>
        <input type="text" id="freelancerContact" required><br>

        <label for="companySign">근로자 서명 이미지:</label>
        <input type="text" id="companySign" required><br>

        <button type="submit">계약서 생성</button>
    </form>
</div>

 

 

2. 계약서 제작 페이지 & 로직

(1) HTML

<div class="contract-container" id="contractOutput">
    <h1 class="title">계약서 확인</h1>
    <button onclick="printContract()">계약서 출력하기</button>
    <div class="contract-box" id="contract-doc">
        <div class="flex-box text-box">
            <h4 class="contract-title">
                <b>표준 근로 계약서 (상용 근로 계약서)</b>
            </h4>
        </div>
        <div>
            <div class="flex-box text-box">
                <p id="outputCompanyName"></p> (이하 "사업주" 라 함)과(와) <p id="outputFreelancerName"></p>(이하 "근로자"라 함)
                은 다음과 같이 근로계약을 체결한다.
            </div>
            <div class="flex-box text-box">1. 근로개시일: <span id="outputStartDate"></span>부터</div>
            <div class="flex-box text-box">2. 근무장소: <span id="outputPlace"></span></div>
            <div class="flex-box text-box">3. 업무의 내용: <span id="outputWork"></span></div>
            <div class="flex-box text-box">4. 소정 근로 시간: <span id="outputWorkHours"></span> </div>
            <div class="flex-box text-box">(휴게 시간: <span id="outputRestHours"></span>)</div>
            <div class="flex-box text-box">5. 근무일/휴일: 매주 <span id="outputWorkDayNum"></span>일 근무, 주휴일 매주 <span id="outputRestDays"></span>요일</div>
            <div class="flex-box text-box">6. 임금</div>
            <div class="flex-box text-box">-월(일,시간)급:<span id="outputHourMoney"></span>원</div>
            <div class="flex-box text-box">-임금지급일: 매월(매주 또는 매일) <span id="outputSalaryDay"></span>일 (휴일의 경우는 전일 지급)</div>
            <div class="flex-box text-box">-지급 방법: <span id="outputSalaryMethod"></span></div>
            <div class="flex-box text-box">7. 연차 유급 휴가</div>
            <div class="flex-box text-box">-연차 유급 휴가는 근로 기준법에서 정하는 바에 따라 부여함</div>
            <div class="flex-box text-box">8. 사회 보험 적용 여부 (해당 란에 체크): <span id="outputInsurance"></span></div>
            <div class="flex-box text-box">9. 근로 계약서 교부</div>
            <div class="flex-box text-box">- 사업주는 근로 계약을 체결함과 동시에 본 계약서를 사본하여 근로자의 교부 요구와 관계 없이 근로자에게 교부함 (근로기준법 제 17조 이행)</div>
            <div class="flex-box text-box">10. 근로계약, 취업규칙 등의 성실한 이행의무</div>
            <div class="flex-box text-box">- 사업주와 근로자는 각자가 근로계약, 취업규칙, 단체협약을 지키고 성실하게 이행하여야 함</div>
            <div class="flex-box text-box">11. 기타 </div>
            <div class="flex-box text-box">- 이 계약에 정함이 없는 사항은 근로 기준법령에 의함</div>
            <div class="flex-box text-box" id="outputCreatedDate"></div>
        </div>
        <div class="flex-box text-box">(사업주) 사업체명: <span id="outputCompanyName"></span>   (전화: <span id="outputCompanyPhoneNumber"></span>)</div>
        <div class="flex-box text-box">주소: <span id="outputCompanyAddress"></span></div>
        <div class="flex-box text-box">
            <div>대표자: <span id="outputCompanyOwner"></span></div>
            <div>(서명) <img id="outputCompanySign" src=""></div>
        </div>
        <div class="flex-box text-box">(근로자) 주소: <span id="outputFreelancerAddress"></span></div>
        <div class="flex-box text-box">연락처: <span id="outputFreelancerContact"></span></div>
        <div class="flex-box text-box">
            <div>성명: <span id="outputFreelancerName"></span></div>
            <div>(서명) <img id="outputFreelancerSign" src=""></div>
        </div>
    </div>
</div>

 

(2) JavaScript

<script>
    document.getElementById('contractForm').addEventListener('submit', function(event) {
        event.preventDefault();

        // 폼에서 값을 가져오기
        const companyName = document.getElementById('companyName').value;
        const freelancerName = document.getElementById('freelancerName').value;
        const year = document.getElementById('year').value;
        const month = document.getElementById('month').value;
        const day = document.getElementById('day').value;
        const place = document.getElementById('place').value;
        const work = document.getElementById('work').value;
        const startHour = document.getElementById('startHour').value;
        const startMinute = document.getElementById('startMinute').value;
        const finishHour = document.getElementById('finishHour').value;
        const finishMinute = document.getElementById('finishMinute').value;
        const startRestHour = document.getElementById('startRestHour').value;
        const startRestMinute = document.getElementById('startRestMinute').value;
        const finishRestHour = document.getElementById('finishRestHour').value;
        const finishRestMinute = document.getElementById('finishRestMinute').value;
        const workDayNum = document.getElementById('workDayNum').value;
        const restDays = document.getElementById('restDays').value;
        const hourMoney = document.getElementById('hourMoney').value;
        const salaryDay = document.getElementById('salaryDay').value;
        const salaryMethod = document.querySelector('input[name="salaryMethod"]:checked').value;
        const insuranceOptions = [];
        if (document.getElementById('goyong').checked) insuranceOptions.push('고용보험');
        if (document.getElementById('sanjae').checked) insuranceOptions.push('산재 보험');
        if (document.getElementById('gookmin').checked) insuranceOptions.push('국민 보험');
        if (document.getElementById('gungang').checked) insuranceOptions.push('건강 보험');
        const companyPhoneNumber = document.getElementById('companyPhoneNumber').value;
        const companyAddress = document.getElementById('companyAddress').value;
        const companyOwner = document.getElementById('companyOwner').value;
        const companySign = document.getElementById('companySign').value;

        // 계약서 출력
        document.getElementById('outputCompanyName').textContent = companyName;
        document.getElementById('outputFreelancerName').textContent = freelancerName;
        document.getElementById('outputStartDate').textContent = `${year}년 ${month}월 ${day}일`;
        document.getElementById('outputPlace').textContent = place;
        document.getElementById('outputWork').textContent = work;
        document.getElementById('outputWorkHours').textContent = `${startHour}시 ${startMinute}분 ~ ${finishHour}시 ${finishMinute}분`;
        document.getElementById('outputRestHours').textContent = `${startRestHour}시 ${startRestMinute}분 ~ ${finishRestHour}시 ${finishRestMinute}분`;
        document.getElementById('outputWorkDayNum').textContent = workDayNum;
        document.getElementById('outputRestDays').textContent = restDays;
        document.getElementById('outputHourMoney').textContent = hourMoney;
        document.getElementById('outputSalaryDay').textContent = salaryDay;
        document.getElementById('outputSalaryMethod').textContent = salaryMethod;
        document.getElementById('outputInsurance').textContent = insuranceOptions.join(', ') || '없음';
        document.getElementById('outputCompanyPhoneNumber').textContent = companyPhoneNumber;
        document.getElementById('outputCompanyAddress').textContent = companyAddress;
        document.getElementById('outputCompanyOwner').textContent = companyOwner;
        document.getElementById('outputCompanySign').src = companySign;
        // 계약서 출력
        document.getElementById('outputFreelancerAddress').textContent = '근로자 주소 입력'; // 여기서 입력된 주소 사용
        document.getElementById('outputFreelancerContact').textContent = '근로자 연락처 입력'; // 여기서 입력된 연락처 사용


        // 계약서 출력 보이기
        document.getElementById('contractOutput').style.display = 'none';
        document.getElementById('form-container').style.display = 'block';

    });

 

 

3. jsPDF를 통해 계약서 양식 PDF로 저장하기

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function printContract() {
    html2canvas(document.getElementById('contract-doc')).then(function(canvas) {
        var imgData = canvas.toDataURL('image/png');
        var imgWidth = 210;
        var imgHeight = canvas.height * imgWidth / canvas.width;
        var doc = new jsPDF('p', 'mm', 'a4');

        doc.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
        doc.save('contract.pdf');
    }).catch(function(error) {
        console.error('Error generating PDF: ', error);
    });
</script>