Commit @b7411be08ad3a886c617dd8b2ec8ae366740682d

정수빈 2024-11-21

2024/11/21 보안로그인 on/off 수정, 로그인 정보창 보안로그인 추가

@b7411be08ad3a886c617dd8b2ec8ae366740682d

2e7852a

b7411be

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

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

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


 .login2 .check_money,
 .login2 .point,
 .login2 .event {white-space:nowrap;}
+
+/* 보안로그인 */
+.security_box{display:inline-flex;height:36px;font-weight:500;background:#fff;padding:0 11px;margin:0 0 0 10px;vertical-align:middle;border-radius:5px;align-items:center;}
+.login2 .login_info .security_box i.icon_lock{display:inline-block;width:20px;height:18px;background:url(/publish/images/icon_lock.png) no-repeat center center;background-size:auto 100%;vertical-align:top;}
+.security_box .state{font-size:13px;font-weight:600;padding:5px 10px;margin:0 0 0 5px;border-radius:5px;}
+.security_box .state.on{border:1px solid #18bb59;background:#e7f8ee;color:#18bb59;}
+.security_box .state.off{border:1px solid #e62c2c;background:#fce9e9;color:#e62c2c;}
+
 /* //header */
 
 

b7411be

src/main/webapp/publish/images/icon_lock.png (Binary) (added)

+++ src/main/webapp/publish/images/icon_lock.png

Binary file is not shown

2e7852a

b7411be

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

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

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


 	});
 
 	/* 문자샘플 탭 선택 시 활성화 */
-	$(".tab_depth1 a").click(function () {
+	$(".tab_depth1:not(.security_tab) a").click(function () {
 		var tabText = $(this).text();
 		var tabPosi = $(this).position().left;
 		tabPosi -= 1;

2e7852a

b7411be

src/main/webapp/publish/mypage_index_2024.html

--- src/main/webapp/publish/mypage_index_2024.html

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


 		$(function () {
 
 			// on/off 시 confirm 창 노출
-			$('.security_set .tab_depth1 a').click(function () {
-				if ($(this).text().trim() == "ON") {
-					confirm("보안로그인 설정 후 로그인 시, 등록한 휴대폰번호로 추가 인증이 진행됩니다");
-				} else {
-					confirm("가입자 휴대폰번호로 본인인증 후 해제가 가능하며, 보안로그인 설정을 해제함으로써 발생하는 손해에 대하여 회사는 책임지지 않습니다.");
+			$('.security_tab a').click(function (e) {
+				console.log($(this).hasClass("on"))
+				if ($(this).hasClass("on") == false) {
+					if ($(this).text().trim() == "ON") {
+						if (!confirm("보안로그인 설정 후 로그인 시, 등록한 휴대폰번호로 추가 인증이 진행됩니다")) {
+							$(this).removeClass("on");
+							$(this).siblings("a").addClass("on");
+						} else {
+							$(this).addClass("on");
+							$(this).siblings("a").removeClass("on");
+						}
+					} else {
+						if (!confirm("가입자 휴대폰번호로 본인인증 후 해제가 가능하며, 보안로그인 설정을 해제함으로써 발생하는 손해에 대하여 회사는 책임지지 않습니다.")) {
+							$(this).removeClass("on");
+							$(this).siblings("a").addClass("on");
+						} else {
+							$(this).addClass("on");
+							$(this).siblings("a").removeClass("on");
+						}
+					}
 				}
 			});
 

 				</div>
 			</div>
 		</div>
-		<div id="login" class="login">
+		<div id="login" class="login2">
 			<div class="inner table">
 				<div class="login_left table_cell">
-					<div class="login_put"><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><button type="submit" class="btnType btnType1" class="login_button">로그인</button></div>
-					<div class="login_save"><input type="checkbox" id="save_id"><label for="save_id">아이디 저장</label></div>
-					<div class="login_find"><a href="#">아이디찾기 /</a><a href="#">비밀번호 찾기</a></div>
-					<div><button type="button" class="btnType btnType2">회원가입</button><button type="button" class="btnType btnType3">둘러보기</button></div>
-				</div>
-				<div class="login_right"><span><i></i>이달의 이벤트</span><button type="button" class="btnType btnType4">바로가기</button>
+					<div class="login_info">
+						<i></i>
+						<div class="login2_name">
+							<p>홍길동</p>
+							<span>(개인)</span>
+						</div>
+						<div class="session">
+							<span>08:46</span>
+							<button type="button">연장</button>
+						</div>
+						<button type="button" class="btnType btnType3">마이페이지</button>
+						<button type="button" class="btnType btnType2">로그아웃</button>
+						<div class="security_box">
+							<p class="title"><i class="icon_lock"></i>보안로그인</p>
+							<a href="#" class="state on">ON</a>
+							<!-- <a href="#" class="state off">OFF</a> -->
+						</div>
+					</div>
+					<div class="login_pay">
+						<div class="check_money">
+							<div class="holdingsum_box">
+								<i></i>
+								<p>보유잔액 <span class="fwMd">3,000</span>원</p>
+								<dl>
+									<dd>후불제 고객의 보유잔액(캐시)은 당월 발송 가능<br>금액을 말하며 <span>매월 1일 자동으로 충전</span>됩니다.</dd>
+								</dl>
+							</div>
+							<button type="button" class="btnType btnType3">충전</button>
+							<div class="account_box">
+								<button type="button" class="btnType btnType3">전용계좌</button>
+								<dl>
+									<dt>전용계좌</dt>
+									<dd>신한은행 56212519515101</dd>
+								</dl>
+							</div>
+						</div>
+						<div class="point">
+							<i></i>
+							<p>포인트 <span class="fwMd">1,000</span>원</p>
+							<button type="button" class="btnType btnType3">교환</button>
+						</div>
+					</div>
+
 				</div>
 			</div>
 		</div>

 							</ul>
 
 
-							<!-- 보안로그인 설정(허용 IP 아닌 경우) -->
+							<!-- 보안로그인 설정 -->
 							<div class="security_set box">
 								<div class="title_wrap">
 									<p class="dashboard_title">보안로그인</p>

 								<div class="set_area">
 									<p class="lately_date">최근 변경일시 : <span>2024-11-01 12:49</span></p>
 
-									<div class="tab_depth1">
+									<div class="tab_depth1 security_tab">
 										<a href="#none" class="on">ON</a>
 										<a href="#none">OFF</a>
 									</div>
 								</div>
 							</div>
-							<!-- //보안로그인 설정(허용 IP 아닌 경우) -->
+							<!-- //보안로그인 설정 -->
 
-							<!-- 보안로그인 설정(허용 IP인 경우) -->
+							<!-- 보안로그인 설정 -->
 							<div class="security_set box">
 								<div class="title_wrap">
 									<p class="dashboard_title">보안로그인</p>

 								<div class="set_area">
 									<p class="lately_date">최근 변경일시 : <span>2024-11-01 12:49</span></p>
 
-									<div class="tab_depth1">
+									<div class="tab_depth1 security_tab">
 										<a href="#none" class="on">ON</a>
 										<a href="#none">OFF</a>
 									</div>
 								</div>
 							</div>
-							<!-- //보안로그인 설정(허용 IP인 경우) -->
+							<!-- //보안로그인 설정 -->
 
 							<!-- 인증 휴대폰번호 관리 -->
 							<div class="title_area">

 										<col style="width: 26%;">
 										<col style="width: auto;">
 										<col style="width: 26%;">
-										<col style="width: 140px;">
+										<col style="width: 100px;">
 									</colgroup>
 									<thead>
 										<tr>

 										</tr>
 									</thead>
 									<tbody>
+										<!-- <tr>
+											<td>010-0000-0000</td>
+											<td><input type="text" class="input_text"></td>
+											<td>2024-11-04 11:54</td>
+											<td><button type="button" class="btnType btnType5 btn_save">저장</button></td>
+										</tr> -->
 										<tr>
 											<td>010-0000-0000</td>
 											<td class="td_memo">메모 내용</td>
 											<td>2024-11-04 11:54</td>
-											<td><button type="button" class="btnType btnType5 btn_edit" style="margin:0 5px 0 0;" onclick="memoEdit(this);">수정</button><button type="button" class="btnType btn_text btn_lightgray fill btn_28">삭제</button></td>
+											<td><button type="button" class="btnType btnType5 btn_edit" onclick="memoEdit(this);">수정</button></td>
 										</tr>
 										<tr>
 											<td>010-0000-0000</td>
-											<td>메모내용</td>
+											<td><input type="text" class="input_text"></td>
 											<td>2024-11-04 11:54</td>
-											<td><button type="button" class="btnType btnType5 btn_edit" style="margin:0 5px 0 0;" onclick="memoEdit(this);">수정</button><button type="button" class="btnType btn_text btn_lightgray fill btn_28">삭제</button></td>
+											<td><button type="button" class="btnType btn_text btn_lightgray fill btn_28">삭제</button></td>
 										</tr>
 									</tbody>
 								</table>

 								<p class="dashboard_title">로그인 내역 <span class="small_text">로그인 내역은 최대 90일까지만 보관됩니다.</span></p>
 							</div>
 
-							<div class="table_wrap ip_table">
+							<div class="table_wrap">
 								<table>
 									<colgroup>
 										<col style="width:calc(100% /3);">

Add a comment

Open 0
Closed 0

List

...	...	@@ -151,6 +151,14 @@
151	151	.login2 .check_money,
152	152	.login2 .point,
153	153	.login2 .event {white-space:nowrap;}
	154	+
	155	+/* 보안로그인 */
	156	+.security_box{display:inline-flex;height:36px;font-weight:500;background:#fff;padding:0 11px;margin:0 0 0 10px;vertical-align:middle;border-radius:5px;align-items:center;}
	157	+.login2 .login_info .security_box i.icon_lock{display:inline-block;width:20px;height:18px;background:url(/publish/images/icon_lock.png) no-repeat center center;background-size:auto 100%;vertical-align:top;}
	158	+.security_box .state{font-size:13px;font-weight:600;padding:5px 10px;margin:0 0 0 5px;border-radius:5px;}
	159	+.security_box .state.on{border:1px solid #18bb59;background:#e7f8ee;color:#18bb59;}
	160	+.security_box .state.off{border:1px solid #e62c2c;background:#fce9e9;color:#e62c2c;}
	161	+
154	162	/* //header */
155	163
156	164

...	...	@@ -70,7 +70,7 @@
70	70	});
71	71
72	72	/* 문자샘플 탭 선택 시 활성화 */
73		- $(".tab_depth1 a").click(function () {
	73	+ $(".tab_depth1:not(.security_tab) a").click(function () {
74	74	var tabText = $(this).text();
75	75	var tabPosi = $(this).position().left;
76	76	tabPosi -= 1;

...	...	@@ -24,11 +24,26 @@
24	24	$(function () {
25	25
26	26	// on/off 시 confirm 창 노출
27		- $('.security_set .tab_depth1 a').click(function () {
28		- if ($(this).text().trim() == "ON") {
29		- confirm("보안로그인 설정 후 로그인 시, 등록한 휴대폰번호로 추가 인증이 진행됩니다");
30		- } else {
31		- confirm("가입자 휴대폰번호로 본인인증 후 해제가 가능하며, 보안로그인 설정을 해제함으로써 발생하는 손해에 대하여 회사는 책임지지 않습니다.");
	27	+ $('.security_tab a').click(function (e) {
	28	+ console.log($(this).hasClass("on"))
	29	+ if ($(this).hasClass("on") == false) {
	30	+ if ($(this).text().trim() == "ON") {
	31	+ if (!confirm("보안로그인 설정 후 로그인 시, 등록한 휴대폰번호로 추가 인증이 진행됩니다")) {
	32	+ $(this).removeClass("on");
	33	+ $(this).siblings("a").addClass("on");
	34	+ } else {
	35	+ $(this).addClass("on");
	36	+ $(this).siblings("a").removeClass("on");
	37	+ }
	38	+ } else {
	39	+ if (!confirm("가입자 휴대폰번호로 본인인증 후 해제가 가능하며, 보안로그인 설정을 해제함으로써 발생하는 손해에 대하여 회사는 책임지지 않습니다.")) {
	40	+ $(this).removeClass("on");
	41	+ $(this).siblings("a").addClass("on");
	42	+ } else {
	43	+ $(this).addClass("on");
	44	+ $(this).siblings("a").removeClass("on");
	45	+ }
	46	+ }
32	47	}
33	48	});
34	49
...	...	@@ -198,15 +213,52 @@
198	213	</div>
199	214	</div>
200	215	</div>
201		- <div id="login" class="login">
	216	+ <div id="login" class="login2">
202	217	<div class="inner table">
203	218	<div class="login_left table_cell">
204		- <div class="login_put"><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><button type="submit" class="btnType btnType1" class="login_button">로그인</button></div>
205		- <div class="login_save"><input type="checkbox" id="save_id"><label for="save_id">아이디 저장</label></div>
206		- <div class="login_find"><a href="#">아이디찾기 /</a><a href="#">비밀번호 찾기</a></div>
207		- <div><button type="button" class="btnType btnType2">회원가입</button><button type="button" class="btnType btnType3">둘러보기</button></div>
208		- </div>
209		- <div class="login_right"><span><i></i>이달의 이벤트</span><button type="button" class="btnType btnType4">바로가기</button>
	219	+ <div class="login_info">
	220	+ <i></i>
	221	+ <div class="login2_name">
	222	+ <p>홍길동</p>
	223	+ <span>(개인)</span>
	224	+ </div>
	225	+ <div class="session">
	226	+ <span>08:46</span>
	227	+ <button type="button">연장</button>
	228	+ </div>
	229	+ <button type="button" class="btnType btnType3">마이페이지</button>
	230	+ <button type="button" class="btnType btnType2">로그아웃</button>
	231	+ <div class="security_box">
	232	+ <p class="title"><i class="icon_lock"></i>보안로그인</p>
	233	+ <a href="#" class="state on">ON</a>
	234	+ <!-- <a href="#" class="state off">OFF</a> -->
	235	+ </div>
	236	+ </div>
	237	+ <div class="login_pay">
	238	+ <div class="check_money">
	239	+ <div class="holdingsum_box">
	240	+ <i></i>
	241	+ <p>보유잔액 <span class="fwMd">3,000</span>원</p>
	242	+ <dl>
	243	+ <dd>후불제 고객의 보유잔액(캐시)은 당월 발송 가능<br>금액을 말하며 <span>매월 1일 자동으로 충전</span>됩니다.</dd>
	244	+ </dl>
	245	+ </div>
	246	+ <button type="button" class="btnType btnType3">충전</button>
	247	+ <div class="account_box">
	248	+ <button type="button" class="btnType btnType3">전용계좌</button>
	249	+ <dl>
	250	+ <dt>전용계좌</dt>
	251	+ <dd>신한은행 56212519515101</dd>
	252	+ </dl>
	253	+ </div>
	254	+ </div>
	255	+ <div class="point">
	256	+ <i></i>
	257	+ <p>포인트 <span class="fwMd">1,000</span>원</p>
	258	+ <button type="button" class="btnType btnType3">교환</button>
	259	+ </div>
	260	+ </div>
	261	+
210	262	</div>
211	263	</div>
212	264	</div>
...	...	@@ -239,7 +291,7 @@
239	291	</ul>
240	292
241	293
242		- <!-- 보안로그인 설정(허용 IP 아닌 경우) -->
	294	+ <!-- 보안로그인 설정 -->
243	295	<div class="security_set box">
244	296	<div class="title_wrap">
245	297	<p class="dashboard_title">보안로그인</p>
...	...	@@ -252,15 +304,15 @@
252	304	<div class="set_area">
253	305	<p class="lately_date">최근 변경일시 : <span>2024-11-01 12:49</span></p>
254	306
255		- <div class="tab_depth1">
	307	+ <div class="tab_depth1 security_tab">
256	308	<a href="#none" class="on">ON</a>
257	309	<a href="#none">OFF</a>
258	310	</div>
259	311	</div>
260	312	</div>
261		- <!-- //보안로그인 설정(허용 IP 아닌 경우) -->
	313	+ <!-- //보안로그인 설정 -->
262	314
263		- <!-- 보안로그인 설정(허용 IP인 경우) -->
	315	+ <!-- 보안로그인 설정 -->
264	316	<div class="security_set box">
265	317	<div class="title_wrap">
266	318	<p class="dashboard_title">보안로그인</p>
...	...	@@ -272,13 +324,13 @@
272	324	<div class="set_area">
273	325	<p class="lately_date">최근 변경일시 : <span>2024-11-01 12:49</span></p>
274	326
275		- <div class="tab_depth1">
	327	+ <div class="tab_depth1 security_tab">
276	328	<a href="#none" class="on">ON</a>
277	329	<a href="#none">OFF</a>
278	330	</div>
279	331	</div>
280	332	</div>
281		- <!-- //보안로그인 설정(허용 IP인 경우) -->
	333	+ <!-- //보안로그인 설정 -->
282	334
283	335	<!-- 인증 휴대폰번호 관리 -->
284	336	<div class="title_area">
...	...	@@ -297,7 +349,7 @@
297	349	<col style="width: 26%;">
298	350	<col style="width: auto;">
299	351	<col style="width: 26%;">
300		- <col style="width: 140px;">
	352	+ <col style="width: 100px;">
301	353	</colgroup>
302	354	<thead>
303	355	<tr>
...	...	@@ -308,17 +360,23 @@
308	360	</tr>
309	361	</thead>
310	362	<tbody>
	363	+ <!-- <tr>
	364	+ <td>010-0000-0000</td>
	365	+ <td><input type="text" class="input_text"></td>
	366	+ <td>2024-11-04 11:54</td>
	367	+ <td><button type="button" class="btnType btnType5 btn_save">저장</button></td>
	368	+ </tr> -->
311	369	<tr>
312	370	<td>010-0000-0000</td>
313	371	<td class="td_memo">메모 내용</td>
314	372	<td>2024-11-04 11:54</td>
315		- <td><button type="button" class="btnType btnType5 btn_edit" style="margin:0 5px 0 0;" onclick="memoEdit(this);">수정</button><button type="button" class="btnType btn_text btn_lightgray fill btn_28">삭제</button></td>
	373	+ <td><button type="button" class="btnType btnType5 btn_edit" onclick="memoEdit(this);">수정</button></td>
316	374	</tr>
317	375	<tr>
318	376	<td>010-0000-0000</td>
319		- <td>메모내용</td>
	377	+ <td><input type="text" class="input_text"></td>
320	378	<td>2024-11-04 11:54</td>
321		- <td><button type="button" class="btnType btnType5 btn_edit" style="margin:0 5px 0 0;" onclick="memoEdit(this);">수정</button><button type="button" class="btnType btn_text btn_lightgray fill btn_28">삭제</button></td>
	379	+ <td><button type="button" class="btnType btn_text btn_lightgray fill btn_28">삭제</button></td>
322	380	</tr>
323	381	</tbody>
324	382	</table>
...	...	@@ -376,7 +434,7 @@
376	434	<p class="dashboard_title">로그인 내역 <span class="small_text">로그인 내역은 최대 90일까지만 보관됩니다.</span></p>
377	435	</div>
378	436
379		- <div class="table_wrap ip_table">
	437	+ <div class="table_wrap">
380	438	<table>
381	439	<colgroup>
382	440	<col style="width:calc(100% /3);">

Delete comment