모바일 - 아이디 찾기/비밀번호 초기화
This commit is contained in:
현성필
@@ -8192,6 +8192,7 @@ select.form-control {
|
||||
box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
|
||||
z-index: 501;
|
||||
transition: all 0.3s ease;
|
||||
background-color: #0049b4;
|
||||
}
|
||||
.api-mobile-toggle:hover {
|
||||
transform: scale(1.05);
|
||||
@@ -8965,7 +8966,6 @@ select.form-control {
|
||||
}
|
||||
.login-form .form-input {
|
||||
width: 100%;
|
||||
max-width: 335px;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
@@ -8995,7 +8995,6 @@ select.form-control {
|
||||
}
|
||||
.login-button {
|
||||
width: 100%;
|
||||
max-width: 335px;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
@@ -9223,12 +9222,6 @@ select.form-control {
|
||||
.account-recovery-form .form-input.error {
|
||||
border-color: #ed5b5b;
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.account-recovery-form .form-input {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.account-recovery-form .form-select {
|
||||
height: 60px;
|
||||
padding: 0 40px 0 20px;
|
||||
@@ -9268,12 +9261,6 @@ select.form-control {
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.account-recovery-form .form-select {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-input-group {
|
||||
display: flex;
|
||||
@@ -9515,33 +9502,6 @@ select.form-control {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.account-recovery-logo {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.account-recovery-form .form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.account-recovery-form .form-label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.account-recovery-form .form-input,
|
||||
.account-recovery-form .form-select {
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.auth-request-button,
|
||||
.auth-verify-button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.account-recovery-card .form-actions, .account-recovery-card .form-actions-center {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
.account-recovery-result {
|
||||
width: 100%;
|
||||
background: #F6F9FB;
|
||||
@@ -9692,6 +9652,176 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.account-recovery-page {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.account-recovery-container {
|
||||
padding: 20px;
|
||||
}
|
||||
.account-recovery-card {
|
||||
padding: 0;
|
||||
}
|
||||
.account-recovery-tabs .tab-link {
|
||||
height: 40px;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.account-recovery-tabs .tab-link:first-child {
|
||||
border-radius: 8px 0 0 0;
|
||||
}
|
||||
.account-recovery-tabs .tab-link:last-child {
|
||||
border-radius: 0 8px 0 0;
|
||||
}
|
||||
.account-recovery-form {
|
||||
padding: 20px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
.account-recovery-form .form-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.account-recovery-form .form-label {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.account-recovery-form .form-input {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.account-recovery-form .form-input::placeholder {
|
||||
color: #8c959f;
|
||||
}
|
||||
.account-recovery-form .form-select {
|
||||
height: 40px;
|
||||
padding: 0 32px 0 12px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
background-position: right 10px center;
|
||||
}
|
||||
.phone-input-group {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.phone-input-group .phone-prefix {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
}
|
||||
.phone-input-group .phone-middle,
|
||||
.phone-input-group .phone-last {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
}
|
||||
.phone-input-group .phone-separator {
|
||||
display: flex;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
}
|
||||
.phone-input-group .phone-separator::before {
|
||||
content: "-";
|
||||
}
|
||||
.auth-input-group {
|
||||
width: 100%;
|
||||
}
|
||||
.auth-input-group .auth-input {
|
||||
width: 100%;
|
||||
padding-right: 60px;
|
||||
}
|
||||
.auth-input-group .auth-timer {
|
||||
font-size: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
.auth-request-button,
|
||||
.auth-verify-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.account-recovery-card .form-actions, .account-recovery-card .form-actions-center {
|
||||
flex-direction: row;
|
||||
gap: 21px;
|
||||
margin-top: 24px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.account-recovery-card .form-actions .cancel-button, .account-recovery-card .form-actions-center .cancel-button,
|
||||
.account-recovery-card .form-actions .submit-button,
|
||||
.account-recovery-card .form-actions-center .submit-button {
|
||||
flex: 1;
|
||||
min-width: 144px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.account-recovery-card .form-actions .cancel-button, .account-recovery-card .form-actions-center .cancel-button {
|
||||
background: #e5e7eb;
|
||||
color: #5f666c;
|
||||
}
|
||||
.account-recovery-card .form-actions .submit-button, .account-recovery-card .form-actions-center .submit-button {
|
||||
background: #0049b4;
|
||||
color: #ffffff;
|
||||
}
|
||||
.account-recovery-result {
|
||||
padding: 30px 20px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
.account-recovery-result .result-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.account-recovery-result .result-header .result-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.account-recovery-result .result-header .result-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.account-recovery-result .result-header .result-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
.found-users-list {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.found-users-list .found-user-item {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.found-users-list .found-user-item .user-email {
|
||||
font-size: 16px;
|
||||
}
|
||||
.found-users-list .found-user-item .user-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
.result-info-box {
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.result-info-box .info-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.signup-selection-page {
|
||||
min-height: calc(100vh - 140px);
|
||||
display: flex;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -225,11 +225,6 @@
|
||||
&.error {
|
||||
border-color: #ed5b5b;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@@ -274,11 +269,6 @@
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -547,40 +537,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.account-recovery-logo {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.account-recovery-form {
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-request-button,
|
||||
.auth-verify-button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.account-recovery-card .form-actions {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
// NOTE: 모바일 스타일은 @include respond-to('sm') 블록에서 관리 (파일 하단)
|
||||
|
||||
// Result Page Styles (아이디 찾기 결과 페이지)
|
||||
.account-recovery-result {
|
||||
@@ -741,3 +698,228 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Figma Mobile Design - node 1152-7047 (sm: 768px breakpoint)
|
||||
// -----------------------------------------------------------------------------
|
||||
@include respond-to('sm') {
|
||||
.account-recovery-page {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.account-recovery-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.account-recovery-card {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Figma: 탭 - 167px × 40px, 14px Bold
|
||||
.account-recovery-tabs {
|
||||
.tab-link {
|
||||
height: 40px;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 8px 0 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 8px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 폼 영역
|
||||
.account-recovery-form {
|
||||
padding: 20px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
|
||||
.form-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// Figma: 라벨 - 14px Medium
|
||||
.form-label {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Figma: 입력 필드 - 335px × 40px, border-radius 8px
|
||||
.form-input {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
|
||||
&::placeholder {
|
||||
color: #8c959f;
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 셀렉트 - 40px 높이, 8px radius
|
||||
.form-select {
|
||||
height: 40px;
|
||||
padding: 0 32px 0 12px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
background-position: right 10px center;
|
||||
}
|
||||
}
|
||||
|
||||
// 모바일: 휴대폰 번호 입력 - 화면 폭 채우기
|
||||
.phone-input-group {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.phone-prefix {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.phone-middle,
|
||||
.phone-last {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.phone-separator {
|
||||
display: flex;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
|
||||
&::before {
|
||||
content: '-';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 모바일: 인증번호 입력 그룹 - 화면 폭 채우기
|
||||
.auth-input-group {
|
||||
width: 100%;
|
||||
|
||||
.auth-input {
|
||||
width: 100%;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
// 타이머 - 12px, #ed5b5b
|
||||
.auth-timer {
|
||||
font-size: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 모바일: 인증번호 받기/확인 버튼 - 화면 폭 채우기, 다음 줄에 배치
|
||||
.auth-request-button,
|
||||
.auth-verify-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
// Figma: 하단 버튼 - 144px × 40px, gap 21px, 가로 배치
|
||||
.account-recovery-card .form-actions {
|
||||
flex-direction: row;
|
||||
gap: 21px;
|
||||
margin-top: 24px;
|
||||
padding: 24px 0;
|
||||
|
||||
.cancel-button,
|
||||
.submit-button {
|
||||
flex: 1;
|
||||
min-width: 144px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// Figma: 취소 버튼 - #e5e7eb 배경, #5f666c 텍스트
|
||||
.cancel-button {
|
||||
background: #e5e7eb;
|
||||
color: #5f666c;
|
||||
}
|
||||
|
||||
// Figma: 제출 버튼 - #0049b4 배경, 흰색 텍스트
|
||||
.submit-button {
|
||||
background: #0049b4;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 결과 페이지
|
||||
.account-recovery-result {
|
||||
padding: 30px 20px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
|
||||
.result-header {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.result-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.result-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 검색 결과 목록
|
||||
.found-users-list {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.found-user-item {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.user-email {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 결과 정보 박스
|
||||
.result-info-box {
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
|
||||
.info-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -257,6 +257,7 @@
|
||||
box-shadow: $shadow-lg;
|
||||
z-index: $z-index-modal + 1;
|
||||
transition: $transition-base;
|
||||
background-color: $primary-blue;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
|
||||
@@ -319,7 +319,6 @@
|
||||
.form-input {
|
||||
// Figma: 335px × 44px, border-radius 8px, border #dadada
|
||||
width: 100%;
|
||||
max-width: 335px;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
@@ -360,7 +359,6 @@
|
||||
.login-button {
|
||||
// Figma: 335px × 44px, #0049b4, 16px Bold, border-radius 8px
|
||||
width: 100%;
|
||||
max-width: 335px;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
|
||||
@@ -27,19 +27,13 @@
|
||||
|
||||
<!-- Name Field (Figma: 성명 + 텍스트필드) -->
|
||||
<div class="form-group">
|
||||
<label for="userName" class="form-label">성명<span class="required">*</span></label>
|
||||
<input type="text"
|
||||
id="userName"
|
||||
name="userName"
|
||||
th:value="${userName}"
|
||||
class="form-input"
|
||||
placeholder="성명"
|
||||
required>
|
||||
<label for="userName" class="form-label">성명<span class="required-badge">필수</span></label>
|
||||
<input type="text" id="userName" name="userName" th:value="${userName}" class="form-input" placeholder="성명" required>
|
||||
</div>
|
||||
|
||||
<!-- Phone Number Fields (Figma: 휴대폰번호 + 텍스트필드) -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">휴대폰 번호<span class="required">*</span></label>
|
||||
<label class="form-label">휴대폰 번호<span class="required-badge">필수</span></label>
|
||||
<div class="phone-input-group">
|
||||
<select id="phonePrefix" class="form-select phone-prefix" required>
|
||||
<option value="">선택</option>
|
||||
@@ -77,7 +71,7 @@
|
||||
|
||||
<!-- Auth Number Input (Figma: 인증번호 입력 + 텍스트필드) -->
|
||||
<div class="form-group auth-number-group" id="authNumberGroup" style="display: none;">
|
||||
<label for="authNumber" class="form-label">인증번호 입력<span class="required">*</span></label>
|
||||
<label for="authNumber" class="form-label">인증번호 입력<span class="required-badge">필수</span></label>
|
||||
<div class="auth-input-group">
|
||||
<input type="text"
|
||||
id="authNumber"
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<!-- Name Field -->
|
||||
<div class="form-group">
|
||||
<label for="userName" class="form-label">성명<span class="required">*</span></label>
|
||||
<label for="userName" class="form-label">성명<span class="required-badge">필수</span></label>
|
||||
<input type="text"
|
||||
id="userName"
|
||||
name="userName"
|
||||
@@ -40,7 +40,7 @@
|
||||
|
||||
<!-- Email ID Field -->
|
||||
<div class="form-group">
|
||||
<label for="loginId" class="form-label">이메일 아이디<span class="required">*</span></label>
|
||||
<label for="loginId" class="form-label">이메일 아이디<span class="required-badge">필수</span></label>
|
||||
<input type="email"
|
||||
id="loginId"
|
||||
name="loginId"
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
<!-- Phone Number Fields -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">휴대폰 번호<span class="required">*</span></label>
|
||||
<label class="form-label">휴대폰 번호<span class="required-badge">필수</span></label>
|
||||
<div class="phone-input-group">
|
||||
<select id="phonePrefix" class="form-select phone-prefix" required>
|
||||
<option value="">선택</option>
|
||||
@@ -90,7 +90,7 @@
|
||||
|
||||
<!-- Auth Number Input -->
|
||||
<div class="form-group auth-number-group" id="authNumberGroup" style="display: none;">
|
||||
<label for="authNumber" class="form-label">인증번호 입력<span class="required">*</span></label>
|
||||
<label for="authNumber" class="form-label">인증번호 입력<span class="required-badge">필수</span></label>
|
||||
<div class="auth-input-group">
|
||||
<input type="text"
|
||||
id="authNumber"
|
||||
|
||||
Reference in New Issue
Block a user