2023/09/25 찾교

- 기소유예 교육신청 대시보드(/visitEdu/usr/publish/sub_sus_dashboard.html) : 신청완료 옆
취소 버튼 클릭 시 팝업
- 교육신청자 대시보드(/visitEdu/usr/publish/sub_training_dashboard.html) : 설문등록
버튼 클릭 시 팝업
- 교육기반강화연수(/visitEdu/usr/publish/sub_training.html)

src/main/webapp/visitEdu/usr/datapicker/duet.esm.js

@@ -32,7 +32,7 @@ import {
 				return c
 			}
 		}
-	})(n.resourcesUrl, r), a.customElements ? i(n) : __sc_import_duet("/offeduadvcadvc/visitEdu/usr/datapicker/dom-fb6a473e.js").then((() => n))
+	})(n.resourcesUrl, r), a.customElements ? i(n) : __sc_import_duet("/offeduadvc/visitEdu/usr/datapicker/dom-fb6a473e.js").then((() => n))
 })().then((e => r([
 	["duet-date-picker", [
 		[0, "duet-date-picker", {

src/main/webapp/visitEdu/usr/publish/css/common.css

@@ -114,7 +114,7 @@ header.on::before{opacity: 1;}
 .path .m_pathedfr {display:none;}
 
 /* snb */
-.snb {width:230px;}
+/* .snb {width:230px;} */
 .snb > p {color:#333333;font-size:27px; font-weight: 600;font-family: 'nanumsquare', 'Noto Sans KR', sans-serif;}
 .snb > h2 > span {color: #e95504; display: block; font-family: 'nanumsquare', 'Noto Sans KR', sans-serif; padding-top: 9px;}
 .snb .ssleftxt{width:100%;margin-top:25px;}
@@ -124,9 +124,23 @@ header.on::before{opacity: 1;}
 .snb .ssleftxt ul li a span{font-size: 18px; line-height: 18px;}
 .snb .ssleftxt ul li.menu_on{background-color: #ec5908 ; border: 1px solid #ec5908;}
 .snb .ssleftxt ul li.menu_on a {color:#fff; background-image: url(../images/common/arrow.png); background-repeat: no-repeat; background-position: 91% 50%;}
-
 /*// snb  */
 
+.navigation {height:50px;border-bottom:1px solid #d5d5d5;}
+.container .navigation .inner{margin: 0 auto;}
+.navigation .list {border-left:1px solid #d5d5d5;}
+.navigation .list:after {content:'';display:block;clear:both;}
+.navigation .list > li {position:relative;float:left;border-right:1px solid #d5d5d5;}
+.navigation .list > li:first-child {border-left:1px solid #d5d5d5;}
+.navigation .list > li.home {display:none;border-left:1px solid #d5d5d5;}
+.navigation .list > li.home a {display:block;width:49px;height:50px;font-size:0;text-indent:-9999em;background:url(../images/content/select.png) no-repeat center center;}
+.navigation .list > li .navi_title {position:relative;width:230px;padding:0 20px;font-size:16px;line-height:50px;text-align:left;color:#555;box-sizing:border-box;}
+.navigation .list > li .navi_title:after {content:'';position:absolute;right:20px;top:1px;width:18px;height:48px;background:url(../images/content/select.png) no-repeat center center;}
+.navigation .list > li .navi_depth {display:none;position:absolute;left:-1px;top:50px;width:100%;border:1px solid #d5d5d5;background:#fff;z-index:2;}
+.navigation .list > li .navi_depth li a {display:block;height:40px;padding:0 20px;font-size:16px;line-height:40px;}
+.navigation .list > li .navi_depth li a:hover,
+.navigation .list > li .navi_depth li a:focus {font-weight:500;color:#ff6009;background:#fff3ec;}
+
 /* footer */
 footer{width: 100%; background-color: #fff; position: relative; padding: 0 10px; box-sizing: border-box; color: #666; position: relative;}
 footer::before { content: ""; width: 100%; height: 50px; border-top: 1px solid #e2e3e7; border-bottom: 1px solid #e2e3e7; position: absolute; top: 0; left: 0;}
@@ -231,6 +245,10 @@ footer .wa_mark .wa {width: 110px;}
   	.path .m_pathedfr > ul > li ul {display:none;position:absolute;left:0;top:50px;width:100%;	padding:3px 0;border-top:1px solid #fcae83;background:#fb8b4e;box-sizing:border-box;}
   	.path .m_pathedfr > ul > li ul li a {display:block;padding:0 0 0 10px;font-size:16px;line-height:35px;color:#fff;}
   	
+  	.container .navigation .inner {padding:0;}
+  	.navigation .list > li {width: calc((100% - 2px)/2);}
+  	.navigation .list > li .navi_title{width: 100%;}
+  
 	/* footer */
 	footer .site {margin:0 -10px;}
 	footer .site ul {justify-content:center;}

src/main/webapp/visitEdu/usr/publish/css/content.css

@@ -4,7 +4,8 @@
 /* sub layout */
 .container {width: 100%; min-height: 650px; position: relative; display: inline-block; box-sizing: border-box; margin-top: 130px; }
 .container .inner{max-width: 1440px; width: 100%; padding: 0 20px; margin: 60px auto 76px auto; display: flex; box-sizing: border-box; justify-content: space-between;}
-.container .inner .cont_wrap {width: calc(100% - 275px);}
+/* .container .inner .cont_wrap {width: calc(100% - 275px);} */
+.container .inner .cont_wrap {width: 100%;}
 
 .cont_nav{width: 100%; height: 60px; background-color: #2353b5; position: fixed; top: 134px; z-index: 10;}
 .cont_nav .inner{display: flex; max-width: 1400px; width: 100%; margin: 0 auto;}

src/main/webapp/visitEdu/usr/publish/css/popup.css

@@ -124,4 +124,11 @@
 	.pop_tb_type01>table>tbody>tr>td {height: 40px; padding: 8px 10px;}
 	.pop_tb_type01>table>tbody>tr>td input[type="text"] {height: 36px;}
 	.pop_tb_type01>table>tbody>tr>td>.btnType01 {height: 30px; font-size: 15px; padding: 0 12px;}
+	
+	/* 교육신청자 대시보드 */
+	.text_greeting {margin:0 0 0 0;}
+}
+
+@media all and (max-width: 400px){
+	.popup_wrap.popType01{width: 95%;}
 }

src/main/webapp/visitEdu/usr/publish/script/common.js

@@ -1,6 +1,11 @@
 $(document).ready(function () {
 	header(); // header 슬라이드 기능
 
+	// gnb 열림/닫힘
+	setTimeout(function () {
+		gnbOpen();
+	}, 100);
+	
 	//ie 버그로 인하여 강제로 탭키 가도록 설정 
 	if (ie_check()) {
 		$("#main").prop("tabindex", "0");
@@ -72,6 +77,60 @@ $(document).ready(function () {
 	/* ie는 readonly를 지원하지 않아서 css 적용 */
 	$("input[readonly='']").addClass("read-only");
 	/* //ie는 readonly를 지원하지 않아서 css 적용 */
+	
+	/* snb 열림·닫힘 */
+	$(".navi_title").click(function () {
+		if ($(this).next().is(":visible") == true) {
+			$(this).attr("title", "하위메뉴 열기");
+			$(this).removeClass('active').next().slideUp(300);
+			$(this).parent().siblings().find(".navi_depth").slideUp(300);
+		} else {
+			$(this).attr("title", "하위메뉴 닫기");
+			$(this).addClass('active').next().slideDown(300);
+			$(this).parent().siblings().find(".navi_depth").slideUp(300);
+			$('.m_select_wrap').removeClass('active');
+			return false;
+		}
+	});
+
+	$("html").click(function () {
+		if ($(".navi_depth").is(":visible") == true) {
+			$(".navi_title").attr("title", "하위메뉴 열기");
+			$(".navi_depth").slideUp(400);
+		}
+	});
+
+	// 웹접근성 snb에서 키보드로 이동 시
+	$(".navi_depth li:last-child a").keydown(function (e) {
+		if (e.keyCode == "9") {
+			if (e.shiftKey) {
+				// shift+tab 했을 때
+			} else {
+				$(this).parent().parent().prev().removeClass('active').attr("title", "하위메뉴 열기");
+				$(".navi_depth").slideUp(300);
+			}
+		}
+	});
+
+	// 웹접근성 snb에서 키보드로 이동 시
+	$(".navi_title").keydown(function (e) {
+		if (e.keyCode == "9") {
+			if (e.shiftKey) {
+				// shift+tab 했을 때
+				$(this).removeClass('active').attr("title", "하위메뉴 열기");
+				$(".navi_depth").slideUp(300);
+			}
+		}
+	});
+	
+	$(function () {
+		$('.header .sitemap .depth01 > a').on('click', function () {
+			if (!$(this).closest('.depth01').hasClass('active')) {
+				$(this).closest('.list').find('.depth01').removeClass('active');
+				$(this).closest('.depth01').addClass('active');
+			}
+		});
+	});
 });
 
 /* 화면 리사이즈 시 */
@@ -214,3 +273,18 @@ function mobilePath(){
   });
 }
 // 1207 - 수정사항
+
+function gnbOpen() {
+	var target = $('#header');
+	var depth = target.find('.gnb .depth01');
+	var h = target.find('.gnb').outerHeight() - 60;
+	h += 178;
+
+	function gnbActive() {
+		target.addClass('active').css('height', h + 'px');
+
+	}
+	function gnbLeave() {
+		target.removeClass('active').attr('style', '');
+	}
+}

src/main/webapp/visitEdu/usr/publish/script/popup.js

@@ -86,3 +86,17 @@ $(document).ready(function () {
 	tooltip();
 	accessibilityFocus();
 })
+
+$(window).resize(function(){
+	var showTarget = $('.popup_wrap');
+	var popWid = showTarget.width();
+	var popHei = showTarget.height();
+
+	var nLeft = (($(window).outerWidth() - popWid)/2);
+  	var nTop = (($(window).outerHeight() - popHei)/2);
+
+	showTarget.css({
+		"left": nLeft,
+		"top": nTop
+	});
+})

src/main/webapp/visitEdu/usr/publish/sub_sus_dashboard.html

@@ -40,11 +40,10 @@
 
 	<!-- 교육신청 취소 -->
 	<div class="tooltip-wrap">
-		<div class="popup_wrap popType01" tabindex="0" data-tooltip-con="sub01_pop01" data-focus="sub01_pop01"
+		<div class="popup_wrap popType01" tabindex="0" data-tooltip-con="sub01_pop01" data-focus="sub01_pop01" data-focus-prev="sub01_pop01_close">
-			data-focus-prev="sub01_pop01_close">
 			<div class="popup_tit">
-				<p>교육신청 취소</p> <button class="btn_popup_close tooltip-close" data-focus="sub01_pop01_close"
+				<p>교육신청 취소</p>
-					title="팝업 닫기"><i></i></button>
+				<button class="btn_popup_close tooltip-close" data-focus="sub01_pop01_close" title="팝업 닫기"><i></i></button>
 			</div>
 			<div class="popup_cont">
 				<div class="cont_body">
@@ -106,12 +105,10 @@
 	<!--// 교육신청 취소 -->
 
 	<!-- 교육문의 -->
-	<div class="tooltip-wrap" style="display: none;">
+	<div class="tooltip-wrap">
-		<div class="popup_wrap popType01" tabindex="0" data-tooltip-con="edu_in" data-focus="edu_in"
+		<div class="popup_wrap popType01" tabindex="0" data-tooltip-con="edu_in" data-focus="edu_in" data-focus-prev="edu_in_close">
-			data-focus-prev="edu_in_close">
 			<div class="popup_tit">
-				<p>교육문의하기</p> <button class="btn_popup_close tooltip-close" data-focus="edu_in_close"
+				<p>교육문의하기</p> <button class="btn_popup_close tooltip-close" data-focus="edu_in_close" title="팝업 닫기"><i></i></button>
-					title="팝업 닫기"><i></i></button>
 			</div>
 			<div class="popup_cont">
 				<p class="text_greeting">안녕하세요.</br>한국저작권위원회입니다.</p>
@@ -306,7 +303,32 @@
 
 	<!-- content -->
 	<div class="container">
-		<div class="path">
+		<div class="navigation">
+			<div class="inner">
+				<ul class="list">
+					<li class="home"><a href="/user/main/main.do">메인화면</a></li>
+					<li>
+						<button type="button" class="navi_title" id="p_menu_nm_navi" title="하위메뉴 열기">알림마당</button>
+						<ul class="navi_depth" id="navi_depth_1">
+							<li><a href="#">찾아가는 저작권교육 청소년</a></li>
+							<li><a href="#">찾아가는 저작권교육 성인</a></li>
+							<li><a href="#">저작권체험교실</a></li>
+							<li><a href="#">교육콘텐츠 신청</a></li>
+							<li><a href="#">알림마당</a></li>
+						</ul>
+					</li>
+					<li>
+						<button type="button" class="navi_title" id="menu_nm_navi" title="하위메뉴 열기">공지사항</button>
+						<ul class="navi_depth" id="navi_depth_2">
+							<li><a href="#">공지사항</a></li>
+							<li><a href="#">교육자료실</a></li>
+							<li><a href="#">FAQ</a></li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<!-- <div class="path">
 			<div class="pathedfr">
 				<ul>
 					<li class="home"><i></i>HOME</li>
@@ -316,9 +338,9 @@
 					<li>교육신청</li>
 				</ul>
 			</div>
-		</div>
+		</div> -->
 		<div class="inner">
-			<div class="snb">
+			<!-- <div class="snb">
 				<h2>찾아가는 저작권 교육<span>청소년</span></h2>
 				<div class="ssleftxt">
 					<ul>
@@ -328,7 +350,7 @@
 						<li><a href="#none">교육신청 조회</a></li>
 					</ul>
 				</div>
-			</div>
+			</div> -->
 			<div class="cont_wrap">
 				<div class="cont_tit">
 					<h2>기소유예 교육신청 대시보드</h2>
@@ -376,7 +398,7 @@
                             <tr>
                                 <td>기소유예1차</td>
                                 <td>2023-06-21(수)~2023-06-23(금)</td>
-                                <td>신청완료<button type="button" title="신청취소" class="btnType02" data-tooltip="">취소</button></td>
+                                <td>신청완료<button type="button" title="신청취소" class="btnType02" data-tooltip="sub01_pop01">취소</button></td>
                                 <td><button type="button" title="설문하기" class="btnType04">설문하기</button></td>
                                 <td>교육완료</td>
                             </tr>
@@ -410,11 +432,11 @@
                         </li>
                         <li>
                             <span>신청결과</span>
-                            <span>신청완료<button type="button" title="신청취소" class="btnType02" data-tooltip="">취소</button></span>
+                            <span>신청완료<button type="button" title="신청취소" class="btnType02" data-tooltip="sub01_pop01">취소</button></span>
                         </li>
                         <li>
                             <span>설문조사</span>
-                            <span><button type="button" title="설문하기" class="btnType04" data-tooltip="">설문하기</button></span>
+                            <span><button type="button" title="설문하기" class="btnType04">설문하기</button></span>
                         </li>
                         <li>
                             <span>교육결과</span>

src/main/webapp/visitEdu/usr/publish/sub_training.html

@@ -500,7 +500,32 @@
 
 	<!-- content -->
 	<div class="container">
-		<div class="path">
+		<div class="navigation">
+			<div class="inner">
+				<ul class="list">
+					<li class="home"><a href="/user/main/main.do">메인화면</a></li>
+					<li>
+						<button type="button" class="navi_title" id="p_menu_nm_navi" title="하위메뉴 열기">알림마당</button>
+						<ul class="navi_depth" id="navi_depth_1">
+							<li><a href="#">찾아가는 저작권교육 청소년</a></li>
+							<li><a href="#">찾아가는 저작권교육 성인</a></li>
+							<li><a href="#">저작권체험교실</a></li>
+							<li><a href="#">교육콘텐츠 신청</a></li>
+							<li><a href="#">알림마당</a></li>
+						</ul>
+					</li>
+					<li>
+						<button type="button" class="navi_title" id="menu_nm_navi" title="하위메뉴 열기">공지사항</button>
+						<ul class="navi_depth" id="navi_depth_2">
+							<li><a href="#">공지사항</a></li>
+							<li><a href="#">교육자료실</a></li>
+							<li><a href="#">FAQ</a></li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<!-- <div class="path">
 			<div class="pathedfr">
 				<ul>
 					<li class="home"><i></i>HOME</li>
@@ -510,9 +535,9 @@
 					<li>교육신청</li>
 				</ul>
 			</div>
-		</div>
+		</div> -->
 		<div class="inner">
-			<div class="snb">
+			<!-- <div class="snb">
 				<h2>찾아가는 저작권 교육<span>청소년</span></h2>
 				<div class="ssleftxt">
 					<ul>
@@ -522,7 +547,7 @@
 						<li><a href="#none">교육신청 조회</a></li>
 					</ul>
 				</div>
-			</div>
+			</div> -->
 			<div class="cont_wrap">
 				<div class="cont_tit">
 					<h2>교육기반강화연수</h2>

src/main/webapp/visitEdu/usr/publish/sub_training_dashboard.html

@@ -311,7 +311,32 @@
 
 	<!-- content -->
 	<div class="container">
-		<div class="path">
+		<div class="navigation">
+			<div class="inner">
+				<ul class="list">
+					<li class="home"><a href="/user/main/main.do">메인화면</a></li>
+					<li>
+						<button type="button" class="navi_title" id="p_menu_nm_navi" title="하위메뉴 열기">알림마당</button>
+						<ul class="navi_depth" id="navi_depth_1">
+							<li><a href="#">찾아가는 저작권교육 청소년</a></li>
+							<li><a href="#">찾아가는 저작권교육 성인</a></li>
+							<li><a href="#">저작권체험교실</a></li>
+							<li><a href="#">교육콘텐츠 신청</a></li>
+							<li><a href="#">알림마당</a></li>
+						</ul>
+					</li>
+					<li>
+						<button type="button" class="navi_title" id="menu_nm_navi" title="하위메뉴 열기">공지사항</button>
+						<ul class="navi_depth" id="navi_depth_2">
+							<li><a href="#">공지사항</a></li>
+							<li><a href="#">교육자료실</a></li>
+							<li><a href="#">FAQ</a></li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<!-- <div class="path">
 			<div class="pathedfr">
 				<ul>
 					<li class="home"><i></i>HOME</li>
@@ -321,9 +346,10 @@
 					<li>교육신청</li>
 				</ul>
 			</div>
-		</div>
+		</div> -->
+		
 		<div class="inner">
-			<div class="snb">
+			<!-- <div class="snb">
 				<h2>찾아가는 저작권 교육<span>청소년</span></h2>
 				<div class="ssleftxt">
 					<ul>
@@ -333,7 +359,7 @@
 						<li><a href="#none">교육신청 조회</a></li>
 					</ul>
 				</div>
-			</div>
+			</div> -->
 			<div class="cont_wrap">
 				<div class="cont_tit">
 					<h2>교육 신청자 대시보드</h2>
@@ -412,7 +438,7 @@
                         </li>
                         <li>
                             <span>설문조사</span>
-                            <span><button type="button" title="설문등록" class="btnType04">설문등록</button></span>
+                            <span><button type="button" title="설문등록" class="btnType04"  data-tooltip="edu_in">설문등록</button></span>
                         </li>
                         <li>
                             <span>이수증</span>