Code - yangart/sejongOn

<!DOCTYPE html> <html lang="ko"> <head> <title>폭스 색연필</title> <meta charset="UTF-8"> <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="https://online.itt.link/resources/front/site/SITE_00002/css/style.css?v=3" rel="stylesheet"> <link href="https://online.itt.link/resources/front/site/SITE_00002/css/component/_painter.scss" rel="stylesheet"> <link href="colouredPenciles.css" rel="stylesheet"> <style> .view-img-area { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; min-height: 100%; } .view-img-area img { display: block; max-width: 100%; } </style>  <script type="module"> import { initColouredPenciles } from './js/colouredPencilesSvg.js'; </script>  <script> const cpInstanceData = (data) => { if (window.cpInstance) { window.cpInstance.setDataParam(data); } else { // console.log('cpInstance 아직 정의되지 않음, 500ms 후 다시 시도.'); setTimeout(cpInstanceData, 500, data); // cpInstance 정의 전까지 500ms 간격으로 재시도 } } const cpInstanceSave = () => { if (window.cpInstance) { window.cpInstance.saveDrawing(); } else { // console.log('cpInstance 아직 정의되지 않음, 500ms 후 다시 시도.'); setTimeout(cpInstanceSave, 500, data); // cpInstance 정의 전까지 500ms 간격으로 재시도 } } </script> </head> <body> <section class="viewer"> <header class="viewer-header"> <button class="btn-viewer-menu btn-ico"><i class="ico-sm-menu"></i><span class="txt-hide">메뉴</span></button> <div class="viewer-menu-area tabs-normal"> <ul class="tabs-nav"> <li><a href="#vmenu1" class="is-active">학습과정</a></li> <li><a href="#vmenu2">수업 정보</a></li> </ul> <div id="vmenu1" class="tabs-cont" style="display: block;"> <nav class="viewer-nav"> <ul class="nav-depth1"> <li> <a href="#none" class="depth1-lnk"> <span class="num">1</span> <h2>교과서</h2> </a> <ul class="nav-depth2"> <li class=""><a href="#none" class="depth2-lnk"> <h3>교과서</h3> </a> <ul class="nav-depth3"> <li> <a href="#none" data-cntntsid="https://ibook.itt.link/index.html?ABRBOOKURL1=https://icdn.itt.link/aspen/books/library/primary_korean_a_3_2a&ABRPGIDXOFFSET=44" class="depth3-lnk" index="1" data-urlfilter="N"> <div class="img-area"> <figure> <img src="https://rl6dik7eh.toastcdn.net/itt/online/AttachFiles/thumb_book.svg" alt="https://ibook.itt.link/index.html?ABRBOOKURL1=https://icdn.itt.link/aspen/books/library/primary_korean_a_3_2a&ABRPGIDXOFFSET=44"> </figure> </div> <div class="txt-area"> <p>https://ibook.itt.link/index.html?ABRBOOKURL1=https://icdn.itt.link/aspen/books/library/primary_korean_a_3_2a&ABRPGIDXOFFSET=44 </p> </div> </a> </li> </ul> </li> </ul> </li> <li> <a href="#none" class="depth1-lnk is-current"> <span class="num">2</span> <h2>콘텐츠</h2> </a> <ul class="nav-depth2"> <li class="is-active"><a href="#none" class="depth2-lnk is-current"> <h3>콘텐츠</h3> </a> <ul class="nav-depth3"> <li> <a href="#none" data-cntntsid="https://online.itt.link/popup/playerPopup.do?cntntsId=CNTNTS_YTB0000000436" class="depth3-lnk" index="2" data-urlfilter="N"> <div class="img-area"> <figure> <img src="https://i.ytimg.com/vi/iQ4UvU4gX9I/original.jpg" alt="슬기로운 자두 생활 1"> </figure> </div> <div class="txt-area"> <p>슬기로운 자두 생활 1</p> </div> </a> </li> <li> <a href="#none" data-cntntsid="https://online.itt.link/popup/playerPopup.do?cntntsId=CNTNTS_KNC0000000253" class="depth3-lnk is-current" index="3" data-urlfilter="N"> <div class="img-area"> <figure> <img src="https://icdn.itt.link/online/AttachFiles/contents/thumb/PRGCD00101/CNTNTS_KNC0000000253.jpg" alt="인물의 말과 행동을 살피며 만화 영화 감상하기"> </figure> </div> <div class="txt-area"> <p>인물의 말과 행동을 살피며 만화 영화 감상하기</p> </div> </a> </li> </ul> </li> </ul> </li> </ul> </nav> </div> <div id="vmenu2" class="tabs-cont"> <ul class="info-block-list"> <li> <strong class="info-tit">제목</strong> <div class="txt-area"> 통합학습-E2015_E34_국어_3-2_MR_MOE-44 </div> </li> <li> <strong class="info-tit">주제 차시</strong> <div class="txt-area"> <ul class="bullet-none"> <li></li> </ul> </div> </li>  <li> <strong class="info-tit">작성자</strong> <div class="txt-area">김철수 선생님</div> </li> </ul> <div class="btn-cont ac">  <button class="btn-ico-lg clipboard" data-clipboard-text="https://online.itt.link/viewer/aiStudy.do?classId=CMMNTY_0000000508505&edAppId=folio.itt.link&menuName=%ED%95%99%EC%8A%B5%EB%B0%A9&edAppName=%ED%86%A1%ED%86%A1%ED%81%B4%EB%9E%98%EC%8A%A4"><i class="ico-share"></i><span class="txt-hide">공유하기</span> </button> <button class="btn-ico-lg btn-like " data-id="CNTNTS_0000000042766" data-code="SYS_LIKE"><i class="ico-like"></i><span class="txt-hide">좋아요</span></button> </div> </div> <button type="button" class="btn-viewer-menu-toggle"><span class="txt-hide">메뉴 열기&닫기</span></button> </div> <div class="viewer-tit"> <h1>콘텐츠</h1> </div>  </header> <div class="viewer-body"> <div class="viewer-cont"> <div class="iframe-area"> <iframe src="ifrCnt_0.html" class="view_iframe"></iframe> </div>  </div> <div class="viewer-fnc-cont">  <div class="viewer-painter" data-toggleobj="viewer-painter"> </div>  <div class="viewer-block" data-toggleobj="viewer-block"> <figure> <img src="/resources/front/site/SITE_00002/image/sub/img_viewer_block.svg"> </figure> <p>화면 가리기</p> <button class="btn-viewer-block-close ico-close wh" data-toggle="viewer-block"><span class="txt-hide">화면가리기 닫기</span></button> </div> </div> </div> <footer class="viewer-footer"> <div class="viewer-location"> <a href="javascript:changeIfr(0)" class="btn">1</a> <a href="javascript:changeIfr(1)" class="btn">2</a> <a href="javascript:changeIfr(2)" class="btn">3</a> <a href="javascript:changeIfr(3)" class="btn">4</a> <a href="javascript:changeIfr(4)" class="btn">5</a> </div> <div class="viewer-fnc">  <button type="button" class="btn btn-painter-toggle">색연필</button>  </div> </footer> </section> <script> // 페이지 로드 시 사용자 키 및 콘텐츠 키 전달 window.addEventListener('DOMContentLoaded', () => { const page = 0; cpInstanceData({ userKey: 'testuser', contentsKey: `ifrCnt_${page}` }); // 사용자 키 설정 }); // 콘텐츠 변경 시, 콘텐츠 키 발행 및 전달 const changeIfr = (page) => { cpInstanceSave(); // 페이지 이동 전 저장 const ifr = document.querySelector('.iframe-area iframe'); ifr.src = `ifrCnt_${page}.html`; cpInstanceData({ contentsKey: `ifrCnt_${page}` }); // 콘텐츠 키 설정 } </script> </body> </html>