From ee7329efa20c4af56227cd445fe2e47ce2d07e72 Mon Sep 17 00:00:00 2001 From: subsub Date: Mon, 2 Dec 2024 09:59:47 +0900 Subject: [PATCH 1/2] =?UTF-8?q?2024/12/02=20=ED=94=84=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=8A=A4=EB=B0=94=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/webapp/pb/security_login.html | 433 ++++++++++++++++++ src/main/webapp/publish/css/content.css | 8 + src/main/webapp/publish/js/content.js | 73 +++ .../webapp/publish/security_login_ajax.html | 411 +++++++++++++++++ 4 files changed, 925 insertions(+) create mode 100644 src/main/webapp/pb/security_login.html create mode 100644 src/main/webapp/publish/security_login_ajax.html diff --git a/src/main/webapp/pb/security_login.html b/src/main/webapp/pb/security_login.html new file mode 100644 index 00000000..ab2e3842 --- /dev/null +++ b/src/main/webapp/pb/security_login.html @@ -0,0 +1,433 @@ + + + + + + + 문자온 + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+

0%

+
+ +
+
+
+ + +
+ +
+ + +
+ 본문 바로가기 +
+ + +
+
+

QUICK
MENU

+

QUICK

+ + +
+
+ + + + + + +
+
+ +
+ +
+
+

보안 로그인

+
+ + + +
+ + +
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/src/main/webapp/publish/css/content.css b/src/main/webapp/publish/css/content.css index a9b72db3..c8c5ec38 100644 --- a/src/main/webapp/publish/css/content.css +++ b/src/main/webapp/publish/css/content.css @@ -1507,6 +1507,14 @@ button.check_validity:hover {border: 1px solid #a3a3a3;box-shadow: 0px 0px 5px .upload_area .loading_layer{position: absolute;} .upload_area .loading_layer.active+p,.upload_area .loading_layer.active+p+.cf_text_wrap{opacity: 0;} +.progress_bar_wrap{position:fixed;display:none;width:100%;height:100%;background:rgba(0,0,0,0.38);left:0;top:0;z-index:999;justify-content:center;align-items:center;flex-direction:column;} +.progress_box{padding:30px;background:#fff;border-radius:10px;text-align:center;} +.progress_bar_wrap .bar{display:flex;width:400px;height:5px;text-align:left;padding:0;background:#f4f5f6;border-radius:30px;align-items:center;} +.progress_bar_wrap .bar span{position:relative;display:inline-block;min-width:0px;height:5px;border-radius:20px;background:#fbc72b;transition:all 0.3s linear;} +.progress_bar_wrap .bar span::after{position:absolute;content:"";width:8px;height:8px;border-radius:100%;background:#fff;border:2px solid #fbc72b;right:-8px;top:-3px;box-shadow:0 0 3px rgba(0,0,0,0.2);} +.progress_bar_wrap .time_text{height:20px;font-family:'GmarketSansBold';font-size:20px;font-weight:500;color:#222;margin:0 0 20px 0;} +.progress_bar_wrap .time_text.animation{animation:text-loading 1.5s ease-in infinite;} + /* 문자온 소개 */ .intro_cont .img_cont img{width: 100%;} .intro_cont .title{display: flex; width: 100%; margin: 0 0 30px 0; font-size: 24px; font-weight: bold;justify-content: space-between;} diff --git a/src/main/webapp/publish/js/content.js b/src/main/webapp/publish/js/content.js index 6a132930..7b824dc9 100644 --- a/src/main/webapp/publish/js/content.js +++ b/src/main/webapp/publish/js/content.js @@ -1579,3 +1579,76 @@ function fn_excelLoadAddActive(){ function fn_excelLoadRemoveActive(){ $('.loading_execl_layer').removeClass('active'); } + + +// 프로그레스바 +var start, change; + +function progressStart(time, msg) { + $(".progress_bar_wrap").css("display", "flex"); + var timeText = document.querySelector(".time_text"); + var bar = document.querySelector(".change_bar"); + var width = 1; + var totalTime = time * 1000; // 시간 + var cmpWid = totalTime / 100; // 시간당 width + + start = setInterval(changeWidth, cmpWid); + + function changeWidth() { + if (width >= 100) { + clearInterval(start); + timeText.innerHTML = "100%"; + setTimeout(function () { + timeText.innerHTML = "잠시만 기다려주세요..."; + $(".time_text").addClass("animation"); + }, 1000) + + if (msg !== "" && msg !== undefined && msg !== null) { + alert(msg); + } else {} + + } else { + width++; + bar.style.width = width + "%"; + timeText.innerHTML = width + "%"; + } + } +} + +function progressComplete(msg,time,backtime) { + change = setInterval(changeText); + var width = 1; + + function changeText() { + var widthText = $(".change_bar").attr("style"); + widthText = widthText.replace(/[width:%;overfloen]/ig, ""); + if (width >= 100) { + $(".time_text").text("100%"); + + if(backtime>=time){ + setTimeout(function () { + $(".time_text").text("잠시만 기다려주세요..."); + $(".time_text").addClass("animation"); + }, 10) + }else{} + + + setTimeout(function () { + clearInterval(change); + }, 0); + + } else { + width++; + $(".time_text").text(width + "%"); + $(".change_bar").css("width", width + "%"); + } + } + clearInterval(start); + if (msg !== "" && msg !== undefined && msg !== null) { + setTimeout(function () { + alert(msg); + }, 0) + } else {} + + +} diff --git a/src/main/webapp/publish/security_login_ajax.html b/src/main/webapp/publish/security_login_ajax.html new file mode 100644 index 00000000..10a521e1 --- /dev/null +++ b/src/main/webapp/publish/security_login_ajax.html @@ -0,0 +1,411 @@ + + + + + + + 문자온 + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+

0%

+
+ +
+
+
+ +
+ +
+ + +
+ 본문 바로가기 +
+ + +
+
+

+ QUICK
MENU +

+

QUICK

+ + +
+
+ + + + + + +
+
+ +
+ +
+
+

보안 로그인

+
+ + + +
+ + +
+ +
+
+ + + + + + + + \ No newline at end of file From 25bf086ed95b4389c4b346072af7b3bc6de4f6e6 Mon Sep 17 00:00:00 2001 From: subsub Date: Mon, 2 Dec 2024 10:26:50 +0900 Subject: [PATCH 2/2] =?UTF-8?q?2024/12/02=20=EC=A3=BC=EC=84=9D=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/webapp/publish/js/content.js | 26 +++++++++++++++---- .../webapp/publish/security_login_ajax.html | 11 ++++---- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/main/webapp/publish/js/content.js b/src/main/webapp/publish/js/content.js index 7b824dc9..2b5043a3 100644 --- a/src/main/webapp/publish/js/content.js +++ b/src/main/webapp/publish/js/content.js @@ -1586,28 +1586,35 @@ var start, change; function progressStart(time, msg) { $(".progress_bar_wrap").css("display", "flex"); + var timeText = document.querySelector(".time_text"); var bar = document.querySelector(".change_bar"); + var width = 1; var totalTime = time * 1000; // 시간 - var cmpWid = totalTime / 100; // 시간당 width + var cmpWid = totalTime / 100; // width 증가하는 시간 - start = setInterval(changeWidth, cmpWid); + start = setInterval(changeWidth, cmpWid); // 프로그레스바 시작 function changeWidth() { if (width >= 100) { - clearInterval(start); + // width 100% 됐을 때 + clearInterval(start); // 프로그래스바 멈춤 + timeText.innerHTML = "100%"; setTimeout(function () { + // 100%되고 1초 후 잠시만 기다려주세요 변경 및 애니메이션 추가 timeText.innerHTML = "잠시만 기다려주세요..."; $(".time_text").addClass("animation"); }, 1000) + // 메시지 있을 때 alert 띄움 if (msg !== "" && msg !== undefined && msg !== null) { alert(msg); } else {} } else { + // width 증가 및 text 변경 width++; bar.style.width = width + "%"; timeText.innerHTML = width + "%"; @@ -1615,17 +1622,22 @@ function progressStart(time, msg) { } } +// 프로그레스바 완료 function progressComplete(msg,time,backtime) { + change = setInterval(changeText); var width = 1; function changeText() { + var widthText = $(".change_bar").attr("style"); - widthText = widthText.replace(/[width:%;overfloen]/ig, ""); + widthText = widthText.replace(/[width:%;overfloen]/ig, ""); // width 값 퍼센트로 가져오기 + if (width >= 100) { $(".time_text").text("100%"); if(backtime>=time){ + // 예상시간보다 먼저 처리됐을 경우 setTimeout(function () { $(".time_text").text("잠시만 기다려주세요..."); $(".time_text").addClass("animation"); @@ -1638,12 +1650,16 @@ function progressComplete(msg,time,backtime) { }, 0); } else { + // width 증가 및 text 변경 width++; $(".time_text").text(width + "%"); $(".change_bar").css("width", width + "%"); } } - clearInterval(start); + + clearInterval(start); // 프로그레스바 시작 멈추기 + + // 메시지 있을 때 alert 띄움 if (msg !== "" && msg !== undefined && msg !== null) { setTimeout(function () { alert(msg); diff --git a/src/main/webapp/publish/security_login_ajax.html b/src/main/webapp/publish/security_login_ajax.html index 10a521e1..bcc0fa0b 100644 --- a/src/main/webapp/publish/security_login_ajax.html +++ b/src/main/webapp/publish/security_login_ajax.html @@ -46,7 +46,7 @@ //progressStart(time, msg); - var time = 3; + var time = 3; // 예상시간 $.ajax({ type: "GET", @@ -61,9 +61,11 @@ // 성공 실패 분기처리 if (data.status == 'OK') { + // 성공 시 프로그레스바 100% 로 변경 + // 예상 성공시간 = time, 백단 성공시간 == params.sleep progressComplete(data.message,time,params.sleep); - //$(".progress_bar_wrap").hide(); } else if (data.status == 'BAD_REQUEST') { + // 실패시 alert 띄우고 닫기. alert(params.f_msg); $(".progress_bar_wrap").hide(); } @@ -73,21 +75,20 @@ }, beforeSend: function (xmlHttpRequest) { + // 프로그레스바 시작 progressStart(time); }, complete: function (xhr, textStatus) { // 실패든 성공이든 ajax - // 성공 alert 먼저 뜨고 그다음에 언제 꺼질지. + // alert 먼저 뜨고 그다음에 언제 꺼질지. var delay = (time - params.sleep) * 1000; if (time > params.sleep) { setTimeout(function () { $(".progress_bar_wrap").hide(); }, delay); - } else { - $(".progress_bar_wrap").hide(); }