• 티스토리 홈
  • 프로필사진
    Song hyun
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
Song hyun
  • 프로필사진
    Song hyun
    • 분류 전체보기 (780)
      • 백준 (0)
      • 영어 (2)
        • Diary (0)
        • Toast Masters (2)
      • 메모 (13)
      • 설치 메뉴얼 (30)
      • Java (178)
      • MySQL (60)
      • JSP (67)
      • Springboot (46)
      • HTML,CSS, JS (71)
        • HTML (8)
        • CSS (12)
        • JavaScript (37)
        • HTML&CSS 스터디 (13)
      • C++ (7)
      • Linux (7)
      • JPA (34)
      • Kotlin (2)
      • Flutter (42)
      • Error Note (39)
      • 디자인 패턴 (12)
      • 디지털논리회로 (4)
      • 데이터베이스 시스템 (8)
      • 알고리즘 (7)
      • 운영체제 (3)
      • 이산수학 (3)
      • 인공지능 (1)
      • 자료 구조 (14)
        • 기본 개념 (14)
        • 자료구조 스터디 (0)
      • 💡My project (76)
        • 팩맨 : Java Swing 게임 제작 프로젝트 (6)
        • 네이트톡 : Java 소켓 통신 프로젝트 (4)
        • 포켓옥션 : HikariCP&JDBC CRUD 프.. (3)
        • 이지 부산 : BDIA-Devton 2024 프로.. (20)
        • 그린 유니버시티 : JSP를 사용한 학사관리 프로.. (1)
        • 애드 포커 : 웹 소켓과 Spring을 사용한 카.. (1)
        • 셸위 : 게임 친구 매칭 사이트 (21)
        • 다모아 : 개발자 중개 플랫폼 (20)
      • 📗스터디 (13)
        • CNN : 웹개발 스터디 (10)
        • Node&React로 유튜브 사이트 만들기 (3)
      • 📙독서 및 강연 기록 (36)
        • 강연 (14)
        • 독서 (22)
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • [다모아 : 기능 구현] 전자 계약서 작성 및 PDF 저장하기
        2024년 10월 22일
        • Song hyun
        • 작성자
        • 2024.10.22.:59
        728x90
        반응형

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

         

         

         

        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>

         

         

        728x90
        반응형

        '💡My project > 다모아 : 개발자 중개 플랫폼' 카테고리의 다른 글

        [다모아 : 회고] 메인 페이지 UI 및 광고 슬라이드, 검색 기능 제작 (10.25-10.29)  (0) 2024.10.29
        [다모아] 실무자 멘토링(2024.10.23)  (1) 2024.10.23
        [다모아 : 회고] 2024.10.22(프로젝트 일곱번째 날) 회고록 - 전자 계약서 기능 구현, JS로 PDF 저장하기, 노션 정리  (0) 2024.10.22
        [다모아 : 회고] 2024.10.21(프로젝트 여섯번째 날) 회고록 - 전자서명 기능 구현, 전자계약서 기능 연구  (0) 2024.10.21
        [다모아 : 기능 분석] 계약서 등록 및 작성 기능 연구  (0) 2024.10.21
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바