djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

아이디 찾기 페이지 UI 대응

Browse Source
This commit is contained in:
Rinjae
2026-01-18 21:32:00 +09:00
parent 7d22bd3e0c
commit 27ca5ead81
10 changed files with 308 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+50 -50
View File
@@ -9836,7 +9836,7 @@ select.form-control {
.account-recovery-container { .account-recovery-container {
width: 100%; width: 100%;
max-width: 1228px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
padding: 24px; padding: 24px;
@@ -9878,9 +9878,9 @@ select.form-control {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 18px 24px; padding: 14px 24px;
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 22px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #8c959f; color: #8c959f;
text-decoration: none; text-decoration: none;
@@ -9906,8 +9906,8 @@ select.form-control {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.account-recovery-tabs .tab-link { .account-recovery-tabs .tab-link {
padding: 14px 16px; padding: 12px 16px;
font-size: 16px; font-size: 14px;
} }
} }
@@ -9977,7 +9977,7 @@ select.form-control {
flex-shrink: 0; flex-shrink: 0;
width: 170px; width: 170px;
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 20px; font-size: 15px;
font-weight: 400; font-weight: 400;
color: #212529; color: #212529;
margin-bottom: 0; margin-bottom: 0;
@@ -9989,20 +9989,20 @@ select.form-control {
@media (max-width: 768px) { @media (max-width: 768px) {
.account-recovery-form .form-label { .account-recovery-form .form-label {
width: 100%; width: 100%;
font-size: 16px; font-size: 14px;
} }
} }
.account-recovery-form .form-input { .account-recovery-form .form-input {
flex: 1; flex: 1;
height: 60px; height: 40px;
padding: 0 20px; padding: 0 16px;
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 20px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #212529; color: #212529;
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #dadada; border: 1px solid #dadada;
border-radius: 12px; border-radius: 8px;
outline: none; outline: none;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@@ -10026,15 +10026,15 @@ select.form-control {
border-color: #ed5b5b; border-color: #ed5b5b;
} }
.account-recovery-form .form-select { .account-recovery-form .form-select {
height: 60px; height: 40px;
padding: 0 40px 0 20px; padding: 0 32px 0 16px;
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 20px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #515151; color: #515151;
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #dadada; border: 1px solid #dadada;
border-radius: 12px; border-radius: 8px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -10043,7 +10043,7 @@ select.form-control {
-moz-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath fill='%231D1B20' d='M5 5L0 0h10z'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath fill='%231D1B20' d='M5 5L0 0h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 16px center; background-position: right 12px center;
background-size: 10px 5px; background-size: 10px 5px;
} }
.account-recovery-form .form-select:hover { .account-recovery-form .form-select:hover {
@@ -10061,30 +10061,30 @@ select.form-control {
opacity: 0.7; opacity: 0.7;
} }
.account-recovery-form .form-select option { .account-recovery-form .form-select option {
padding: 12px; padding: 8px;
font-size: 16px; font-size: 14px;
} }
.phone-input-group { .phone-input-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 14px; gap: 8px;
flex: 1; flex: 1;
} }
.phone-input-group .phone-prefix { .phone-input-group .phone-prefix {
width: 180px; width: 100px;
flex-shrink: 0; flex-shrink: 0;
} }
.phone-input-group .phone-middle, .phone-input-group .phone-middle,
.phone-input-group .phone-last { .phone-input-group .phone-last {
width: 180px; width: 100px;
flex-shrink: 0; flex-shrink: 0;
} }
.phone-input-group .phone-separator { .phone-input-group .phone-separator {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 14px; width: 8px;
height: 1px; height: 1px;
background: #515151; background: #515151;
flex-shrink: 0; flex-shrink: 0;
@@ -10092,16 +10092,16 @@ select.form-control {
@media (max-width: 768px) { @media (max-width: 768px) {
.phone-input-group { .phone-input-group {
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 6px;
} }
.phone-input-group .phone-prefix, .phone-input-group .phone-prefix,
.phone-input-group .phone-middle, .phone-input-group .phone-middle,
.phone-input-group .phone-last { .phone-input-group .phone-last {
width: calc(33% - 20px); flex: 1;
min-width: 80px; min-width: 60px;
} }
.phone-input-group .phone-separator { .phone-input-group .phone-separator {
width: 10px; width: 6px;
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
@@ -10127,38 +10127,38 @@ select.form-control {
} }
.auth-input-group .auth-input { .auth-input-group .auth-input {
flex: 1; flex: 1;
padding-right: 80px; padding-right: 60px;
} }
.auth-input-group .auth-timer { .auth-input-group .auth-timer {
position: absolute; position: absolute;
right: 20px; right: 16px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 20px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #ed5b5b; color: #ed5b5b;
pointer-events: none; pointer-events: none;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.auth-input-group .auth-timer { .auth-input-group .auth-timer {
font-size: 16px; font-size: 12px;
right: 16px; right: 12px;
} }
} }
.auth-request-button, .auth-request-button,
.auth-verify-button { .auth-verify-button {
width: 172px; width: 140px;
height: 60px; height: 40px;
padding: 10px; padding: 8px;
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 18px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: #FFFFFF; color: #FFFFFF;
background: #a4d6ea; background: #a4d6ea;
border: none; border: none;
border-radius: 12px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
margin: 0; margin: 0;
@@ -10182,9 +10182,9 @@ select.form-control {
.auth-request-button, .auth-request-button,
.auth-verify-button { .auth-verify-button {
width: 100%; width: 100%;
height: 50px; height: 40px;
font-size: 16px; font-size: 13px;
margin-top: 10px; margin-top: 8px;
} }
} }
@@ -10192,21 +10192,21 @@ select.form-control {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
margin-top: 40px; margin-top: 32px;
padding: 40px 0; padding: 32px 0;
border-top: none; border-top: none;
background: transparent; background: transparent;
} }
.account-recovery-card .form-actions .cancel-button, .account-recovery-card .form-actions .cancel-button,
.account-recovery-card .form-actions .submit-button { .account-recovery-card .form-actions .submit-button {
width: 200px; width: 160px;
height: 60px; height: 40px;
padding: 10px; padding: 8px;
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 18px; font-size: 14px;
font-weight: 700; font-weight: 700;
border: none; border: none;
border-radius: 12px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
line-height: 1; line-height: 1;
@@ -10242,14 +10242,14 @@ select.form-control {
@media (max-width: 576px) { @media (max-width: 576px) {
.account-recovery-card .form-actions { .account-recovery-card .form-actions {
flex-direction: column; flex-direction: column;
gap: 12px; gap: 10px;
padding: 24px 0; padding: 20px 0;
} }
.account-recovery-card .form-actions .cancel-button, .account-recovery-card .form-actions .cancel-button,
.account-recovery-card .form-actions .submit-button { .account-recovery-card .form-actions .submit-button {
width: 100%; width: 100%;
height: 50px; height: 40px;
font-size: 16px; font-size: 13px;
} }
} }
src/main/resources/static/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/sass/pages/_account-recovery.scss
+51 -52
View File
@@ -20,11 +20,10 @@
.account-recovery-container { .account-recovery-container {
width: 100%; width: 100%;
max-width: 1228px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
padding: $spacing-lg padding: $spacing-lg;
;
} }
.account-recovery-card { .account-recovery-card {
@@ -65,9 +64,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 18px 24px; padding: 14px 24px;
font-family: $font-family-primary; font-family: $font-family-primary;
font-size: 22px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #8c959f; color: #8c959f;
text-decoration: none; text-decoration: none;
@@ -98,8 +97,8 @@
} }
@media (max-width: 576px) { @media (max-width: 576px) {
padding: 14px 16px; padding: 12px 16px;
font-size: 16px; font-size: 14px;
} }
} }
} }
@@ -176,7 +175,7 @@
flex-shrink: 0; flex-shrink: 0;
width: 170px; width: 170px;
font-family: $font-family-primary; font-family: $font-family-primary;
font-size: 20px; font-size: 15px;
font-weight: 400; font-weight: 400;
color: #212529; color: #212529;
margin-bottom: 0; margin-bottom: 0;
@@ -188,21 +187,21 @@
@media (max-width: 768px) { @media (max-width: 768px) {
width: 100%; width: 100%;
font-size: 16px; font-size: 14px;
} }
} }
.form-input { .form-input {
flex: 1; flex: 1;
height: 60px; height: 40px;
padding: 0 20px; padding: 0 16px;
font-family: $font-family-primary; font-family: $font-family-primary;
font-size: 20px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #212529; color: #212529;
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #dadada; border: 1px solid #dadada;
border-radius: 12px; border-radius: 8px;
outline: none; outline: none;
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -232,15 +231,15 @@
} }
.form-select { .form-select {
height: 60px; height: 40px;
padding: 0 40px 0 20px; padding: 0 32px 0 16px;
font-family: $font-family-primary; font-family: $font-family-primary;
font-size: 20px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #515151; color: #515151;
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #dadada; border: 1px solid #dadada;
border-radius: 12px; border-radius: 8px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -249,7 +248,7 @@
-moz-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath fill='%231D1B20' d='M5 5L0 0h10z'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath fill='%231D1B20' d='M5 5L0 0h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 16px center; background-position: right 12px center;
background-size: 10px 5px; background-size: 10px 5px;
&:hover { &:hover {
@@ -270,8 +269,8 @@
} }
option { option {
padding: 12px; padding: 8px;
font-size: 16px; font-size: 14px;
} }
} }
} }
@@ -280,17 +279,17 @@
.phone-input-group { .phone-input-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 14px; gap: 8px;
flex: 1; flex: 1;
.phone-prefix { .phone-prefix {
width: 180px; width: 100px;
flex-shrink: 0; flex-shrink: 0;
} }
.phone-middle, .phone-middle,
.phone-last { .phone-last {
width: 180px; width: 100px;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -298,7 +297,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 14px; width: 8px;
height: 1px; height: 1px;
background: #515151; background: #515151;
flex-shrink: 0; flex-shrink: 0;
@@ -306,17 +305,17 @@
@media (max-width: 768px) { @media (max-width: 768px) {
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 6px;
.phone-prefix, .phone-prefix,
.phone-middle, .phone-middle,
.phone-last { .phone-last {
width: calc(33% - 20px); flex: 1;
min-width: 80px; min-width: 60px;
} }
.phone-separator { .phone-separator {
width: 10px; width: 6px;
} }
} }
@@ -346,23 +345,23 @@
.auth-input { .auth-input {
flex: 1; flex: 1;
padding-right: 80px; padding-right: 60px;
} }
.auth-timer { .auth-timer {
position: absolute; position: absolute;
right: 20px; right: 16px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
font-family: $font-family-primary; font-family: $font-family-primary;
font-size: 20px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #ed5b5b; color: #ed5b5b;
pointer-events: none; pointer-events: none;
@media (max-width: 576px) { @media (max-width: 576px) {
font-size: 16px; font-size: 12px;
right: 16px; right: 12px;
} }
} }
} }
@@ -370,16 +369,16 @@
// Buttons (Figma: 인증번호 받기/확인) // Buttons (Figma: 인증번호 받기/확인)
.auth-request-button, .auth-request-button,
.auth-verify-button { .auth-verify-button {
width: 172px; width: 140px;
height: 60px; height: 40px;
padding: 10px; padding: 8px;
font-family: $font-family-primary; font-family: $font-family-primary;
font-size: 18px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: #FFFFFF; color: #FFFFFF;
background: #a4d6ea; background: #a4d6ea;
border: none; border: none;
border-radius: 12px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
margin: 0; margin: 0;
@@ -401,9 +400,9 @@
@media (max-width: 576px) { @media (max-width: 576px) {
width: 100%; width: 100%;
height: 50px; height: 40px;
font-size: 16px; font-size: 13px;
margin-top: 10px; margin-top: 8px;
} }
} }
@@ -412,21 +411,21 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
margin-top: 40px; margin-top: 32px;
padding: 40px 0; padding: 32px 0;
border-top: none; border-top: none;
background: transparent; background: transparent;
.cancel-button, .cancel-button,
.submit-button { .submit-button {
width: 200px; width: 160px;
height: 60px; height: 40px;
padding: 10px; padding: 8px;
font-family: $font-family-primary; font-family: $font-family-primary;
font-size: 18px; font-size: 14px;
font-weight: 700; font-weight: 700;
border: none; border: none;
border-radius: 12px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
line-height: 1; line-height: 1;
@@ -470,14 +469,14 @@
@media (max-width: 576px) { @media (max-width: 576px) {
flex-direction: column; flex-direction: column;
gap: 12px; gap: 10px;
padding: 24px 0; padding: 20px 0;
.cancel-button, .cancel-button,
.submit-button { .submit-button {
width: 100%; width: 100%;
height: 50px; height: 40px;
font-size: 16px; font-size: 13px;
} }
} }
} }
src/main/resources/templates/views/apps/login/account_recovery.html
+140 -203
View File
@@ -4,210 +4,133 @@
<body> <body>
<section layout:fragment="contentFragment" class="content"> <section layout:fragment="contentFragment" class="content">
<div class="content_wrap"> <div class="content_wrap">
<!-- 타이틀 --> <div class="account-recovery-container">
<div class="sub_title2" id="title-find-id"> <div class="account-recovery-card">
<h2 class="title add5">아이디 찾기</h2> <!-- 탭 메뉴 -->
</div> <div class="account-recovery-tabs">
<a href="#tab1" class="tab-link active" data-tab="tab1">아이디 찾기</a>
<a href="#tab2" class="tab-link" data-tab="tab2">비밀번호 초기화</a>
</div>
<div class="sub_title2" id="title-reset-password" style="display: none;"> <!-- 아이디 찾기 폼 -->
<h2 class="title add8">비밀번호 초기화</h2> <div id="tab1" class="account-recovery-form">
</div> <form id="findIdForm" role="form" name="findIdForm" th:action="@{/find_id}" method="post" data-form-type="findId">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<input type="hidden" id="findId-phoneNumber" name="phoneNumber">
<div class="inner i_cs10 h_inner2"> <!-- 성명 입력 -->
<!-- 탭 메뉴 --> <div class="form-group">
<div class="tab-wrap"> <label class="form-label">성명</label>
<div class="tabs"> <input type="text" name="name" class="form-input" placeholder="이름" required>
<ul class="tab_nav tabm">
<li class="active"><a href="#tab1">아이디 찾기</a></li>
<li><a href="#tab2">비밀번호 초기화</a></li>
</ul>
<!-- 아이디 찾기 폼 -->
<div class="tab active" id="tab1">
<div class="form_type">
<form id="findIdForm" role="form" name="findIdForm" th:action="@{/find_id}" method="post" data-form-type="findId">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<input type="hidden" id="findId-phoneNumber" name="phoneNumber">
<!-- 성명 입력 -->
<div class="info1 p_top2">
<p class="title w_tit">
<span class="dot">성명</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4">
<input type="text" name="name" class="common_input_type_1" placeholder="이름" required>
</div>
</div>
</div>
<!-- 휴대폰 번호 입력 -->
<div class="info1 pt28">
<p class="title w_tit">
<span class="dot">휴대폰 번호</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp5">
<span class="input">
<div class="custom_select ct_sc w_inp10 h_inp2 select_mobile_prefix">
<div class="select_selected active">선택</div>
<ul class="common_selecttype select_hide select_items ct_sc2">
<li>010</li>
<li>011</li>
<li>016</li>
<li>017</li>
<li>018</li>
</ul>
</div>
</span>
<span class="dash">-</span>
<span class="input">
<input type="number" name="phoneMiddle" class="common_input_type_1 w_inp11" placeholder="앞자리" required>
</span>
<span class="dash">-</span>
<span class="input">
<input type="number" name="phoneLast" class="common_input_type_1 w_inp11" placeholder="뒷자리" required>
</span>
</div>
<div class="btn_check">
<a class="common_btn_type_2 cbt btn_auth"><span>인증번호 받기</span></a>
</div>
</div>
</div>
<!-- 인증번호 입력 -->
<div class="info1 pt28 auth-number-container" id="findId-authNumberContainer" style="display: none;">
<p class="title w_tit">
<span class="dot">인증번호 입력</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp5">
<div class="certify_box">
<input type="number" class="common_input_type_1 w_input auth-number-input" placeholder="SMS 인증번호" required>
<span class="certify_time" id="findId-certify_time">03:00</span>
</div>
</div>
<div class="btn_check">
<a class="common_btn_type_2 cbt btn_verify_auth"><span>인증번호 확인</span></a>
</div>
</div>
</div>
<!-- 제출 버튼 -->
<div class="btn_application m_top">
<a type="button" class="common_btn_type_1 gray btn_cancel"><span>취소</span></a>
<div class="btn_gap"></div>
<button type="submit" class="common_btn_type_1"><span>아이디 찾기</span></button>
</div>
</form>
</div> </div>
</div>
<!-- 비밀번호 초기화 폼 --> <!-- 휴대폰 번호 입력 -->
<div class="tab" id="tab2"> <div class="form-group">
<div class="form_type"> <label class="form-label">휴대폰 번호</label>
<form id="resetPasswordForm" role="form" name="resetPasswordForm" th:action="@{/reset_password}" method="post" data-form-type="resetPassword"> <div class="phone-input-group">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/> <select class="form-select phone-prefix select_mobile_prefix">
<input type="hidden" id="resetPassword-phoneNumber" name="phoneNumber"> <option>선택</option>
<option>010</option>
<!-- 인증 방식 선택 --> <option>011</option>
<div class="info1 p_top2"> <option>016</option>
<p class="title w_tit"><span class="dot">비밀번호 초기화 방법 선택</span></p> <option>017</option>
<div class="info_line"> <option>018</option>
<div class="info_box1 w_inp4"> </select>
<input type="radio" id="radio_hp" name="resetMethod" value="hp" checked> <span class="phone-separator">-</span>
<label for="radio_hp">휴대폰 번호</label> <input type="number" name="phoneMiddle" class="form-input" placeholder="앞자리" required>
<input type="radio" id="radio_email" name="resetMethod" value="email_id"> <span class="phone-separator">-</span>
<label for="radio_email">이메일 아이디</label> <input type="number" name="phoneLast" class="form-input" placeholder="뒷자리" required>
</div> <button type="button" class="auth-request-button btn_auth">인증번호 받기</button>
</div> </div>
</div>
<!-- 성명 입력 -->
<div class="info1 p_top2">
<p class="title w_tit">
<span class="dot">성명</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4">
<input type="text" name="name" class="common_input_type_1" placeholder="성명" required>
</div>
</div>
</div>
<!-- 아이디 입력 (이메일) -->
<div class="info1 p_top2" id="emailInputContainer" style="display: none;">
<p class="title w_tit">
<span class="dot">이메일 아이디</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp4">
<input type="text" name="emailId" class="common_input_type_1" placeholder="이메일 아이디">
</div>
</div>
</div>
<!-- 휴대폰 번호 입력 -->
<div class="info1 pt28" id="phoneInputContainer">
<p class="title w_tit">
<span class="dot">휴대폰 번호</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp5">
<span class="input">
<div class="custom_select ct_sc w_inp10 h_inp2 select_mobile_prefix">
<div class="select_selected active">선택</div>
<ul class="common_selecttype select_hide select_items ct_sc2">
<li>010</li>
<li>011</li>
<li>016</li>
<li>017</li>
<li>018</li>
</ul>
</div>
</span>
<span class="dash">-</span>
<span class="input">
<input type="number" name="phoneMiddle" class="common_input_type_1 w_inp11" placeholder="앞자리" required>
</span>
<span class="dash">-</span>
<span class="input">
<input type="number" name="phoneLast" class="common_input_type_1 w_inp11" placeholder="뒷자리" required>
</span>
</div>
<div class="btn_check">
<a class="common_btn_type_2 cbt btn_auth"><span>인증번호 받기</span></a>
</div>
</div>
</div>
<!-- 인증번호 입력 -->
<div class="info1 pt28 auth-number-container" id="authNumberContainer" style="display: none;">
<p class="title w_tit">
<span class="dot">인증번호 입력</span>
</p>
<div class="info_line">
<div class="info_box1 w_inp5">
<div class="certify_box">
<input type="number" class="common_input_type_1 w_input auth-number-input" placeholder="SMS 인증번호" required>
<span class="certify_time" id="certify_time">03:00</span>
</div>
</div>
<div class="btn_check">
<a class="common_btn_type_2 cbt btn_verify_auth"><span>인증번호 확인</span></a>
</div>
</div>
</div>
<!-- 제출 버튼 -->
<div class="btn_application m_top">
<a type="button" class="common_btn_type_1 gray btn_cancel"><span>취소</span></a>
<div class="btn_gap"></div>
<button type="submit" class="common_btn_type_1"><span>비밀번호 초기화</span></button>
</div>
</form>
</div> </div>
</div>
<!-- 인증번호 입력 -->
<div class="form-group auth-number-container" id="findId-authNumberContainer" style="display: none;">
<label class="form-label">인증번호 입력</label>
<div class="auth-input-group">
<input type="number" class="form-input auth-input auth-number-input" placeholder="SMS 인증번호" required>
<span class="auth-timer" id="findId-certify_time">03:00</span>
<button type="button" class="auth-verify-button btn_verify_auth">확인</button>
</div>
</div>
<!-- 제출 버튼 -->
<div class="form-actions">
<a class="cancel-button btn_cancel">취소</a>
<button type="submit" class="submit-button">아이디 찾기</button>
</div>
</form>
</div>
<!-- 비밀번호 초기화 폼 -->
<div id="tab2" class="account-recovery-form">
<form id="resetPasswordForm" role="form" name="resetPasswordForm" th:action="@{/reset_password}" method="post" data-form-type="resetPassword">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<input type="hidden" id="resetPassword-phoneNumber" name="phoneNumber">
<!-- 인증 방식 선택 -->
<div class="form-group">
<label class="form-label">초기화 방법</label>
<div style="display: flex; gap: 20px; align-items: center;">
<label style="display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 0;">
<input type="radio" id="radio_hp" name="resetMethod" value="hp" checked>
휴대폰 번호
</label>
<label style="display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 0;">
<input type="radio" id="radio_email" name="resetMethod" value="email_id">
이메일 아이디
</label>
</div>
</div>
<!-- 성명 입력 -->
<div class="form-group">
<label class="form-label">성명</label>
<input type="text" name="name" class="form-input" placeholder="성명" required>
</div>
<!-- 아이디 입력 (이메일) -->
<div class="form-group" id="emailInputContainer" style="display: none;">
<label class="form-label">이메일 아이디</label>
<input type="text" name="emailId" class="form-input" placeholder="이메일 아이디">
</div>
<!-- 휴대폰 번호 입력 -->
<div class="form-group" id="phoneInputContainer">
<label class="form-label">휴대폰 번호</label>
<div class="phone-input-group">
<select class="form-select phone-prefix select_mobile_prefix">
<option>선택</option>
<option>010</option>
<option>011</option>
<option>016</option>
<option>017</option>
<option>018</option>
</select>
<span class="phone-separator">-</span>
<input type="number" name="phoneMiddle" class="form-input" placeholder="앞자리" required>
<span class="phone-separator">-</span>
<input type="number" name="phoneLast" class="form-input" placeholder="뒷자리" required>
<button type="button" class="auth-request-button btn_auth">인증번호 받기</button>
</div>
</div>
<!-- 인증번호 입력 -->
<div class="form-group auth-number-container" id="authNumberContainer" style="display: none;">
<label class="form-label">인증번호 입력</label>
<div class="auth-input-group">
<input type="number" class="form-input auth-input auth-number-input" placeholder="SMS 인증번호" required>
<span class="auth-timer" id="certify_time">03:00</span>
<button type="button" class="auth-verify-button btn_verify_auth">확인</button>
</div>
</div>
<!-- 제출 버튼 -->
<div class="form-actions">
<a class="cancel-button btn_cancel">취소</a>
<button type="submit" class="submit-button">비밀번호 초기화</button>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
@@ -218,6 +141,22 @@
<script th:inline="javascript"> <script th:inline="javascript">
$(document).ready(function() { $(document).ready(function() {
// 탭 전환 기능
$('.tab-link').on('click', function(e) {
e.preventDefault();
const tabId = $(this).data('tab');
// 모든 탭 내용 숨기기
$('.account-recovery-form').hide();
// 클릭된 탭 활성화
$(this).siblings().removeClass('active');
$(this).addClass('active');
// 해당 탭 내용 표시
$('#' + tabId).show();
});
// 초기화 방법 선택에 따라 폼 표시 변경 // 초기화 방법 선택에 따라 폼 표시 변경
$('input[name="resetMethod"]').change(function() { $('input[name="resetMethod"]').change(function() {
if (this.value === 'hp') { if (this.value === 'hp') {
@@ -234,10 +173,9 @@
location.href = '/login'; location.href = '/login';
}); });
// 인증번호 요청 및 확인 로직 통합 // 휴대폰 번호 조합 함수
// 휴대폰 번호 인증
function combineMobileNumber(form) { function combineMobileNumber(form) {
let prefix = form.find('.select_mobile_prefix .select_selected').text().trim(); let prefix = form.find('.phone-prefix').val().trim();
let middle = form.find('input[name="phoneMiddle"]').val().trim(); let middle = form.find('input[name="phoneMiddle"]').val().trim();
let last = form.find('input[name="phoneLast"]').val().trim(); let last = form.find('input[name="phoneLast"]').val().trim();
@@ -260,7 +198,6 @@
customPopups.showAlert("휴대폰 번호를 올바르게 입력해주세요."); customPopups.showAlert("휴대폰 번호를 올바르게 입력해주세요.");
return; return;
} }
}); });
// 인증번호 확인 버튼 이벤트 리스너 // 인증번호 확인 버튼 이벤트 리스너
src/main/resources/templates/views/apps/login/findId.html
+33 -36
View File
@@ -34,46 +34,43 @@
<!-- Phone Number Fields --> <!-- Phone Number Fields -->
<div class="form-group"> <div class="form-group">
<label class="form-label">휴대폰 번호<span class="required-badge">필수</span></label> <label class="form-label">휴대폰 번호<span class="required-badge">필수</span></label>
<div class="phone-input-group"> <div class="org-input-row">
<select id="phonePrefix" class="form-select phone-prefix" required> <div class="org-compound-input">
<option value="">선택</option> <select id="phonePrefix" class="org-form-select phone-prefix" required>
<option value="010">010</option> <option value="">선택</option>
<option value="011">011</option> <option value="010">010</option>
<option value="016">016</option> <option value="011">011</option>
<option value="017">017</option> <option value="016">016</option>
<option value="018">018</option> <option value="017">017</option>
</select> <option value="018">018</option>
<span class="phone-separator"></span> </select>
<input type="tel" <span class="separator">-</span>
id="phoneMiddle" <input type="tel"
name="phoneMiddle" id="phoneMiddle"
maxlength="4" name="phoneMiddle"
class="form-input phone-middle" maxlength="4"
placeholder="1234" class="form-input phone-number"
pattern="[0-9]*" placeholder="1234"
inputmode="numeric" pattern="[0-9]*"
required> inputmode="numeric"
<span class="phone-separator"></span> required>
<input type="tel" <span class="separator">-</span>
id="phoneLast" <input type="tel"
name="phoneLast" id="phoneLast"
maxlength="4" name="phoneLast"
class="form-input phone-last" maxlength="4"
placeholder="1234" class="form-input phone-number"
pattern="[0-9]*" placeholder="1234"
inputmode="numeric" pattern="[0-9]*"
required> inputmode="numeric"
<button type="button" class="auth-request-button" id="requestAuthButton"> required>
</div>
<button type="button" class="btn org-btn-check btn_auth" id="requestAuthButton">
인증번호 받기 인증번호 받기
</button> </button>
</div> </div>
</div> </div>
<!-- 테스트 환경 안내 메시지 -->
<div class="form-group">
<th:block th:replace="~{fragment/test-env-auth-notice :: smsNotice}"></th:block>
</div>
<!-- Auth Number Input --> <!-- Auth Number Input -->
<div class="form-group auth-number-group" id="authNumberGroup" style="display: none;"> <div class="form-group auth-number-group" id="authNumberGroup" style="display: none;">
<label for="authNumber" class="form-label">인증번호 입력<span class="required-badge">필수</span></label> <label for="authNumber" class="form-label">인증번호 입력<span class="required-badge">필수</span></label>
@@ -329,7 +326,7 @@
$('.test-env-notice').remove(); $('.test-env-notice').remove();
$('<div class="test-auth-notice-container"></div>') $('<div class="test-auth-notice-container"></div>')
.html(noticeHtml) .html(noticeHtml)
.insertAfter($('.phone-input-group').closest('.form-group')); .insertAfter($('.org-compound-input').closest('.form-group'));
} }
// 기존 휴대폰 번호 복원 // 기존 휴대폰 번호 복원
src/main/resources/templates/views/apps/login/inactiveAccountRecovery.html
-9
View File
@@ -83,15 +83,6 @@
</div> </div>
</div> </div>
<!-- 테스트 환경 안내 메시지 -->
<div class="info1 pt28">
<div class="info_line">
<div class="info_box1">
<th:block th:replace="~{fragment/test-env-auth-notice :: smsNotice}"></th:block>
</div>
</div>
</div>
<!-- 인증번호 입력 --> <!-- 인증번호 입력 -->
<div class="info1 pt28 auth-number-container" id="authNumberContainer"> <div class="info1 pt28 auth-number-container" id="authNumberContainer">
<p class="title w_tit"> <p class="title w_tit">
src/main/resources/templates/views/apps/login/resetPassword.html
+33 -36
View File
@@ -53,46 +53,43 @@
<!-- Phone Number Fields --> <!-- Phone Number Fields -->
<div class="form-group"> <div class="form-group">
<label class="form-label">휴대폰 번호<span class="required-badge">필수</span></label> <label class="form-label">휴대폰 번호<span class="required-badge">필수</span></label>
<div class="phone-input-group"> <div class="org-input-row">
<select id="phonePrefix" class="form-select phone-prefix" required> <div class="org-compound-input">
<option value="">선택</option> <select id="phonePrefix" class="org-form-select phone-prefix" required>
<option value="010">010</option> <option value="">선택</option>
<option value="011">011</option> <option value="010">010</option>
<option value="016">016</option> <option value="011">011</option>
<option value="017">017</option> <option value="016">016</option>
<option value="018">018</option> <option value="017">017</option>
</select> <option value="018">018</option>
<span class="phone-separator"></span> </select>
<input type="tel" <span class="separator">-</span>
id="phoneMiddle" <input type="tel"
name="phoneMiddle" id="phoneMiddle"
maxlength="4" name="phoneMiddle"
class="form-input phone-middle" maxlength="4"
placeholder="1234" class="form-input phone-number"
pattern="[0-9]*" placeholder="1234"
inputmode="numeric" pattern="[0-9]*"
required> inputmode="numeric"
<span class="phone-separator"></span> required>
<input type="tel" <span class="separator">-</span>
id="phoneLast" <input type="tel"
name="phoneLast" id="phoneLast"
maxlength="4" name="phoneLast"
class="form-input phone-last" maxlength="4"
placeholder="1234" class="form-input phone-number"
pattern="[0-9]*" placeholder="1234"
inputmode="numeric" pattern="[0-9]*"
required> inputmode="numeric"
<button type="button" class="auth-request-button" id="requestAuthButton"> required>
</div>
<button type="button" class="btn org-btn-check btn_auth" id="requestAuthButton">
인증번호 받기 인증번호 받기
</button> </button>
</div> </div>
</div> </div>
<!-- 테스트 환경 안내 메시지 -->
<div class="form-group">
<th:block th:replace="~{fragment/test-env-auth-notice :: smsNotice}"></th:block>
</div>
<!-- Auth Number Input --> <!-- Auth Number Input -->
<div class="form-group auth-number-group" id="authNumberGroup" style="display: none;"> <div class="form-group auth-number-group" id="authNumberGroup" style="display: none;">
<label for="authNumber" class="form-label">인증번호 입력<span class="required-badge">필수</span></label> <label for="authNumber" class="form-label">인증번호 입력<span class="required-badge">필수</span></label>
@@ -382,7 +379,7 @@
$('.test-env-notice').remove(); $('.test-env-notice').remove();
$('<div class="test-auth-notice-container"></div>') $('<div class="test-auth-notice-container"></div>')
.html(noticeHtml) .html(noticeHtml)
.insertAfter($('.phone-input-group').closest('.form-group')); .insertAfter($('.org-compound-input').closest('.form-group'));
} }
// 기존 휴대폰 번호 복원 // 기존 휴대폰 번호 복원
src/main/resources/templates/views/apps/mypage/components/commonUserInfo.html
-8
View File
@@ -87,14 +87,6 @@
</div> </div>
</div> </div>
<!-- 테스트 환경 안내 메시지 -->
<div class="form-row">
<div class="form-label-wrapper label-offset"></div>
<div class="form-field-wrapper">
<th:block th:replace="~{fragment/test-env-auth-notice :: smsNotice}"></th:block>
</div>
</div>
<div class="form-row" id="authNumberContainer" style="display: none;"> <div class="form-row" id="authNumberContainer" style="display: none;">
<div class="form-label-wrapper label-offset"> <div class="form-label-wrapper label-offset">
<span class="form-label-text">인증번호 입력</span> <span class="required-badge">필수</span> <span class="form-label-text">인증번호 입력</span> <span class="required-badge">필수</span>
src/main/resources/templates/views/apps/mypage/verificationEmail.html
-8
View File
@@ -33,14 +33,6 @@
</div> </div>
</div> </div>
<!-- 테스트 환경 안내 메시지 -->
<div class="form-row">
<div class="form-label-wrapper label-offset"></div>
<div class="form-field-wrapper">
<th:block th:replace="~{fragment/test-env-auth-notice :: emailNotice}"></th:block>
</div>
</div>
<div class="form-row" style="margin-bottom: 0"> <div class="form-row" style="margin-bottom: 0">
<div class="form-label-wrapper label-offset"> <div class="form-label-wrapper label-offset">
<span class="form-label-text">&nbsp;</span> <span class="form-label-text">&nbsp;</span>
src/main/resources/templates/views/apps/register/components/newUserInfoForm.html
-8
View File
@@ -48,14 +48,6 @@
</div> </div>
</div> </div>
<!-- 테스트 환경 안내 메시지 -->
<div class="org-form-group">
<label class="org-form-label"></label>
<div class="org-form-input-wrapper">
<th:block th:replace="~{fragment/test-env-auth-notice :: smsNotice}"></th:block>
</div>
</div>
<!-- 인증번호 입력 --> <!-- 인증번호 입력 -->
<div class="org-form-group" id="authNumberContainer" style="display: none;"> <div class="org-form-group" id="authNumberContainer" style="display: none;">
<label class="org-form-label"> <label class="org-form-label">