Commit @ee7329efa20c4af56227cd445fe2e47ce2d07e72

정수빈 2024-12-02

2024/12/02 프로그레스바 추가

@ee7329efa20c4af56227cd445fe2e47ce2d07e72

ee7329e

src/main/webapp/pb/security_login.html (added)

+++ src/main/webapp/pb/security_login.html

...	...	@@ -0,0 +1,433 @@
	1	+<!DOCTYPE html>
	2	+<html lang="ko">
	3	+
	4	+<head>
	5	+ <meta charset="UTF-8">
	6	+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
	7	+ <title>문자온</title>
	8	+
	9	+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
	10	+ <link rel="stylesheet" href="/publish/css/reset.css">
	11	+ <link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css">
	12	+ <link rel="stylesheet" href="/publish/css/common.css">
	13	+ <link rel="stylesheet" href="/publish/css/button.css">
	14	+ <link rel="stylesheet" href="/publish/css/content.css">
	15	+ <link rel="stylesheet" href="/publish/css/mem.css">
	16	+ <link rel="stylesheet" href="/publish/css/font.css">
	17	+ <link rel="stylesheet" href="/publish/css/popupLayer.css">
	18	+
	19	+
	20	+ <script src="/publish/js/jquery-3.5.0.js"></script>
	21	+ <script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script>
	22	+ <script src="/publish/js/common.js"></script>
	23	+ <script src="/publish/js/content.js"></script>
	24	+ <script src="/publish/js/popupLayer.js"></script>
	25	+
	26	+ <script>
	27	+ $(function () {
	28	+ timer();
	29	+ });
	30	+
	31	+ //문자발송 처리 함수
	32	+ function fn_sendMsgData(){
	33	+
	34	+ var url = "/web/mjon/test/ajaxTest.do";
	35	+
	36	+ var params = {
	37	+ isSuccess : "N" // 성공여부 테스트 Y:성공 N:실패
	38	+ , s_msg: "성공 메세지 입력" // 메세지 입력
	39	+ , f_msg: "실패 메세지 입력" // 메세지 입력
	40	+ };
	41	+
	42	+
	43	+ $.ajax({
	44	+ type: "GET",
	45	+ url: url,
	46	+ data: params, // jQuery가 자동으로 URL 파라미터로 변환
	47	+ dataType: 'json',
	48	+ success: function (data) {
	49	+ console.log('data :: ', data);
	50	+
	51	+ // 성공 실패에 따른 메세지
	52	+ alert(data.message);
	53	+
	54	+ // 성공 실패 분기처리
	55	+// if(data.status == 'OK'){}
	56	+// else if(data.status == 'BAD_REQUEST'){}
	57	+
	58	+
	59	+ },
	60	+ afterSend : function(xmlHttpRequest) {
	61	+
	62	+ },
	63	+ beforeSend : function(xmlHttpRequest) {
	64	+
	65	+ },
	66	+ complete : function(xhr, textStatus) {
	67	+ // 실패든 성공이든 ajax
	68	+ },
	69	+ error: function (e) { alert("테스트를 실패하였습니다."); console.log("ERROR : ", e); }
	70	+ });
	71	+ }
	72	+
	73	+
	74	+ var start, change;
	75	+
	76	+ function progressStart(time, msg) {
	77	+ var timeText = document.querySelector(".time_text");
	78	+ var bar = document.querySelector(".change_bar");
	79	+ var width = 1;
	80	+ var totalTime = time * 1000; // 시간
	81	+ var cmpWid = totalTime / 100; // 시간당 width
	82	+
	83	+ start = setInterval(changeWidth, cmpWid);
	84	+
	85	+ function changeWidth() {
	86	+ if (width >= 100) {
	87	+ clearInterval(start);
	88	+ timeText.innerHTML = "100%";
	89	+ alert(msg);
	90	+ $(".progress_bar_wrap").hide();
	91	+ } else {
	92	+ width++;
	93	+ bar.style.width = width + "%";
	94	+ timeText.innerHTML = width + "%";
	95	+ }
	96	+ }
	97	+ }
	98	+
	99	+ function progressComplete(msg) {
	100	+ $(".change_bar").animate({
	101	+ width: "100%"
	102	+ }, 100);
	103	+
	104	+ change = setInterval(changeText);
	105	+
	106	+ function changeText() {
	107	+ var widthText = $(".change_bar").attr("style");
	108	+ widthText = widthText.replace(/[width:%;overfloen]/ig, "");
	109	+ if (widthText == 100) {
	110	+ $(".time_text").text("100%");
	111	+
	112	+ setTimeout(function () {
	113	+ $(".progress_bar_wrap").hide();
	114	+ clearInterval(change);
	115	+ }, 1000);
	116	+ } else {
	117	+ $(".time_text").text(widthText + "%");
	118	+ }
	119	+ }
	120	+ clearInterval(start);
	121	+ setTimeout(function () {
	122	+ alert(msg);
	123	+ }, 1000)
	124	+
	125	+ }
	126	+
	127	+
	128	+
	129	+
	130	+ //인증번호 타이머
	131	+ function timer() {
	132	+ var time = 180; //기준시간 작성
	133	+ var min = ""; //분
	134	+ var sec = ""; //초
	135	+ //setInterval(함수, 시간) : 주기적인 실행
	136	+ var x = setInterval(function () {
	137	+ //parseInt() : 정수를 반환
	138	+ min = parseInt(time / 60);
	139	+ sec = time % 60; //나머지를 계산
	140	+
	141	+ document.getElementById("timer").innerHTML = min + "분" + sec + "초";
	142	+ time--;
	143	+
	144	+ //타임아웃 시
	145	+ if (time < 0) {
	146	+ clearInterval(x); //setInterval() 실행을 끝냄
	147	+ document.getElementById("timer").innerHTML = "시간초과";
	148	+ }
	149	+
	150	+ }, 1000);
	151	+
	152	+ if (time != 180) {
	153	+ time = 180;
	154	+ clearInterval(x);
	155	+ }
	156	+ }
	157	+ </script>
	158	+
	159	+</head>
	160	+
	161	+<body>
	162	+ <div class="mask"></div>
	163	+
	164	+ <div class="progress_bar_wrap">
	165	+ <div class="progress_box">
	166	+ <p class="time_text">0%</p>
	167	+ <div class="bar">
	168	+ <span class="change_bar"></span>
	169	+ </div>
	170	+ </div>
	171	+ <div class="btn_wrap">
	172	+ <button type="button" class="btnType btnType2" style="margin:50px 0;" onclick="progressStart(10,'완료되었습니다.');">시작</button>
	173	+ <button type="button" class="btnType btnType2" style="margin:50px 0;" onclick="progressComplete('완료되었습니다.');return false;">멈춤</button>
	174	+ </div>
	175	+
	176	+ </div>
	177	+
	178	+ <!-- skip 메뉴 -->
	179	+ <div class="skip_menu">
	180	+ <a href="#cont" title="본문 바로가기" class="contGo">본문 바로가기</a>
	181	+ </div>
	182	+ <!--// skip 메뉴 -->
	183	+ <!-- quick 메뉴 -->
	184	+ <div class="quickMenu">
	185	+ <div>
	186	+ <p class="quick_title">QUICK<br>MENU</p>
	187	+ <p class="quick_title2">QUICK</p>
	188	+ <ul class="quickMenuIn">
	189	+ <li>
	190	+ <a href="/publish/index.html"><i class="quick1"></i><span>이용안내</span></a>
	191	+ <div class="hover_cont">이용안내</div>
	192	+ </li>
	193	+ <li>
	194	+ <a href="#"><i class="quick2"></i><span>채팅상담</span></a>
	195	+ <div class="hover_cont">채팅상담</div>
	196	+ </li>
	197	+ <li>
	198	+ <a href="#"><i class="quick3"></i><span>원격지원</span></a>
	199	+ <div class="hover_cont">원격지원</div>
	200	+ </li>
	201	+ <li>
	202	+ <a href="#"><i class="quick4"></i><span>맞춤제작</span></a>
	203	+ <div class="hover_cont">맞춤제작</div>
	204	+ </li>
	205	+ <li>
	206	+ <a href="#"><i class="quick5"></i><span>주소록 등록</span></a>
	207	+ <div class="hover_cont">주소록 등록</div>
	208	+ </li>
	209	+ <li>
	210	+ <a href="#"><i class="quick6"></i><span>엑셀 전송</span></a>
	211	+ <div class="hover_cont">엑셀 대량전송</div>
	212	+ </li>
	213	+ <li>
	214	+ <a href="#"><i class="quick7"></i><span>견적서</span></a>
	215	+ <div class="hover_cont">견적서</div>
	216	+ </li>
	217	+ <li>
	218	+ <a href="#"><i class="quick8"></i><span>결제</span></a>
	219	+ <div class="hover_cont">결제</div>
	220	+ </li>
	221	+ <li>
	222	+ <a href="#"><i class="quick9"></i><span>영수증/계산서</span></a>
	223	+ <div class="hover_cont">영수증/계산서</div>
	224	+ </li>
	225	+ </ul>
	226	+ <button type="button" class="goTop" title="맨 위로 이동">TOP<i></i></button>
	227	+ </div>
	228	+ </div>
	229	+ <!--// quick 메뉴 -->
	230	+ <!-- header 영역 -->
	231	+ <header id="header" class="header">
	232	+ <!-- header top 영역 -->
	233	+ <div class="header_top">
	234	+ <div class="inner">
	235	+ <ul class="menu_left">
	236	+ <li><a href="#"><i class="hdTop_fav"></i>즐겨찾기추가</a></li>
	237	+ <li><a href="#"><i class="hdTop_mypage"></i>마이페이지</a></li>
	238	+ <li><a href="#"><i class="hdTop_center"></i>고객센터</a></li>
	239	+ </ul>
	240	+ <ul class="menu_right">
	241	+ <li><a href="#">충전하기</a></li>
	242	+ <li class="SortLine"><a href="#">요금안내</a></li>
	243	+ <li class="SortLine"><a href="#">이용안내</a></li>
	244	+ <li class="SortLine"><a href="#">1:1고객상담</a></li>
	245	+ </ul>
	246	+ </div>
	247	+ </div><!-- header top 영역 -->
	248	+ <!-- header body 영역 -->
	249	+ <div class="header_body">
	250	+ <div class="inner table">
	251	+ <h1 class="logo"><a href="/publish/index.html" alt="문자온 메인 바로가기"><img src="/publish/images/CI.png" alt="문자온 CI"></a></h1>
	252	+ <ul class="gnbWrap table_cell">
	253	+ <li><a href="#">문자발송</a></li>
	254	+ <li><a href="#">선거문자</a></li>
	255	+ <li><a href="#">맞춤제작</a></li>
	256	+ <li><a href="#">비즈톡</a></li>
	257	+ <li><a href="#">주소록 관리</a></li>
	258	+ <li><a href="#">발송결과</a></li>
	259	+ <li><a href="#">예약관리</a></li>
	260	+ <li><a href="#">결제내역</a></li>
	261	+ </ul>
	262	+ <div class="s_menu">
	263	+ <i class="allSearch_info"><span>문자검색</span></i>
	264	+ <button type="button" title="전체검색" class="allSearch" onclick="searchToggle();"><img src="/publish/images/search.png" alt="검색영역 열기" class="allMenu"></button>
	265	+ <button type="button" title="전체메뉴"><img src="/publish/images/all_menu.png" alt="전체메뉴 열기"></button>
	266	+ </div>
	267	+ </div>
	268	+ <!-- search popup 영역 -->
	269	+ <div class="pop_search">
	270	+ <div class="inner">
	271	+ <div class="area_search">
	272	+ <select name="" id="">
	273	+ <option value="">그림문자</option>
	274	+ <option value="">단문문자</option>
	275	+ <option value="">장문문자</option>
	276	+ <option value="">GIF</option>
	277	+ </select>
	278	+ <input type="text" placeholder="문자샘플 검색하기">
	279	+ <button><img src="/publish/images/search02.png" alt=""></button>
	280	+ </div>
	281	+ <div class="area_popular">
	282	+ <p><i></i>인기검색어</p>
	283	+ <ul class="popular_tag">
	284	+ <li><a href="#">#정월대보름</a></li>
	285	+ <li class="on"><a href="#">#추석</a></li>
	286	+ <li><a href="#">#가을인사</a></li>
	287	+ <li><a href="#">#좋은하루</a></li>
	288	+ </ul>
	289	+ </div>
	290	+ <button class="btn_close" onclick="searchToggle();"><img src="/publish/images/btn_searchclose.png" alt=""></button>
	291	+ </div>
	292	+ </div>
	293	+ <!--// search popup 영역 -->
	294	+ </div>
	295	+ <!--// header body 영역 -->
	296	+ <div id="login" class="login">
	297	+ <div class="inner table">
	298	+ <div class="login_left table_cell">
	299	+ <div class="login_put">
	300	+ <label for="id_text" class="label"></label>
	301	+ <input type="text" placeholder="아이디를 입력해주세요" id="id_text" class="id_text" maxlength="30" size="18">
	302	+ <label for="password_text" class="label"></label>
	303	+ <input type="password" placeholder="비밀번호를 입력해주세요" id="password_text" class="password_text" maxlength="30" size="18">
	304	+ <label for="login_button" class="label"></label>
	305	+ <button type="submit" class="btnType btnType1" class="login_button">로그인</button>
	306	+ </div>
	307	+ <div class="login_save">
	308	+ <input type="checkbox" id="save_id">
	309	+ <label for="save_id">아이디 저장</label>
	310	+ </div>
	311	+ <div class="login_find">
	312	+ <a href="#">아이디찾기 /</a>
	313	+ <a href="#">비밀번호 찾기</a>
	314	+ </div>
	315	+ <div>
	316	+ <button type="button" class="btnType btnType2">회원가입</button>
	317	+ <button type="button" class="btnType btnType3">둘러보기</button>
	318	+ </div>
	319	+ </div>
	320	+ <div class="login_right">
	321	+ <span><i></i>이달의 이벤트</span>
	322	+ <button type="button" class="btnType btnType4">바로가기</button>
	323	+ </div>
	324	+ </div>
	325	+ </div>
	326	+ <!--// login 영역 -->
	327	+ </header>
	328	+ <!--// header 영역 -->
	329	+ <!-- login 영역 -->
	330	+ <!-- content 영역 -->
	331	+ <div id="container" class="cont sub">
	332	+ <div class="inner">
	333	+ <!-- send top -->
	334	+ <div class="send_top">
	335	+ <!-- 마이페이지 - 로그인 -->
	336	+ <div class="mypage_content current">
	337	+ <div class="heading">
	338	+ <h2>보안 로그인</h2>
	339	+ </div>
	340	+ <div class="mem_cont_in widthS login_wrap security_login">
	341	+ <div class="input_list">
	342	+ <p class="welcome"><span>안전한 서비스 이용</span>을 위해 <span class="c_222 fwBold">가입자 인증</span>이 필요합니다.</p>
	343	+ <div class="input_list_item" id="input_list_item_4">
	344	+ <div class="input_left">휴대폰번호</div>
	345	+ <div class="input_right">
	346	+ <label for="list_inputType1" class="label">휴대폰번호</label>
	347	+ <select id="hp_text2" class="list_selType1" style="width:70%;">
	348	+ <option value="01057058729">01057058729(대표번호)</option>
	349	+ </select>
	350	+ </div>
	351	+ <div class="login_del">
	352	+ <button type="button" class="btnType btnType3" onclick="sendMsgYn();">인증번호 받기</button>
	353	+ </div>
	354	+ </div>
	355	+ <div class="input_list_item" id="input_list_item_5">
	356	+ <div class="input_left">인증번호 입력</div>
	357	+ <div class="input_right">
	358	+ <label for="list_inputType1" class="label">인증번호 입력</label>
	359	+ <input type="text" id="num_text2" class="list_inputType1" placeholder="인증번호를 입력해주세요" maxlength="6" onfocus="this.placeholder=''" onblur="this.placeholder='인증번호를 입력해주세요'" onkeypress="if(event.keyCode==13) {return false;}">
	360	+
	361	+ <div id="timer">3분00초</div>
	362	+ </div>
	363	+ <div class="login_del">
	364	+ <!-- <i class="password_protect"></i> -->
	365	+ <button type="button" onclick="textClear('num_text2')" tabindex="-1">
	366	+ <img src="/publish/images/content/login_del.png" alt="입력 삭제">
	367	+ </button>
	368	+ </div>
	369	+ </div>
	370	+ <div class="mem_bottom">
	371	+ <p class="cf_text">휴대폰번호로 전송된 인증번호를 입력해주세요 </p>
	372	+ <button type="button" class="red_box">휴대폰번호가 변경된 경우</button>
	373	+ </div>
	374	+
	375	+ <div class="mem_btnWrap2">
	376	+ <button type="button" class="mem_btn5">로그인</button>
	377	+ <button type="button" class="mem_btn2">취소</button>
	378	+ </div>
	379	+ <ul class="adv_list">
	380	+ <!-- <li><a href="https://www.ubikey.co.kr/" target="_blank"><img src="/publish/images/adv/adv_login_ubikey.png" alt="인증서를 사용하는 곳이면 어디서나 편리하게! 휴대폰 인증서 서비스 UBIKEY"></a></li> -->
	381	+ <li><a href="https://www.nordictools.co.kr/index.html" target="_blank"><img src="/publish/images/adv/adv_login_onekeeper.png" alt="소중한 내 개인정보! 원키퍼로 내가 지킨다!"></a></li>
	382	+ <li><a href="http://ganpandaum.co.kr/" target="_blank"><img src="/publish/images/adv/adv_login_ganpandaum.png" alt="간판다움 간판 잘하는 청년들이 뭉쳤다 간판, 인테리어, 네온, 썬팅, 어닝, 실사"></a></li>
	383	+ </ul>
	384	+ </div>
	385	+ </div>
	386	+ <!--// 비밀번호 확인 -->
	387	+
	388	+ </div>
	389	+ <!--// 마이페이지 - 회원정보 변경 -->
	390	+
	391	+ </div>
	392	+ <!--// send top -->
	393	+ </div>
	394	+ </div>
	395	+ <!--// content 영역 -->
	396	+ <!-- footer 영역 -->
	397	+ <!-- footer 영역 -->
	398	+ <footer id="footer" class="footer">
	399	+ <div class="footer_top">
	400	+ <div class="inner table">
	401	+ <ul class="table_cell">
	402	+ <li><a href="#">이용약관</a></li>
	403	+ <li class="SortLine fwRg c_white"><a href="#">개인정보취급방침</a></li>
	404	+ <li class="SortLine fwRg c_white"><a href="#">스팸관리정책</a></li>
	405	+ <li class="SortLine"><a href="#">불법스팸예방안내</a></li>
	406	+ </ul>
	407	+ </div>
	408	+ </div>
	409	+ <div class="footer_body">
	410	+ <div class="inner table">
	411	+ <div class="table_cell">
	412	+ <a href="#" class="footer_logo"><img src="/publish/images/CI_white.png" alt="문자온 CI"></a>
	413	+ <div class="footer_info">
	414	+ <p>주소 : 경기도 남양주시 다산중앙로 19번길 21 1027호, 1028호(블루웨일 지식산업센터 1차)</p>
	415	+ <p>사업자번호 : 653-87-00858 ｜ 대표 : 유인식 ｜ 통신판매등록번호 : 제 다산-12345호 ｜ 문의전화 : 070-4786-0007</p>
	416	+ <p>Copyright 2020 ⓒ MUNJAON co. Ltd, All rights reserved.</p>
	417	+ </div>
	418	+ <div class="footer_service_center">
	419	+ <i></i>
	420	+ <div>
	421	+ <p>고객센터</p>
	422	+ <span class="footer_service_num">070-4786-0008</span>
	423	+ <span>E-mail : help@iten.co.kr</span>
	424	+ </div>
	425	+ </div>
	426	+ </div>
	427	+ </div>
	428	+ </div>
	429	+ </footer>
	430	+ <!--// footer 영역 -->
	431	+</body>
	432	+
	433	+</html>(No newline at end of file)

26d9cad

ee7329e

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

--- src/main/webapp/publish/css/content.css

+++ src/main/webapp/publish/css/content.css


 .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;}

26d9cad

ee7329e

src/main/webapp/publish/js/content.js

--- src/main/webapp/publish/js/content.js

+++ src/main/webapp/publish/js/content.js

...	...	@@ -1579,3 +1579,76 @@
1579	1579	function fn_excelLoadRemoveActive(){
1580	1580	$('.loading_execl_layer').removeClass('active');
1581	1581	}
	1582	+
	1583	+
	1584	+// 프로그레스바
	1585	+var start, change;
	1586	+
	1587	+function progressStart(time, msg) {
	1588	+ $(".progress_bar_wrap").css("display", "flex");
	1589	+ var timeText = document.querySelector(".time_text");
	1590	+ var bar = document.querySelector(".change_bar");
	1591	+ var width = 1;
	1592	+ var totalTime = time * 1000; // 시간
	1593	+ var cmpWid = totalTime / 100; // 시간당 width
	1594	+
	1595	+ start = setInterval(changeWidth, cmpWid);
	1596	+
	1597	+ function changeWidth() {
	1598	+ if (width >= 100) {
	1599	+ clearInterval(start);
	1600	+ timeText.innerHTML = "100%";
	1601	+ setTimeout(function () {
	1602	+ timeText.innerHTML = "잠시만 기다려주세요...";
	1603	+ $(".time_text").addClass("animation");
	1604	+ }, 1000)
	1605	+
	1606	+ if (msg !== "" && msg !== undefined && msg !== null) {
	1607	+ alert(msg);
	1608	+ } else {}
	1609	+
	1610	+ } else {
	1611	+ width++;
	1612	+ bar.style.width = width + "%";
	1613	+ timeText.innerHTML = width + "%";
	1614	+ }
	1615	+ }
	1616	+}
	1617	+
	1618	+function progressComplete(msg,time,backtime) {
	1619	+ change = setInterval(changeText);
	1620	+ var width = 1;
	1621	+
	1622	+ function changeText() {
	1623	+ var widthText = $(".change_bar").attr("style");
	1624	+ widthText = widthText.replace(/[width:%;overfloen]/ig, "");
	1625	+ if (width >= 100) {
	1626	+ $(".time_text").text("100%");
	1627	+
	1628	+ if(backtime>=time){
	1629	+ setTimeout(function () {
	1630	+ $(".time_text").text("잠시만 기다려주세요...");
	1631	+ $(".time_text").addClass("animation");
	1632	+ }, 10)
	1633	+ }else{}
	1634	+
	1635	+
	1636	+ setTimeout(function () {
	1637	+ clearInterval(change);
	1638	+ }, 0);
	1639	+
	1640	+ } else {
	1641	+ width++;
	1642	+ $(".time_text").text(width + "%");
	1643	+ $(".change_bar").css("width", width + "%");
	1644	+ }
	1645	+ }
	1646	+ clearInterval(start);
	1647	+ if (msg !== "" && msg !== undefined && msg !== null) {
	1648	+ setTimeout(function () {
	1649	+ alert(msg);
	1650	+ }, 0)
	1651	+ } else {}
	1652	+
	1653	+
	1654	+}

ee7329e

src/main/webapp/publish/security_login_ajax.html (added)

+++ src/main/webapp/publish/security_login_ajax.html

...	...	@@ -0,0 +1,411 @@
	1	+<!DOCTYPE html>
	2	+<html lang="ko">
	3	+
	4	+<head>
	5	+ <meta charset="UTF-8">
	6	+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
	7	+ <title>문자온</title>
	8	+
	9	+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
	10	+ <link rel="stylesheet" href="/publish/css/reset.css">
	11	+ <link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css">
	12	+ <link rel="stylesheet" href="/publish/css/common.css">
	13	+ <link rel="stylesheet" href="/publish/css/button.css">
	14	+ <link rel="stylesheet" href="/publish/css/content.css">
	15	+ <link rel="stylesheet" href="/publish/css/mem.css">
	16	+ <link rel="stylesheet" href="/publish/css/font.css">
	17	+ <link rel="stylesheet" href="/publish/css/popupLayer.css">
	18	+
	19	+
	20	+ <script src="/publish/js/jquery-3.5.0.js"></script>
	21	+ <script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script>
	22	+ <script src="/publish/js/common.js"></script>
	23	+ <script src="/publish/js/content.js"></script>
	24	+ <script src="/publish/js/popupLayer.js"></script>
	25	+
	26	+ <script>
	27	+ $(function () {
	28	+ timer();
	29	+ });
	30	+
	31	+ function fn_test() {
	32	+
	33	+ // 초기셋팅
	34	+ $(".time_text").text("0%");
	35	+ $(".change_bar").css("width", "0");
	36	+ $(".time_text").removeClass("animation");
	37	+
	38	+ var url = "/web/mjon/test/ajaxTest.do";
	39	+
	40	+ var params = {
	41	+ isSuccess: "Y" // 성공여부 테스트 Y:성공 N:실패
	42	+ ,s_msg: "성공 메세지 입력" // 메세지 입력
	43	+ ,f_msg: "실패 메세지 입력" // 메세지 입력
	44	+ ,sleep: 5 // 초단위 딜레이 설정
	45	+ };
	46	+
	47	+ //progressStart(time, msg);
	48	+
	49	+ var time = 3;
	50	+
	51	+ $.ajax({
	52	+ type: "GET",
	53	+ url: url,
	54	+ data: params, // jQuery가 자동으로 URL 파라미터로 변환
	55	+ dataType: 'json',
	56	+ success: function (data) {
	57	+ console.log('data :: ', data);
	58	+
	59	+ // 성공 실패에 따른 메세지
	60	+ //alert(data.message);
	61	+
	62	+ // 성공 실패 분기처리
	63	+ if (data.status == 'OK') {
	64	+ progressComplete(data.message,time,params.sleep);
	65	+ //$(".progress_bar_wrap").hide();
	66	+ } else if (data.status == 'BAD_REQUEST') {
	67	+ alert(params.f_msg);
	68	+ $(".progress_bar_wrap").hide();
	69	+ }
	70	+
	71	+ },
	72	+ afterSend: function (xmlHttpRequest) {
	73	+
	74	+ },
	75	+ beforeSend: function (xmlHttpRequest) {
	76	+ progressStart(time);
	77	+ },
	78	+ complete: function (xhr, textStatus) {
	79	+ // 실패든 성공이든 ajax
	80	+
	81	+ // 성공 alert 먼저 뜨고 그다음에 언제 꺼질지.
	82	+ var delay = (time - params.sleep) * 1000;
	83	+
	84	+ if (time > params.sleep) {
	85	+ setTimeout(function () {
	86	+ $(".progress_bar_wrap").hide();
	87	+ }, delay);
	88	+
	89	+ } else {
	90	+
	91	+ $(".progress_bar_wrap").hide();
	92	+ }
	93	+
	94	+ },
	95	+ error: function (e) {
	96	+ alert("테스트를 실패하였습니다.");
	97	+ console.log("ERROR : ", e);
	98	+ }
	99	+ });
	100	+ }
	101	+
	102	+
	103	+
	104	+ //인증번호 타이머
	105	+ function timer() {
	106	+ var time = 180; //기준시간 작성
	107	+ var min = ""; //분
	108	+ var sec = ""; //초
	109	+ //setInterval(함수, 시간) : 주기적인 실행
	110	+ var x = setInterval(function () {
	111	+ //parseInt() : 정수를 반환
	112	+ min = parseInt(time / 60);
	113	+ sec = time % 60; //나머지를 계산
	114	+
	115	+ document.getElementById("timer").innerHTML = min + "분" + sec + "초";
	116	+ time--;
	117	+
	118	+ //타임아웃 시
	119	+ if (time < 0) {
	120	+ clearInterval(x); //setInterval() 실행을 끝냄
	121	+ document.getElementById("timer").innerHTML = "시간초과";
	122	+ }
	123	+
	124	+ }, 1000);
	125	+
	126	+ if (time != 180) {
	127	+ time = 180;
	128	+ clearInterval(x);
	129	+ }
	130	+ }
	131	+ </script>
	132	+
	133	+</head>
	134	+
	135	+<body>
	136	+ <div class="mask"></div>
	137	+
	138	+ <div class="progress_bar_wrap">
	139	+ <div class="progress_box">
	140	+ <p class="time_text">0%</p>
	141	+ <div class="bar">
	142	+ <span class="change_bar"></span>
	143	+ </div>
	144	+ </div>
	145	+ <div class="btn_wrap">
	146	+ <!-- <button type="button" class="btnType btnType2" style="margin:50px 0;" onclick="progressStart(10,'완료되었습니다.');">시작</button>
	147	+ <button type="button" class="btnType btnType2" style="margin:50px 0;" onclick="progressComplete('완료되었습니다.');return false;">멈춤</button> -->
	148	+ </div>
	149	+
	150	+ </div>
	151	+
	152	+ <!-- skip 메뉴 -->
	153	+ <div class="skip_menu">
	154	+ <a href="#cont" title="본문 바로가기" class="contGo">본문 바로가기</a>
	155	+ </div>
	156	+ <!--// skip 메뉴 -->
	157	+ <!-- quick 메뉴 -->
	158	+ <div class="quickMenu">
	159	+ <div>
	160	+ <p class="quick_title">
	161	+ QUICK<br>MENU
	162	+ </p>
	163	+ <p class="quick_title2">QUICK</p>
	164	+ <ul class="quickMenuIn">
	165	+ <li><a href="/publish/index.html"><i class="quick1"></i><span>이용안내</span></a>
	166	+ <div class="hover_cont">이용안내</div>
	167	+ </li>
	168	+ <li><a href="#"><i class="quick2"></i><span>채팅상담</span></a>
	169	+ <div class="hover_cont">채팅상담</div>
	170	+ </li>
	171	+ <li><a href="#"><i class="quick3"></i><span>원격지원</span></a>
	172	+ <div class="hover_cont">원격지원</div>
	173	+ </li>
	174	+ <li><a href="#"><i class="quick4"></i><span>맞춤제작</span></a>
	175	+ <div class="hover_cont">맞춤제작</div>
	176	+ </li>
	177	+ <li><a href="#"><i class="quick5"></i><span>주소록 등록</span></a>
	178	+ <div class="hover_cont">주소록 등록</div>
	179	+ </li>
	180	+ <li><a href="#"><i class="quick6"></i><span>엑셀 전송</span></a>
	181	+ <div class="hover_cont">엑셀 대량전송</div>
	182	+ </li>
	183	+ <li><a href="#"><i class="quick7"></i><span>견적서</span></a>
	184	+ <div class="hover_cont">견적서</div>
	185	+ </li>
	186	+ <li><a href="#"><i class="quick8"></i><span>결제</span></a>
	187	+ <div class="hover_cont">결제</div>
	188	+ </li>
	189	+ <li><a href="#"><i class="quick9"></i><span>영수증/계산서</span></a>
	190	+ <div class="hover_cont">영수증/계산서</div>
	191	+ </li>
	192	+ </ul>
	193	+ <button type="button" class="goTop" title="맨 위로 이동">
	194	+ TOP<i></i>
	195	+ </button>
	196	+ </div>
	197	+ </div>
	198	+ <!--// quick 메뉴 -->
	199	+ <!-- header 영역 -->
	200	+ <header id="header" class="header">
	201	+ <!-- header top 영역 -->
	202	+ <div class="header_top">
	203	+ <div class="inner">
	204	+ <ul class="menu_left">
	205	+ <li><a href="#"><i class="hdTop_fav"></i>즐겨찾기추가</a></li>
	206	+ <li><a href="#"><i class="hdTop_mypage"></i>마이페이지</a></li>
	207	+ <li><a href="#"><i class="hdTop_center"></i>고객센터</a></li>
	208	+ </ul>
	209	+ <ul class="menu_right">
	210	+ <li><a href="#">충전하기</a></li>
	211	+ <li class="SortLine"><a href="#">요금안내</a></li>
	212	+ <li class="SortLine"><a href="#">이용안내</a></li>
	213	+ <li class="SortLine"><a href="#">1:1고객상담</a></li>
	214	+ </ul>
	215	+ </div>
	216	+ </div>
	217	+ <!-- header top 영역 -->
	218	+ <!-- header body 영역 -->
	219	+ <div class="header_body">
	220	+ <div class="inner table">
	221	+ <h1 class="logo">
	222	+ <a href="/publish/index.html" alt="문자온 메인 바로가기"><img src="/publish/images/CI.png" alt="문자온 CI"></a>
	223	+ </h1>
	224	+ <ul class="gnbWrap table_cell">
	225	+ <li><a href="#">문자발송</a></li>
	226	+ <li><a href="#">선거문자</a></li>
	227	+ <li><a href="#">맞춤제작</a></li>
	228	+ <li><a href="#">비즈톡</a></li>
	229	+ <li><a href="#">주소록 관리</a></li>
	230	+ <li><a href="#">발송결과</a></li>
	231	+ <li><a href="#">예약관리</a></li>
	232	+ <li><a href="#">결제내역</a></li>
	233	+ </ul>
	234	+ <div class="s_menu">
	235	+ <i class="allSearch_info"><span>문자검색</span></i>
	236	+ <button type="button" title="전체검색" class="allSearch" onclick="searchToggle();">
	237	+ <img src="/publish/images/search.png" alt="검색영역 열기" class="allMenu">
	238	+ </button>
	239	+ <button type="button" title="전체메뉴">
	240	+ <img src="/publish/images/all_menu.png" alt="전체메뉴 열기">
	241	+ </button>
	242	+ </div>
	243	+ </div>
	244	+ <!-- search popup 영역 -->
	245	+ <div class="pop_search">
	246	+ <div class="inner">
	247	+ <div class="area_search">
	248	+ <select name="" id="">
	249	+ <option value="">그림문자</option>
	250	+ <option value="">단문문자</option>
	251	+ <option value="">장문문자</option>
	252	+ <option value="">GIF</option>
	253	+ </select> <input type="text" placeholder="문자샘플 검색하기">
	254	+ <button>
	255	+ <img src="/publish/images/search02.png" alt="">
	256	+ </button>
	257	+ </div>
	258	+ <div class="area_popular">
	259	+ <p>
	260	+ <i></i>인기검색어
	261	+ </p>
	262	+ <ul class="popular_tag">
	263	+ <li><a href="#">#정월대보름</a></li>
	264	+ <li class="on"><a href="#">#추석</a></li>
	265	+ <li><a href="#">#가을인사</a></li>
	266	+ <li><a href="#">#좋은하루</a></li>
	267	+ </ul>
	268	+ </div>
	269	+ <button class="btn_close" onclick="searchToggle();">
	270	+ <img src="/publish/images/btn_searchclose.png" alt="">
	271	+ </button>
	272	+ </div>
	273	+ </div>
	274	+ <!--// search popup 영역 -->
	275	+ </div>
	276	+ <!--// header body 영역 -->
	277	+ <div id="login" class="login">
	278	+ <div class="inner table">
	279	+ <div class="login_left table_cell">
	280	+ <div class="login_put">
	281	+ <label for="id_text" class="label"></label> <input type="text" placeholder="아이디를 입력해주세요" id="id_text" class="id_text" maxlength="30" size="18"> <label for="password_text" class="label"></label> <input type="password" placeholder="비밀번호를 입력해주세요" id="password_text" class="password_text" maxlength="30" size="18"> <label for="login_button" class="label"></label>
	282	+ <button type="submit" class="btnType btnType1" class="login_button">로그인</button>
	283	+ </div>
	284	+ <div class="login_save">
	285	+ <input type="checkbox" id="save_id"> <label for="save_id">아이디
	286	+ 저장</label>
	287	+ </div>
	288	+ <div class="login_find">
	289	+ <a href="#">아이디찾기 /</a> <a href="#">비밀번호 찾기</a>
	290	+ </div>
	291	+ <div>
	292	+ <button type="button" class="btnType btnType2">회원가입</button>
	293	+ <button type="button" class="btnType btnType3">둘러보기</button>
	294	+ </div>
	295	+ </div>
	296	+ <div class="login_right">
	297	+ <span><i></i>이달의 이벤트</span>
	298	+ <button type="button" class="btnType btnType4">바로가기</button>
	299	+ </div>
	300	+ </div>
	301	+ </div>
	302	+ <!--// login 영역 -->
	303	+ </header>
	304	+ <!--// header 영역 -->
	305	+ <!-- login 영역 -->
	306	+ <!-- content 영역 -->
	307	+ <div id="container" class="cont sub">
	308	+ <div class="inner">
	309	+ <!-- send top -->
	310	+ <div class="send_top">
	311	+ <!-- 마이페이지 - 로그인 -->
	312	+ <div class="mypage_content current">
	313	+ <div class="heading">
	314	+ <h2>보안 로그인</h2>
	315	+ </div>
	316	+ <div class="mem_cont_in widthS login_wrap security_login">
	317	+ <div class="input_list">
	318	+ <p class="welcome">
	319	+ <span>안전한 서비스 이용</span>을 위해 <span class="c_222 fwBold">가입자
	320	+ 인증</span>이 필요합니다.
	321	+ </p>
	322	+ <div class="input_list_item" id="input_list_item_4">
	323	+ <div class="input_left">휴대폰번호</div>
	324	+ <div class="input_right">
	325	+ <label for="list_inputType1" class="label">휴대폰번호</label> <select id="hp_text2" class="list_selType1" style="width: 70%;">
	326	+ <option value="01057058729">01057058729(대표번호)</option>
	327	+ </select>
	328	+ </div>
	329	+ <div class="login_del">
	330	+ <button type="button" class="btnType btnType3" onclick="sendMsgYn();">인증번호 받기</button>
	331	+ </div>
	332	+ </div>
	333	+ <div class="input_list_item" id="input_list_item_5">
	334	+ <div class="input_left">인증번호 입력</div>
	335	+ <div class="input_right">
	336	+ <label for="list_inputType1" class="label">인증번호 입력</label> <input type="text" id="num_text2" class="list_inputType1" placeholder="인증번호를 입력해주세요" maxlength="6" onfocus="this.placeholder=''" onblur="this.placeholder='인증번호를 입력해주세요'" onkeypress="if(event.keyCode==13) {return false;}">
	337	+
	338	+ <div id="timer">3분00초</div>
	339	+ </div>
	340	+ <div class="login_del">
	341	+ <!-- <i class="password_protect"></i> -->
	342	+ <button type="button" onclick="textClear('num_text2')" tabindex="-1">
	343	+ <img src="/publish/images/content/login_del.png" alt="입력 삭제">
	344	+ </button>
	345	+ </div>
	346	+ </div>
	347	+ <div class="mem_bottom">
	348	+ <p class="cf_text">휴대폰번호로 전송된 인증번호를 입력해주세요</p>
	349	+ <button type="button" class="red_box">휴대폰번호가 변경된 경우</button>
	350	+ </div>
	351	+
	352	+ <div class="mem_btnWrap2">
	353	+ <button type="button" class="mem_btn5">로그인</button>
	354	+ <button type="button" class="mem_btn2">취소</button>
	355	+ </div>
	356	+ <ul class="adv_list">
	357	+ <!-- <li><a href="https://www.ubikey.co.kr/" target="_blank"><img src="/publish/images/adv/adv_login_ubikey.png" alt="인증서를 사용하는 곳이면 어디서나 편리하게! 휴대폰 인증서 서비스 UBIKEY"></a></li> -->
	358	+ <li><a href="https://www.nordictools.co.kr/index.html" target="_blank"><img src="/publish/images/adv/adv_login_onekeeper.png" alt="소중한 내 개인정보! 원키퍼로 내가 지킨다!"></a></li>
	359	+ <li><a href="http://ganpandaum.co.kr/" target="_blank"><img src="/publish/images/adv/adv_login_ganpandaum.png" alt="간판다움 간판 잘하는 청년들이 뭉쳤다 간판, 인테리어, 네온, 썬팅, 어닝, 실사"></a></li>
	360	+ </ul>
	361	+ </div>
	362	+ </div>
	363	+ <!--// 비밀번호 확인 -->
	364	+
	365	+ </div>
	366	+ <!--// 마이페이지 - 회원정보 변경 -->
	367	+
	368	+ </div>
	369	+ <!--// send top -->
	370	+ </div>
	371	+ </div>
	372	+ <!--// content 영역 -->
	373	+ <!-- footer 영역 -->
	374	+ <!-- footer 영역 -->
	375	+ <footer id="footer" class="footer">
	376	+ <div class="footer_top">
	377	+ <div class="inner table">
	378	+ <ul class="table_cell">
	379	+ <li><a href="#">이용약관</a></li>
	380	+ <li class="SortLine fwRg c_white"><a href="#">개인정보취급방침</a></li>
	381	+ <li class="SortLine fwRg c_white"><a href="#">스팸관리정책</a></li>
	382	+ <li class="SortLine"><a href="#">불법스팸예방안내</a></li>
	383	+ </ul>
	384	+ </div>
	385	+ </div>
	386	+ <div class="footer_body">
	387	+ <div class="inner table">
	388	+ <div class="table_cell">
	389	+ <a href="#" class="footer_logo"><img src="/publish/images/CI_white.png" alt="문자온 CI"></a>
	390	+ <div class="footer_info">
	391	+ <p>주소 : 경기도 남양주시 다산중앙로 19번길 21 1027호, 1028호(블루웨일 지식산업센터 1차)</p>
	392	+ <p>사업자번호 : 653-87-00858 ｜ 대표 : 유인식 ｜ 통신판매등록번호 : 제 다산-12345호 ｜
	393	+ 문의전화 : 070-4786-0007</p>
	394	+ <p>Copyright 2020 ⓒ MUNJAON co. Ltd, All rights reserved.</p>
	395	+ </div>
	396	+ <div class="footer_service_center">
	397	+ <i></i>
	398	+ <div>
	399	+ <p>고객센터</p>
	400	+ <span class="footer_service_num">070-4786-0008</span> <span>E-mail
	401	+ : help@iten.co.kr</span>
	402	+ </div>
	403	+ </div>
	404	+ </div>
	405	+ </div>
	406	+ </div>
	407	+ </footer>
	408	+ <!--// footer 영역 -->
	409	+</body>
	410	+
	411	+</html>(No newline at end of file)

Add a comment

Open 0
Closed 0

List

...	...	@@ -1507,6 +1507,14 @@
1507	1507	.upload_area .loading_layer{position: absolute;}
1508	1508	.upload_area .loading_layer.active+p,.upload_area .loading_layer.active+p+.cf_text_wrap{opacity: 0;}
1509	1509
	1510	+.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;}
	1511	+.progress_box{padding:30px;background:#fff;border-radius:10px;text-align:center;}
	1512	+.progress_bar_wrap .bar{display:flex;width:400px;height:5px;text-align:left;padding:0;background:#f4f5f6;border-radius:30px;align-items:center;}
	1513	+.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;}
	1514	+.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);}
	1515	+.progress_bar_wrap .time_text{height:20px;font-family:'GmarketSansBold';font-size:20px;font-weight:500;color:#222;margin:0 0 20px 0;}
	1516	+.progress_bar_wrap .time_text.animation{animation:text-loading 1.5s ease-in infinite;}
	1517	+
1510	1518	/* 문자온 소개 */
1511	1519	.intro_cont .img_cont img{width: 100%;}
1512	1520	.intro_cont .title{display: flex; width: 100%; margin: 0 0 30px 0; font-size: 24px; font-weight: bold;justify-content: space-between;}

Delete comment