정수빈
2024-11-22
2024/11/22 보안로그인 디자인 수정
@3087d39dcb01826807633f0807be07a8ad9d06d4
--- src/main/webapp/publish/css/common.css
+++ src/main/webapp/publish/css/common.css
... | ... | @@ -153,11 +153,13 @@ |
| 153 | 153 |
.login2 .event {white-space:nowrap;}
|
| 154 | 154 |
|
| 155 | 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;}
|
|
| 156 |
+.security_box{display:inline-flex;height:36px;font-weight:500;background:#fff;padding:0 8px 0 11px;margin:0 0 0 3px;vertical-align:middle;border-radius:5px;align-items:center;}
|
|
| 157 |
+.security_box.red_box{border:1px solid #ca1a1a;}
|
|
| 158 |
+.security_box.green_box{border:1px solid #0ca448;}
|
|
| 159 |
+.security_box p{cursor:pointer;}
|
|
| 160 |
+.security_box .state{display:flex;width:40px;height:25px;font-size:13px;font-weight:600;margin:0 0 0 5px;border-radius:5px;justify-content:center;align-items:center;cursor:pointer;}
|
|
| 161 |
+.security_box .state.on{background:#18bb59;color:#fff;}
|
|
| 162 |
+.security_box .state.off{background:#e62c2c;color:#fff;}
|
|
| 161 | 163 |
|
| 162 | 164 |
/* //header */ |
| 163 | 165 |
|
--- src/main/webapp/publish/css/mem.css
+++ src/main/webapp/publish/css/mem.css
... | ... | @@ -585,10 +585,13 @@ |
| 585 | 585 |
.security_login .btn_plus{position:absolute;right:0;}
|
| 586 | 586 |
.security_login .set_area{display:flex;align-items:center;}
|
| 587 | 587 |
.security_login .lately_date{font-size:15px;color:#666;}
|
| 588 |
-.security_login .tab_depth1{margin:0 0 0 15px;text-align:center;}
|
|
| 589 |
-.security_login .tab_depth1 a{display:inline-flex;justify-content:center;align-items:center;}
|
|
| 590 |
-.security_login .tab_depth1 a:last-child{border-right:0;}
|
|
| 591 |
-.security_login .tab_depth1 a.on:last-child{border-right:1px solid;border-radius: 0 5px 5px 0 !important;}
|
|
| 588 |
+.security_login .security_tab{position:relative;width:80px;margin:0 0 0 15px;text-align:center;border-radius:100px;border:0;box-shadow:none;background:transparent;}
|
|
| 589 |
+.security_login .security_tab.on::after{position:absolute;content:"";width:25px;height:25px;border-radius:100%;background:#fff;top:5px;right:5px;box-shadow:0 0 5px rgba(0,0,0,0.3);cursor:pointer;}
|
|
| 590 |
+.security_login .security_tab.off::after{position:absolute;content:"";width:25px;height:25px;border-radius:100%;background:#fff;top:5px;left:5px;box-shadow:0 0 5px rgba(0,0,0,0.3);cursor:pointer;}
|
|
| 591 |
+.security_login .tab_depth1 a{display:none;font-size:16px;font-weight:bold;line-height:32px;}
|
|
| 592 |
+.security_login .tab_depth1 a.on{display:block;margin:0;box-shadow:inset 0 0 3px rgba(0,0,0,0.2);}
|
|
| 593 |
+.security_login .tab_depth1 a:first-child.on{position:absolute;width:100%;text-align:left;padding:0 0 0 12px;color:#fff;border:1px solid #0ca448;background:#18bb59;border-radius:100px;}
|
|
| 594 |
+.security_login .tab_depth1 a:last-child.on{position:absolute;width:100%;text-align:right;padding:0 12px 0 0;color:#fff;border:1px solid #ca1a1a;background:#e62c2c;border-radius:100px;}
|
|
| 592 | 595 |
|
| 593 | 596 |
.security_login .title_area{position:relative;display:flex;margin:30px 0 15px 0;align-items:center;}
|
| 594 | 597 |
.security_login .qmMark{width:20px;height:20px;margin:-4px 0 0 8px;font-size:14px;font-weight:bold;font-family:'GmarketSansBold';background:#d7d7d9;border-radius:5px;color:#666;text-align:center;line-height:22px;cursor:pointer;}
|
--- src/main/webapp/publish/mypage_index_2024.html
+++ src/main/webapp/publish/mypage_index_2024.html
... | ... | @@ -24,25 +24,21 @@ |
| 24 | 24 |
$(function () {
|
| 25 | 25 |
|
| 26 | 26 |
// on/off 시 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 |
- } |
|
| 27 |
+ $(".security_tab").click(function () {
|
|
| 28 |
+ if ($(this).find("a.on").text().trim() == "ON") {
|
|
| 29 |
+ if (!confirm("보안로그인 설정 후 로그인 시, 등록한 휴대폰번호로 추가 인증이 진행됩니다")) {
|
|
| 30 |
+ $(this).find("a.on").siblings("a").removeClass("on");
|
|
| 31 |
+ |
|
| 38 | 32 |
} 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 |
- } |
|
| 33 |
+ $(this).find("a.on").removeClass("on").siblings("a").addClass("on");
|
|
| 34 |
+ $(this).removeClass("on").addClass("off");
|
|
| 35 |
+ } |
|
| 36 |
+ } else if($(this).find("a.on").text().trim() == "OFF") {
|
|
| 37 |
+ if (!confirm("가입자 휴대폰번호로 본인인증 후 해제가 가능하며, 보안로그인 설정을 해제함으로써 발생하는 손해에 대하여 회사는 책임지지 않습니다.")) {
|
|
| 38 |
+ $(this).find("a.on").siblings("a").removeClass("on");
|
|
| 39 |
+ } else {
|
|
| 40 |
+ $(this).find("a.on").removeClass("on").siblings("a").addClass("on");
|
|
| 41 |
+ $(this).removeClass("off").addClass("on");
|
|
| 46 | 42 |
} |
| 47 | 43 |
} |
| 48 | 44 |
}); |
... | ... | @@ -228,10 +224,13 @@ |
| 228 | 224 |
</div> |
| 229 | 225 |
<button type="button" class="btnType btnType3">마이페이지</button> |
| 230 | 226 |
<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> --> |
|
| 227 |
+ <div class="security_box red_box"> |
|
| 228 |
+ <a href="#" class="title">보안로그인</a><!-- 보안로그인 클릭시 보안로그인 홈페이지로 --> |
|
| 229 |
+ <span class="state off">OFF</span><!-- ON/OFF 클릭시 이벤트 발생 --> |
|
| 230 |
+ </div> |
|
| 231 |
+ <div class="security_box green_box"> |
|
| 232 |
+ <a href="#" class="title">보안로그인</a> |
|
| 233 |
+ <span class="state on">ON</span> |
|
| 235 | 234 |
</div> |
| 236 | 235 |
</div> |
| 237 | 236 |
<div class="login_pay"> |
... | ... | @@ -304,7 +303,7 @@ |
| 304 | 303 |
<div class="set_area"> |
| 305 | 304 |
<p class="lately_date">최근 변경일시 : <span>2024-11-01 12:49</span></p> |
| 306 | 305 |
|
| 307 |
- <div class="tab_depth1 security_tab"> |
|
| 306 |
+ <div class="tab_depth1 security_tab on"> |
|
| 308 | 307 |
<a href="#none" class="on">ON</a> |
| 309 | 308 |
<a href="#none">OFF</a> |
| 310 | 309 |
</div> |
... | ... | @@ -324,9 +323,9 @@ |
| 324 | 323 |
<div class="set_area"> |
| 325 | 324 |
<p class="lately_date">최근 변경일시 : <span>2024-11-01 12:49</span></p> |
| 326 | 325 |
|
| 327 |
- <div class="tab_depth1 security_tab"> |
|
| 328 |
- <a href="#none" class="on">ON</a> |
|
| 329 |
- <a href="#none">OFF</a> |
|
| 326 |
+ <div class="tab_depth1 security_tab off"> |
|
| 327 |
+ <a href="#none">ON</a> |
|
| 328 |
+ <a href="#none" class="on">OFF</a> |
|
| 330 | 329 |
</div> |
| 331 | 330 |
</div> |
| 332 | 331 |
</div> |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?