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="site-cont"> <ul class="breadcrumb"> <li><a href="#none" class="home">홈</a></li> <li><a href="#none">1depth</a></li> <li><a href="#none">2depth</a></li> </ul> <div class="page-tit-area"> <div class="l-area"> <h2 class="title-xlg">과제 제출하기</h2> </div> </div> <section class="section"> <div class="section-tit-area"> <div class="l-area"> <h3 class="txt-hide">기본 정보</h3> </div> </div> <div class="write-type"> <table> <caption>기본 정보 입력</caption> <colgroup> <col style="width: 160px" /> <col /> </colgroup> <tbody> <tr> <th scope="row">이름 (ID)</th> <td> 이민서 6학년3반6번 (student_id_12345) / 학생B 6학년3반7번 (student_id_12322) <div class="btn-group"> <button type="button" class="btn sm ico-plus">제출 인원 추가</button> </div> </td> </tr> <tr> <th scope="row">제출일</th> <td> <div class="label-area"> <span class="label warning">마감 후 제출</span> <span class="label">마감 후 수정됨</span> </div> 2025년 11월 15일 오후 11:59 </td> </tr> <tr> <th scope="row">파일 업로드</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 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">내용</th> <td> <textarea title="내용 입력" placeholder="내용을 입력하세요."></textarea> </td> </tr> </tbody> </table> </div> </section> <section class="section"> <header class="tit-area"> <div class="l-area"> <h3 class="title">지정된 서식</h3> </div> </header> <div class="form-view-result"> <div class="form-section bg-area"> <div class="form-section-body wrap-sm"> <div class="form-item-section"> <div class="form-item-list"> <div class="form-item"> <div class="q-area"> <div class="q-tit"> <div class="l-area"> <span class="label num lg">1</span> <div class="q-txt">한강 작가의 채식주의자를 읽고 느낀점을 100자 이내로 작성하세요.</div> </div> </div> </div> <div class="a-area"> <div class="txt-count-area"> <textarea placeholder="내용을 입력하세요." title="내용 입력"></textarea> <div class="txt-count"> <span>0</span> 자 </div> </div> </div> </div> <div class="form-item"> <div class="q-area"> <div class="q-tit"> <div class="l-area"> <span class="label num lg">2</span> <div class="q-txt">우리나라에서 노벨문학상 작가가 탄생하게된 감상을 100자 이내로 작성하세요.</div> </div> </div> </div> <div class="a-area"> <div class="txt-count-area"> <textarea placeholder="내용을 입력하세요." title="내용 입력"></textarea> <div class="txt-count"> <span>15</span> 자 </div> </div> </div> </div> <div class="form-item"> <div class="q-area"> <div class="q-tit"> <div class="l-area"> <span class="label num lg">2</span> <div class="q-txt">노벨문학상을 수상한 다른 작가의 책을 읽고 느낌점을 50자 이내로 작성하세요.</div> </div> </div> </div> <div class="a-area"> <div class="txt-count-area"> <textarea placeholder="내용을 입력하세요." title="내용 입력"></textarea> <div class="txt-count"> <span>15</span> 자 </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <div class="btn-cont"> <a href="#none" class="btn lg">취소</a> <a href="#none" class="btn lg secondary">임시저장</a> <a href="#none" class="btn lg primary">등록</a> </div> </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>