DBNT
/
geoinfo_eGov_work
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 포털시스템 사용자 편의 기능 개선 - 로그인 기능 개선

main
thkim 2024-06-11 10:39:18 +09:00
parent 03f81788ab
commit fdec913637
4 changed files with 143 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/main/webapp/WEB-INF/views/home/include/header.jsp
View File

@ -258,6 +258,41 @@
<button type="button" <button type="button"
class="btn btn-small btn-dark-gray marL10 mfp-popup-close">취소</button> class="btn btn-small btn-dark-gray marL10 mfp-popup-close">취소</button>
</div> </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>
</div> </div>

51
src/main/webapp/com/css/common.v2.0.css
View File

@ -3110,7 +3110,7 @@ ul.faq-q > li textarea {
margin: 0px auto; margin: 0px auto;
padding: 40px; padding: 40px;
background-color: #fff; background-color: #fff;
border: 2px solid #000000; border: 1px solid #000000;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
} }
.login-popup-wrapper .mfp-content .login-popup .contents-title { .login-popup-wrapper .mfp-content .login-popup .contents-title {
@ -3193,6 +3193,9 @@ ul.faq-q > li textarea {
border-top: 1px solid #000000; border-top: 1px solid #000000;
border-bottom: 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 { .login-popup-wrapper .mfp-content .login-popup .signin-wrapper > p {
text-align: center; text-align: center;
width: 100%; width: 100%;
@ -3204,32 +3207,68 @@ ul.faq-q > li textarea {
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row { .login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row {
display: inline-block; 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; display: inline-block;
width: 330px; width: 330px;
height: 106px; height: 106px;
padding: 0px; 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; height: 48px;
margin: 0px; margin: 0px;
}
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.id-password-wrapper > input#id {
margin-bottom: 10px; 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; display: inline-block;
width: 139px; width: 139px;
height: 106px; height: 106px;
padding: 0px; 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; display: inline-block;
width: 100%; width: 100%;
height: 106px; 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; 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;
}
/* ====================================== */ /* ====================================== */
/* ====================================== */ /* ====================================== */

2
src/main/webapp/com/css/common.v2.0.css.map
View File

File diff suppressed because one or more lines are too long

83
src/main/webapp/com/css/sass/common.v2.0.scss
View File

@ -2700,7 +2700,7 @@ ul.faq-q > li textarea {
margin: 0px auto; margin: 0px auto;
padding: 40px; padding: 40px;
background-color: #fff; background-color: #fff;
border: 2px solid #000000; border: 1px solid #000000;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
@ -2799,6 +2799,7 @@ ul.faq-q > li textarea {
} }
} }
.signin-wrapper { .signin-wrapper {
text-align: center;
&>p { &>p {
text-align: center; text-align: center;
width: 100%; width: 100%;
@ -2810,28 +2811,68 @@ ul.faq-q > li textarea {
} }
&>.login-form-row { &>.login-form-row {
display: inline-block; display: inline-block;
&>.id-password-wrapper { font-size: 0px;
display: inline-block; &>.contents-row {
width: 330px; vertical-align: top;
height: 106px; &.id-password-wrapper {
padding: 0px; display: inline-block;
&>input { width: 330px;
height: 48px; height: 106px;
margin: 0px; padding: 0px;
margin-bottom: 10px; margin-right: 10px;
&>input {
height: 48px;
margin: 0px;
&#id {
margin-bottom: 10px;
}
}
}
&.signin-button-wrapper {
display: inline-block;
width: 139px;
height: 106px;
padding: 0px;
&>button {
display: inline-block;
width: 100%;
height: 106px;
font-size: 16px;
&.mfp-popup-close {
display: none;
}
}
} }
} }
&>.signin-button-wrapper {
display: inline-block; &>.login-form-options {
width: 139px; display: flex; /* 혹은 grid */
height: 106px; justify-content: space-between; /* 혹은 원하는 정렬 방식 */
padding: 0px; align-items: center;
&>button { margin-top: 30px; /* 간격 조절 */
display: inline-block; font-size: 13px;
width: 100%; color: #333333;
height: 106px;
&.mfp-popup-close { &>.checkbox-container {
display: none; 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;
} }
} }
} }