feat: 포털시스템 사용자 편의 기능 개선 - 로그인 기능 개선
parent
03f81788ab
commit
fdec913637
|
|
@ -258,6 +258,41 @@
|
|||
<button type="button"
|
||||
class="btn btn-small btn-dark-gray marL10 mfp-popup-close">취소</button>
|
||||
</div>
|
||||
<div class="login-form-options">
|
||||
<div class="checkbox-container">
|
||||
<input type="checkbox" id="rememberId" name="rememberId">
|
||||
<label for="rememberId">아이디 저장</label>
|
||||
</div>
|
||||
<div class="find-account-links">
|
||||
<a href="/topMenuSelect.do?url=joinsearch">아이디 찾기</a> <span class="vertical-bar">|</span>
|
||||
<a href="/topMenuSelect.do?url=pwsearch">비밀번호 찾기</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// 아이디 저장 체크박스 요소 가져오기
|
||||
const rememberIdCheckbox = document.getElementById("rememberId");
|
||||
|
||||
// 아이디 입력 필드 요소 가져오기
|
||||
const idInput = document.getElementById("id");
|
||||
|
||||
// 페이지 로드 시 저장된 아이디 불러오기
|
||||
window.addEventListener('load', () => {
|
||||
const savedId = localStorage.getItem("savedId");
|
||||
if (savedId) {
|
||||
idInput.value = savedId;
|
||||
rememberIdCheckbox.checked = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 체크박스 변경 이벤트 처리
|
||||
rememberIdCheckbox.addEventListener('change', () => {
|
||||
if (rememberIdCheckbox.checked) {
|
||||
localStorage.setItem("savedId", idInput.value);
|
||||
} else {
|
||||
localStorage.removeItem("savedId");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3110,7 +3110,7 @@ ul.faq-q > li textarea {
|
|||
margin: 0px auto;
|
||||
padding: 40px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #000000;
|
||||
border: 1px solid #000000;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .contents-title {
|
||||
|
|
@ -3193,6 +3193,9 @@ ul.faq-q > li textarea {
|
|||
border-top: 1px solid #000000;
|
||||
border-bottom: 1px solid #000000;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > p {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
|
@ -3204,32 +3207,68 @@ ul.faq-q > li textarea {
|
|||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row {
|
||||
display: inline-block;
|
||||
font-size: 0px;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .id-password-wrapper {
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row {
|
||||
vertical-align: top;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.id-password-wrapper {
|
||||
display: inline-block;
|
||||
width: 330px;
|
||||
height: 106px;
|
||||
padding: 0px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .id-password-wrapper > input {
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.id-password-wrapper > input {
|
||||
height: 48px;
|
||||
margin: 0px;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.id-password-wrapper > input#id {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .signin-button-wrapper {
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.signin-button-wrapper {
|
||||
display: inline-block;
|
||||
width: 139px;
|
||||
height: 106px;
|
||||
padding: 0px;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .signin-button-wrapper > button {
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.signin-button-wrapper > button {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 106px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .signin-button-wrapper > button.mfp-popup-close {
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.signin-button-wrapper > button.mfp-popup-close {
|
||||
display: none;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options {
|
||||
display: flex; /* 혹은 grid */
|
||||
justify-content: space-between; /* 혹은 원하는 정렬 방식 */
|
||||
align-items: center;
|
||||
margin-top: 30px; /* 간격 조절 */
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .checkbox-container > input {
|
||||
margin: 0px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .checkbox-container > label {
|
||||
cursor: pointer;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .find-account-links > a {
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .find-account-links > .vertical-bar {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* ====================================== */
|
||||
/* ====================================== */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2700,7 +2700,7 @@ ul.faq-q > li textarea {
|
|||
margin: 0px auto;
|
||||
padding: 40px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #000000;
|
||||
border: 1px solid #000000;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
|
||||
|
||||
|
|
@ -2799,6 +2799,7 @@ ul.faq-q > li textarea {
|
|||
}
|
||||
}
|
||||
.signin-wrapper {
|
||||
text-align: center;
|
||||
&>p {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
|
@ -2810,18 +2811,24 @@ ul.faq-q > li textarea {
|
|||
}
|
||||
&>.login-form-row {
|
||||
display: inline-block;
|
||||
&>.id-password-wrapper {
|
||||
font-size: 0px;
|
||||
&>.contents-row {
|
||||
vertical-align: top;
|
||||
&.id-password-wrapper {
|
||||
display: inline-block;
|
||||
width: 330px;
|
||||
height: 106px;
|
||||
padding: 0px;
|
||||
margin-right: 10px;
|
||||
&>input {
|
||||
height: 48px;
|
||||
margin: 0px;
|
||||
&#id {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
&>.signin-button-wrapper {
|
||||
}
|
||||
&.signin-button-wrapper {
|
||||
display: inline-block;
|
||||
width: 139px;
|
||||
height: 106px;
|
||||
|
|
@ -2830,12 +2837,46 @@ ul.faq-q > li textarea {
|
|||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 106px;
|
||||
font-size: 16px;
|
||||
&.mfp-popup-close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.login-form-options {
|
||||
display: flex; /* 혹은 grid */
|
||||
justify-content: space-between; /* 혹은 원하는 정렬 방식 */
|
||||
align-items: center;
|
||||
margin-top: 30px; /* 간격 조절 */
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
|
||||
&>.checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
&>input {
|
||||
margin: 0px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&>label {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&>.find-account-links {
|
||||
&>a {
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
&>.vertical-bar {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue