Code - yangart/sejongOn

<!DOCTYPE html> <html lang="ko"> <head> <title>온세종학교</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta name="format-detection" content="telephone=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> <link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet">  <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script> <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script>     <script src="/resources/front/site/SITE_00000/js/_layout.js"></script>     <script src="/resources/front/site/SITE_00000/js/common.js"></script> <script src="/resources/front/site/SITE_00000/js/common-custom.js"></script>  </head> <body> <div class="accessibility"> <a href="#skipToContents" title="콘텐츠를 바로 볼 수 있도록 건너뛰기합니다.">콘텐츠 바로가기</a> </div>  <div class="container">  <header class="site-header"></header> <div class="site-body" id="skipToContents"> <div class="wrap"> <div class="page-tit-area"> <div class="l-area"> <h2 class="title-xlg">수업 만들기</h2> </div> <div class="r-area"> <div class="btn-group"> <button class="btn secondary">수업 설계안 가져오기</button> </div> </div> </div> <section class="section"> <div class="summary"> <i class="ico-info"></i> <div class="txt-area"> <p>아래 정보를 입력해 수업을 만들어보세요.</p> </div> </div> <div class="section-tit-area"> <div class="l-area"> <h3 class="txt-hide">기본 정보</h3> </div> <div class="r-area"> <p class="msg"><i class="required">*<span class="txt-hide">필수</span></i> 필수 입력</p> </div> </div> <div class="write-type"> <table> <caption>기본 정보 입력</caption> <colgroup> <col style="width: 160px;"> <col> </colgroup> <tbody> <tr> <th scope="row">수업분류<i class="required">필수</i></th> <td> <fieldset> <legend>클래스 선택 1</legend> <div class="checkradio"> <input type="radio" name="ctype1" id="ctype1-1" checked> <label for="ctype1-1">대면수업</label> </div> <div class="checkradio"> <input type="radio" name="ctype1" id="ctype1-2"> <label for="ctype1-2">영상수업</label> </div> <div class="checkradio"> <input type="radio" name="ctype1" id="ctype1-3"> <label for="ctype1-3">화상수업</label> </div> <div class="checkradio"> <input type="radio" name="ctype1" id="ctype1-4"> <label for="ctype1-4">공동문서편집</label> </div> </fieldset> </td> </tr> <tr> <th scope="row">수업명<i class="required">필수</i></th> <td> <input type="text" class="percent-width1" placeholder="차시 입력"> <input type="text" class="percent-width8" placeholder="수업명을 입력하세요.">  </td> </tr> <tr> <th scope="row">설명</th> <td> <textarea placeholder="설명을 입력하세요." title="설명을 입력하세요."></textarea> </td> </tr> <tr> <th scope="row">수업 시간<i class="required">필수</i></th> <td> <fieldset> <legend>수업 시간 1</legend> <ul> <li> <div class="checkradio"> <input type="radio" name="ctime1" id="ctime1-1" checked> <label for="ctime1-1">정규수업</label> <div class="checkradio-option"> <select> <option>과정 개설 시 선택한 수업시간 표시</option> </select> <div class="time-set"> <input type="date"> </div> </div> </div> </li> <li> <div class="checkradio"> <input type="radio" name="ctime1" id="ctime1-2"> <label for="ctime1-2">보강수업</label> <div class="checkradio-option"> <select> <option>요일선택</option> </select> <select> <option>교시선택</option> </select> <div class="time-set"> <select title="시작 시"> <option>00</option> </select> <span>:</span> <select title="시작 분"> <option>00</option> </select> <span>-</span> <select title="종료 시"> <option>00</option> </select> <span>:</span> <select title="종료 분"> <option>00</option> </select> </div> </div> </div> </li> </ul> </fieldset> </td> </tr> <tr> <th scope="row">썸네일</th> <td> <div class="file-add-area"> <div class="file-custom"> <input type="file" class="input-file" title="파일선택"> <div class="preview-area class-thumb"> </div> </div> <div class="item-area"> <div class="item"> <p class="txt">섬네일 이미지섬네일 이미지섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지..jpg</p> <button type="button" class="btn-ico ico-delete"><span class="txt-hide">삭제</span></button> </div> <small>* 권장 사이즈 : 640x480px</small> </div> </div> </td> </tr> <tr> <th scope="row">수업자료 파일첨부<i class="required">필수</i></th> <td> <div class="file-drag-area"> <input type="file" class="input-file"> <p>첨부할 파일을 여기에 끌어다 놓거나, 버튼을 눌러 파일을 직접 선택해주세요.<br> 대용량 파일(최대300MB)을 업로드 할 경우 서비스 적용에 다소 시간이 소요될 수 있습니다.</p> <span class="btn ico-upload primary">파일 선택</span> </div> <div class="item-list-box drag-file-list"> <div class="item"> <div class="txt-area"> <i class="ico-attach"></i> <p class="txt"> 첨부파일명.pdf </p> <small>124kb</small> </div> <div class="item-fnc-area"> <a href="#none" class="ico-download">다운로드</a> <button type="button" class="ico-delete">삭제</button> </div> </div> </div> </td> </tr> <tr> <th scope="row">공개여부<i class="required">필수</i></th> <td> <fieldset class="checkradio-area"> <legend>공개여부 선택 1</legend> <div class="checkradio"> <input type="radio" name="openYn1" id="openYn1-1" checked> <label for="openYn1-1">공개</label> </div> <div class="checkradio"> <input type="radio" name="openYn1" id="openYn1-2"> <label for="openYn1-2">비공개</label> </div> </fieldset> </td> </tr> <tr> <th scope="row">채팅 사용여부<i class="required">필수</i></th> <td> <fieldset class="checkradio-area"> <legend>채팅 사용여부 선택 1</legend> <div class="checkradio"> <input type="radio" name="chatYn1" id="chatYn1-1" checked> <label for="chatYn1-1">사용</label> </div> <div class="checkradio"> <input type="radio" name="chatYn1" id="chatYn1-2"> <label for="chatYn1-2">미사용</label> </div> </fieldset> </td> </tr> <tr> <th scope="row">수업 설계</th> <td> <button class="btn secondary">수업 설계하기</button> </td> </tr> </tbody> </table> </div> <div class="write-type"> <table> <caption>기본 정보 입력</caption> <colgroup> <col style="width: 160px;"> <col> </colgroup> <tbody> <tr> <th scope="row">수업분류<i class="required">필수</i></th> <td> <fieldset> <legend>클래스 선택 2</legend> <div class="checkradio"> <input type="radio" name="ctype2" id="ctype2-1"> <label for="ctype2-1">대면수업</label> </div> <div class="checkradio"> <input type="radio" name="ctype2" id="ctype2-2"> <label for="ctype2-2">영상수업</label> </div> <div class="checkradio"> <input type="radio" name="ctype2" id="ctype2-3" checked> <label for="ctype2-3">화상수업</label> </div> <div class="checkradio"> <input type="radio" name="ctype2" id="ctype2-4"> <label for="ctype2-4">공동문서편집</label> </div> </fieldset> </td> </tr> <tr> <th scope="row">수업명<i class="required">필수</i></th> <td> <input type="text" class="percent-width1" placeholder="차시 입력"> <input type="text" class="percent-width8" placeholder="수업명을 입력하세요.">  </td> </tr> <tr> <th scope="row">설명</th> <td> <textarea placeholder="설명을 입력하세요." title="설명을 입력하세요."></textarea> </td> </tr> <tr> <th scope="row">수업 시간<i class="required">필수</i></th> <td> <fieldset> <legend>수업 시간 2</legend> <ul> <li> <div class="checkradio"> <input type="radio" name="ctime2" id="ctime2-1" checked> <label for="ctime2-1">정규수업</label> <div class="checkradio-option"> <select> <option>과정 개설 시 선택한 수업시간 표시</option> </select> <div class="time-set"> <input type="date"> </div> </div> </div> </li> <li> <div class="checkradio"> <input type="radio" name="ctime2" id="ctime2-2"> <label for="ctime2-2">보강수업</label> <div class="checkradio-option"> <select> <option>요일선택</option> </select> <select> <option>교시선택</option> </select> <div class="time-set"> <select title="시작 시"> <option>00</option> </select> <span>:</span> <select title="시작 분"> <option>00</option> </select> <span>-</span> <select title="종료 시"> <option>00</option> </select> <span>:</span> <select title="종료 분"> <option>00</option> </select> </div> </div> </div> </li> </ul> </fieldset> </td> </tr> <tr> <th scope="row">썸네일</th> <td> <div class="file-add-area"> <div class="file-custom"> <input type="file" class="input-file" title="파일선택"> <div class="preview-area class-thumb"> </div> </div> <div class="item-area"> <div class="item"> <p class="txt">섬네일 이미지섬네일 이미지섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지..jpg</p> <button type="button" class="btn-ico ico-delete"><span class="txt-hide">삭제</span></button> </div> <small>* 권장 사이즈 : 640x480px</small> </div> </div> </td> </tr>  <tr> <th scope="row">공개여부<i class="required">필수</i></th> <td> <fieldset class="checkradio-area"> <legend>공개여부 선택 2</legend> <div class="checkradio"> <input type="radio" name="openYn2" id="openYn2-1" checked> <label for="openYn2-1">공개</label> </div> <div class="checkradio"> <input type="radio" name="openYn2" id="openYn2-2"> <label for="openYn2-2">비공개</label> </div> </fieldset> </td> </tr> </tbody> </table> </div> <div class="write-type"> <table> <caption>기본 정보 입력</caption> <colgroup> <col style="width: 160px;"> <col> </colgroup> <tbody> <tr> <th scope="row">수업분류<i class="required">필수</i></th> <td> <fieldset> <legend>클래스 선택 3</legend> <div class="checkradio"> <input type="radio" name="ctype3" id="ctype3-1"> <label for="ctype3-1">대면수업</label> </div> <div class="checkradio"> <input type="radio" name="ctype3" id="ctype3-2"> <label for="ctype3-2">영상수업</label> </div> <div class="checkradio"> <input type="radio" name="ctype3" id="ctype3-3"> <label for="ctype3-3">화상수업</label> </div> <div class="checkradio"> <input type="radio" name="ctype3" id="ctype3-4" checked> <label for="ctype3-4">공동문서편집</label> </div> </fieldset> </td> </tr> <tr> <th scope="row">수업명<i class="required">필수</i></th> <td> <input type="text" class="percent-width1" placeholder="차시 입력"> <input type="text" class="percent-width8" placeholder="수업명을 입력하세요.">  </td> </tr> <tr> <th scope="row">설명</th> <td> <textarea placeholder="설명을 입력하세요." title="설명을 입력하세요."></textarea> </td> </tr> <tr> <th scope="row">수업 시간<i class="required">필수</i></th> <td> <fieldset> <legend>수업 시간 3</legend> <ul> <li> <div class="checkradio"> <input type="radio" name="ctime3" id="ctime3-1" checked> <label for="ctime3-1">정규수업</label> <div class="checkradio-option"> <select> <option>과정 개설 시 선택한 수업시간 표시</option> </select> <div class="time-set"> <input type="date"> </div> </div> </div> </li> <li> <div class="checkradio"> <input type="radio" name="ctime3" id="ctime3-2"> <label for="ctime3-2">보강수업</label> <div class="checkradio-option"> <select> <option>요일선택</option> </select> <select> <option>교시선택</option> </select> <div class="time-set"> <select title="시작 시"> <option>00</option> </select> <span>:</span> <select title="시작 분"> <option>00</option> </select> <span>-</span> <select title="종료 시"> <option>00</option> </select> <span>:</span> <select title="종료 분"> <option>00</option> </select> </div> </div> </div> </li> </ul> </fieldset> </td> </tr> <tr> <th scope="row">썸네일</th> <td> <div class="file-add-area"> <div class="file-custom"> <input type="file" class="input-file" title="파일선택"> <div class="preview-area class-thumb"> </div> </div> <div class="item-area"> <div class="item"> <p class="txt">섬네일 이미지섬네일 이미지섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지.섬네일 이미지섬네일 이미지..jpg</p> <button type="button" class="btn-ico ico-delete"><span class="txt-hide">삭제</span></button> </div> <small>* 권장 사이즈 : 640x480px</small> </div> </div> </td> </tr>  <tr> <th scope="row">공개여부<i class="required">필수</i></th> <td> <fieldset class="checkradio-area"> <legend>공개여부 선택 3</legend> <div class="checkradio"> <input type="radio" name="openYn3" id="openYn3-1" checked> <label for="openYn3-1">공개</label> </div> <div class="checkradio"> <input type="radio" name="openYn3" id="openYn3-2"> <label for="openYn3-2">비공개</label> </div> </fieldset> </td> </tr> <tr> <th scope="row">공동문서편집</th> <td> <button class="btn secondary">공동문서 편집하기</button> </td> </tr> </tbody> </table> </div> </section> <div class="btn-cont"> <a href="#none" class="btn lg">취소</a> <a href="#none" class="btn lg primary">등록</a> </div> </div> </div> <footer class="site-footer"></footer> </div>  <div class="toast"></div>  <div class="dim"></div> <script> $(document).ready(function () { const maxFileSize = 300 * 1024 * 1024; //300mb const maxFileCount = 1; // 드래그 앤 드롭 이벤트 핸들링 $('.file-drag-area').each(function () { const $fileDragArea = $(this); const $fileList = $fileDragArea.siblings('.drag-file-list'); $fileDragArea.on('dragover', function (e) { e.preventDefault(); e.stopPropagation(); $fileDragArea.addClass('is-dragover'); }); $fileDragArea.on('dragleave', function (e) { e.preventDefault(); e.stopPropagation(); $fileDragArea.removeClass('is-dragover'); }); $fileDragArea.on('drop', function (e) { e.preventDefault(); e.stopPropagation(); $fileDragArea.removeClass('is-dragover'); const files = e.originalEvent.dataTransfer.files; if (files.length > maxFileCount) { alert(`파일은 최대 ${maxFileCount}개만 업로드할 수 있습니다.`); return; } handleFiles(files, $fileList); }); // 파일 선택 버튼 클릭 시 $fileDragArea.find('.input-file').on('change', function () { const files = this.files; if (files.length > maxFileCount) { alert(`파일은 최대 ${maxFileCount}개만 업로드할 수 있습니다.`); return; } handleFiles(files, $fileList); }); }); function handleFiles(files, $fileList) { for (const file of files) { if (file.size > maxFileSize) { alert(`${file.name}은(는) 파일 크기 제한(500KB)을 초과했습니다.`); continue; } const fileItem = ` <div class="item"> <div class="txt-area"> <i class="ico-attach"></i> <p class="txt"> ${file.name} </p> <small>${(file.size / 1024).toFixed(2)} KB</small> </div> <div class="item-fnc-area"> <a href="#none" class="ico-download">다운로드</a> <button type="button" class="ico-delete">삭제</button> </div> </div> `; $fileList.append(fileItem); } } // 파일 삭제 버튼 클릭 시 $(document).on('click', '.item .ico-delete', function () { $(this).closest('.item').remove(); }); }); </script> <script> $(document).ready(function () { $(".a-write-list").sortable({ handle: $(".a-write-list > li").find(".ico-move"), containment: "parent", update: function (event, ui) { var $list = $(this).children("li"); $list.each(function () { var $li = $(this); var newVal = $(this).index() + 1; $(this).find(".num").html(newVal); }); }, }); }); </script> </body> </html>