테스트 환경 인증번호 동적 표시 및 Sass 3.0 호환성 개선
This commit is contained in:
Rinjae
@@ -2,7 +2,7 @@ package com.eactive.apim.portal.apps.auth.service;
|
||||
|
||||
public interface AuthNumberService {
|
||||
|
||||
void sendRequestAuthNumber(String recipientKey, String msgType);
|
||||
String sendRequestAuthNumber(String recipientKey, String msgType);
|
||||
|
||||
boolean verifyAuthNumber(String recipientKey, String authNumber);
|
||||
}
|
||||
|
||||
@@ -40,10 +40,11 @@ public class AuthNumberServiceImpl implements AuthNumberService {
|
||||
/**
|
||||
* @param recipientKey
|
||||
* @param msgType
|
||||
* @return 생성된 인증번호
|
||||
*/
|
||||
@Override
|
||||
@Transactional(noRollbackFor = AuthNumberException.class)
|
||||
public void sendRequestAuthNumber(String recipientKey, String msgType) {
|
||||
public String sendRequestAuthNumber(String recipientKey, String msgType) {
|
||||
logger.info("Sending auth number to: {} via {}", recipientKey, msgType);
|
||||
|
||||
validateResendTime(recipientKey);
|
||||
@@ -55,6 +56,8 @@ public class AuthNumberServiceImpl implements AuthNumberService {
|
||||
|
||||
storage.saveAuthNumber(recipientKey, authNumber,
|
||||
LocalDateTime.now().plusSeconds(authNumberExpirationTime));
|
||||
|
||||
return authNumber;
|
||||
}
|
||||
|
||||
@Override
|
||||
|
||||
@@ -18,6 +18,8 @@ public class ValidationResponse {
|
||||
private boolean isPersonalAccount;
|
||||
private boolean isCorporateAccount;
|
||||
|
||||
private String authNumber; // 테스트 환경 인증번호
|
||||
|
||||
public ValidationResponse(boolean isValid, String message) {
|
||||
this.isValid = isValid;
|
||||
this.message = message;
|
||||
|
||||
@@ -41,9 +41,10 @@ public class AuthFacadeImpl implements AuthFacade {
|
||||
}
|
||||
|
||||
try {
|
||||
authNumberService.sendRequestAuthNumber(recipientKey, msgType);
|
||||
String generatedAuthNumber = authNumberService.sendRequestAuthNumber(recipientKey, msgType);
|
||||
response.setValid(true);
|
||||
response.setMessage("인증번호를 발송하였습니다.");
|
||||
response.setAuthNumber(generatedAuthNumber); // 테스트 환경에서 인증번호 표시용
|
||||
} catch (Exception e) {
|
||||
response.setValid(false);
|
||||
response.setMessage(e.getMessage());
|
||||
|
||||
@@ -7,6 +7,7 @@ import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.ControllerAdvice;
|
||||
import org.springframework.web.bind.annotation.ModelAttribute;
|
||||
import com.eactive.apim.portal.portalproperty.service.PortalPropertyService;
|
||||
import com.eactive.apim.portal.config.PortalProperties;
|
||||
|
||||
@ControllerAdvice
|
||||
public class GlobalControllerAdvice {
|
||||
@@ -17,6 +18,9 @@ public class GlobalControllerAdvice {
|
||||
@Autowired
|
||||
private PortalPropertyService portalPropertyService;
|
||||
|
||||
@Autowired
|
||||
private PortalProperties portalProperties;
|
||||
|
||||
@ModelAttribute("breadcrumb")
|
||||
public List<Map> addBreadcrumbToModel(HttpServletRequest request) {
|
||||
String currentPath = request.getRequestURI();
|
||||
@@ -39,4 +43,19 @@ public class GlobalControllerAdvice {
|
||||
);
|
||||
return "true".equalsIgnoreCase(value);
|
||||
}
|
||||
|
||||
@ModelAttribute("showTestAuthNotice")
|
||||
public boolean showTestAuthNotice() {
|
||||
return portalProperties.isTestAuthNoticeEnabled();
|
||||
}
|
||||
|
||||
@ModelAttribute("testAuthNumber")
|
||||
public String getTestAuthNumber() {
|
||||
if (portalProperties.isTestAuthNoticeEnabled()) {
|
||||
String authVirtualCode = portalProperties.getAuthVirtualCode();
|
||||
// 고정 인증번호가 있으면 반환, 없으면 "random" 표시
|
||||
return (authVirtualCode != null && !authVirtualCode.isEmpty()) ? authVirtualCode : "random";
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,6 +25,8 @@ public class PortalProperties {
|
||||
|
||||
private String authVirtualCode = "";
|
||||
|
||||
private boolean testAuthNoticeEnabled = false;
|
||||
|
||||
private Map<RoleCode, List<String>> portalSecurity;
|
||||
|
||||
private FileProperties file = new FileProperties();
|
||||
|
||||
@@ -38,6 +38,7 @@ gateway:
|
||||
|
||||
portal:
|
||||
auth-virtual-code: 654321
|
||||
test-auth-notice-enabled: true
|
||||
|
||||
proxy:
|
||||
targets:
|
||||
|
||||
@@ -38,7 +38,8 @@ gateway:
|
||||
portal:
|
||||
logging:
|
||||
log-path: d:/kjb-logs
|
||||
auth-virtual-code: 654321
|
||||
# auth-virtual-code 제거 - gf63는 랜덤 인증번호 사용
|
||||
test-auth-notice-enabled: true
|
||||
|
||||
proxy:
|
||||
targets:
|
||||
|
||||
@@ -38,6 +38,7 @@ portal:
|
||||
logging:
|
||||
log-path: C:\eactive\logs
|
||||
auth-virtual-code: 654321
|
||||
test-auth-notice-enabled: true
|
||||
|
||||
proxy:
|
||||
targets:
|
||||
|
||||
@@ -18,6 +18,9 @@ spring:
|
||||
thymeleaf:
|
||||
cache: false
|
||||
|
||||
portal:
|
||||
test-auth-notice-enabled: false # prod 환경: UI 안내 미표시
|
||||
|
||||
proxy:
|
||||
targets:
|
||||
stg: http://inter-dapiwas01.k-bank.com:7090/monitoring
|
||||
|
||||
@@ -16,6 +16,7 @@ spring:
|
||||
cache: false
|
||||
|
||||
portal:
|
||||
test-auth-notice-enabled: true
|
||||
# 검증 단계에선 사용하지 않음
|
||||
# auth-virtual-code: 654321
|
||||
|
||||
|
||||
@@ -76,6 +76,7 @@ portal:
|
||||
auth-ttl: 300
|
||||
auth:
|
||||
resend_limit_seconds: 30
|
||||
test-auth-notice-enabled: true # 기본값: true (대부분의 개발환경에서 UI 안내 표시)
|
||||
|
||||
user-approval: true
|
||||
password-expiration-days: 90
|
||||
|
||||
@@ -1106,7 +1106,7 @@ body.design-survey-active .global-header {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.mobile-drawer .drawer-welcome .btn-drawer-login:hover {
|
||||
background: rgb(0, 52.3166666667, 129);
|
||||
background: rgb(0, 65.7, 162);
|
||||
}
|
||||
.mobile-drawer .drawer-welcome.authenticated {
|
||||
flex-direction: row;
|
||||
@@ -2269,7 +2269,7 @@ body.design-survey-active .global-header {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.btn-success:hover {
|
||||
background: rgb(68.4897959184, 194.5102040816, 93.693877551);
|
||||
background: rgb(83.2897959184, 199.3102040816, 106.493877551);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.btn-danger {
|
||||
@@ -2277,7 +2277,7 @@ body.design-survey-active .global-header {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: #ff3838;
|
||||
background: rgb(255, 70.8, 70.8);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.btn-ghost {
|
||||
@@ -2543,7 +2543,7 @@ body.design-survey-active .global-header {
|
||||
.action-btn-delete:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
background: rgb(255, 81.5, 81.5);
|
||||
background: rgb(255, 88.9, 88.9);
|
||||
}
|
||||
.action-btn-delete:active {
|
||||
transform: translateY(0);
|
||||
@@ -2661,7 +2661,7 @@ body.design-survey-active .global-header {
|
||||
background: #a4d6ea;
|
||||
}
|
||||
.btn-input-action.btn-change:hover {
|
||||
background: rgb(122.5625, 195.3303571429, 224.4375);
|
||||
background: rgb(131.6625, 199.4303571429, 226.5375);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
}
|
||||
@@ -2749,7 +2749,7 @@ body.design-survey-active .global-header {
|
||||
}
|
||||
.status-badge.status-processing {
|
||||
background: rgba(255, 217, 61, 0.1);
|
||||
color: rgb(163, 131.0721649485, 0);
|
||||
color: rgb(221.2, 177.8721649485, 0);
|
||||
}
|
||||
.status-badge.status-failed {
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
@@ -2789,7 +2789,7 @@ body.design-survey-active .global-header {
|
||||
}
|
||||
.status-badge-header.status-processing {
|
||||
background: rgba(255, 217, 61, 0.1);
|
||||
color: rgb(163, 131.0721649485, 0);
|
||||
color: rgb(221.2, 177.8721649485, 0);
|
||||
}
|
||||
|
||||
.badge-sm {
|
||||
@@ -3214,25 +3214,25 @@ body.design-survey-active .global-header {
|
||||
}
|
||||
}
|
||||
|
||||
.common-section-box, .app-list-container, .register-result, .register-form-container {
|
||||
.common-section-box, .app-list-container, .register-form-container, .register-result {
|
||||
background-color: #f6f9fb;
|
||||
border-radius: 12px;
|
||||
padding: 30px 45px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.common-section-box, .app-list-container, .register-result, .register-form-container {
|
||||
.common-section-box, .app-list-container, .register-form-container, .register-result {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.common-title-bar, .user-management-container .table-controls, .app-list-title-section, .register-title-bar {
|
||||
.common-title-bar, .app-list-title-section, .register-title-bar {
|
||||
background-color: #f6f9fb;
|
||||
border-radius: 12px;
|
||||
padding: 14px 45px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.common-title-bar, .user-management-container .table-controls, .app-list-title-section, .register-title-bar {
|
||||
.common-title-bar, .app-list-title-section, .register-title-bar {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
padding: 20px 20px 0;
|
||||
@@ -3240,7 +3240,7 @@ body.design-survey-active .global-header {
|
||||
border-bottom: 1.5px solid #212529;
|
||||
}
|
||||
}
|
||||
.common-title-bar .common-title, .user-management-container .table-controls .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
|
||||
.common-title-bar .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
|
||||
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
@@ -3248,7 +3248,7 @@ body.design-survey-active .global-header {
|
||||
margin: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.common-title-bar .common-title, .user-management-container .table-controls .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
|
||||
.common-title-bar .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
margin-bottom: 4px;
|
||||
@@ -3284,13 +3284,13 @@ body.design-survey-active .global-header {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.common-title-bar .common-subtitle, .user-management-container .table-controls .common-subtitle, .app-list-title-section .common-subtitle, .register-title-bar .common-subtitle {
|
||||
.common-title-bar .common-subtitle, .app-list-title-section .common-subtitle, .register-title-bar .common-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #515151;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.common-title-bar .common-subtitle, .user-management-container .table-controls .common-subtitle, .app-list-title-section .common-subtitle, .register-title-bar .common-subtitle {
|
||||
.common-title-bar .common-subtitle, .app-list-title-section .common-subtitle, .register-title-bar .common-subtitle {
|
||||
font-size: 12px;
|
||||
color: #515151;
|
||||
display: inline;
|
||||
@@ -3979,7 +3979,7 @@ select.form-control {
|
||||
.file-upload-wrapper .file-remove-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
background: rgb(255, 81.5, 81.5);
|
||||
background: rgb(255, 88.9, 88.9);
|
||||
}
|
||||
.file-upload-wrapper .file-remove-btn:active {
|
||||
transform: translateY(0);
|
||||
@@ -4300,7 +4300,7 @@ select.form-control {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.form-actions--with-withdrawal .withdrawal-link:hover {
|
||||
background: rgb(208.9090909091, 231.9545454545, 242.5909090909);
|
||||
background: rgb(210.2090909091, 232.6045454545, 242.9409090909);
|
||||
}
|
||||
.form-actions--with-withdrawal .withdrawal-link img {
|
||||
width: 22px;
|
||||
@@ -4455,7 +4455,7 @@ select.form-control {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.notice-content-box a:hover {
|
||||
color: rgb(0, 52.3166666667, 129);
|
||||
color: rgb(0, 65.7, 162);
|
||||
}
|
||||
|
||||
.form-row--content .form-label-wrapper {
|
||||
@@ -5246,7 +5246,7 @@ select.form-control {
|
||||
font-size: 16px;
|
||||
}
|
||||
.drawer-logout-btn:hover {
|
||||
background: #ff3838;
|
||||
background: rgb(255, 70.8, 70.8);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
|
||||
}
|
||||
@@ -5693,19 +5693,19 @@ select.form-control {
|
||||
background-color: #DADADA;
|
||||
}
|
||||
.list-table-btn--default:hover {
|
||||
background-color: rgb(205.25, 205.25, 205.25);
|
||||
background-color: rgb(207.1, 207.1, 207.1);
|
||||
}
|
||||
.list-table-btn--primary {
|
||||
background-color: #A4D6EA;
|
||||
}
|
||||
.list-table-btn--primary:hover {
|
||||
background-color: rgb(143.28125, 204.6651785714, 229.21875);
|
||||
background-color: rgb(147.83125, 206.7151785714, 230.26875);
|
||||
}
|
||||
.list-table-btn--secondary {
|
||||
background-color: #CDD4F0;
|
||||
}
|
||||
.list-table-btn--secondary:hover {
|
||||
background-color: rgb(185.3846153846, 195.1307692308, 234.1153846154);
|
||||
background-color: rgb(187.8846153846, 197.2807692308, 234.8653846154);
|
||||
}
|
||||
|
||||
.table-pagination {
|
||||
@@ -6337,7 +6337,7 @@ select.form-control {
|
||||
.alert.alert-error {
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
border: 1px solid rgba(255, 107, 107, 0.3);
|
||||
color: #ff3838;
|
||||
color: rgb(255, 70.8, 70.8);
|
||||
align-items: center;
|
||||
}
|
||||
.alert.alert-error svg {
|
||||
@@ -6351,7 +6351,7 @@ select.form-control {
|
||||
.alert.alert-success {
|
||||
background: rgba(107, 207, 127, 0.1);
|
||||
border: 1px solid rgba(107, 207, 127, 0.3);
|
||||
color: rgb(51.9183673469, 160.0816326531, 73.5510204082);
|
||||
color: rgb(61.5183673469, 189.6816326531, 87.1510204082);
|
||||
}
|
||||
.alert.alert-info {
|
||||
background: rgba(0, 73, 180, 0.1);
|
||||
@@ -6632,6 +6632,46 @@ select.form-control {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%230049B4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.test-env-notice {
|
||||
margin-top: 8px;
|
||||
padding: 12px 16px;
|
||||
background-color: #FFF4E6;
|
||||
border: 1px solid #FFB84D;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.test-env-notice__content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.test-env-notice__icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.test-env-notice__text-container {
|
||||
flex: 1;
|
||||
}
|
||||
.test-env-notice__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #E65100;
|
||||
font-weight: 500;
|
||||
}
|
||||
.test-env-notice__description {
|
||||
margin: 4px 0 0 0;
|
||||
font-size: 13px;
|
||||
color: #5D4037;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.test-env-notice__auth-code {
|
||||
color: #E65100;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hero-carousel-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -6813,7 +6853,7 @@ select.form-control {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-hero-signup:hover {
|
||||
background: rgb(0, 52.3166666667, 129);
|
||||
background: rgb(0, 65.7, 162);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 73, 180, 0.3);
|
||||
}
|
||||
@@ -7497,7 +7537,7 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
.api-showcase .btn-all-apis:hover {
|
||||
background: rgb(0, 106.8584070796, 175);
|
||||
background: rgb(0, 124.2, 203.4);
|
||||
}
|
||||
.api-showcase .btn-all-apis:hover svg {
|
||||
transform: translateX(4px);
|
||||
@@ -7810,14 +7850,14 @@ select.form-control {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.info-section .action-btn-primary:hover {
|
||||
background: rgb(0, 52.3166666667, 129);
|
||||
background: rgb(0, 65.7, 162);
|
||||
}
|
||||
.info-section .action-btn-secondary {
|
||||
background: #00ACDD;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.info-section .action-btn-secondary:hover {
|
||||
background: rgb(0, 132.3076923077, 170);
|
||||
background: rgb(0, 154.8, 198.9);
|
||||
}
|
||||
.info-section .info-image {
|
||||
flex: 1;
|
||||
@@ -8159,7 +8199,7 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
.support-center .support-card--notice:hover {
|
||||
background: rgb(0, 62.6583333333, 154.5);
|
||||
background: rgb(0, 69.35, 171);
|
||||
}
|
||||
.support-center .support-card--faq, .support-center .support-card--qna {
|
||||
width: 388px;
|
||||
@@ -8577,7 +8617,7 @@ select.form-control {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.signup-cta-section .btn-signup-cta:hover {
|
||||
background: rgb(0, 106.8584070796, 175);
|
||||
background: rgb(0, 124.2, 203.4);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 138, 226, 0.3);
|
||||
}
|
||||
@@ -9599,10 +9639,10 @@ select.form-control {
|
||||
line-height: 1;
|
||||
}
|
||||
.login-button:hover {
|
||||
background: rgb(0, 62.6583333333, 154.5);
|
||||
background: rgb(0, 69.35, 171);
|
||||
}
|
||||
.login-button:active {
|
||||
background: rgb(0, 52.3166666667, 129);
|
||||
background: rgb(0, 65.7, 162);
|
||||
}
|
||||
.login-button:disabled {
|
||||
opacity: 0.6;
|
||||
@@ -10127,11 +10167,11 @@ select.form-control {
|
||||
}
|
||||
.auth-request-button:hover,
|
||||
.auth-verify-button:hover {
|
||||
background: rgb(143.28125, 204.6651785714, 229.21875);
|
||||
background: rgb(147.83125, 206.7151785714, 230.26875);
|
||||
}
|
||||
.auth-request-button:active,
|
||||
.auth-verify-button:active {
|
||||
background: rgb(122.5625, 195.3303571429, 224.4375);
|
||||
background: rgb(131.6625, 199.4303571429, 226.5375);
|
||||
}
|
||||
.auth-request-button:disabled,
|
||||
.auth-verify-button:disabled {
|
||||
@@ -10148,7 +10188,7 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
|
||||
.account-recovery-card .form-actions, .account-recovery-card .form-actions-center {
|
||||
.account-recovery-card .form-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
@@ -10157,9 +10197,8 @@ select.form-control {
|
||||
border-top: none;
|
||||
background: transparent;
|
||||
}
|
||||
.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 {
|
||||
.account-recovery-card .form-actions .cancel-button,
|
||||
.account-recovery-card .form-actions .submit-button {
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
@@ -10176,39 +10215,38 @@ select.form-control {
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.account-recovery-card .form-actions .cancel-button, .account-recovery-card .form-actions-center .cancel-button {
|
||||
.account-recovery-card .form-actions .cancel-button {
|
||||
color: #5f666c;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.account-recovery-card .form-actions .cancel-button:hover, .account-recovery-card .form-actions-center .cancel-button:hover {
|
||||
background: rgb(214.5869565217, 217.6956521739, 223.9130434783);
|
||||
.account-recovery-card .form-actions .cancel-button:hover {
|
||||
background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
|
||||
}
|
||||
.account-recovery-card .form-actions .cancel-button:active, .account-recovery-card .form-actions-center .cancel-button:active {
|
||||
background: rgb(200.1739130435, 204.3913043478, 212.8260869565);
|
||||
.account-recovery-card .form-actions .cancel-button:active {
|
||||
background: rgb(202.7739130435, 206.7913043478, 214.8260869565);
|
||||
}
|
||||
.account-recovery-card .form-actions .submit-button, .account-recovery-card .form-actions-center .submit-button {
|
||||
.account-recovery-card .form-actions .submit-button {
|
||||
color: #FFFFFF;
|
||||
background: #0049B4;
|
||||
}
|
||||
.account-recovery-card .form-actions .submit-button:hover, .account-recovery-card .form-actions-center .submit-button:hover {
|
||||
background: rgb(0, 62.6583333333, 154.5);
|
||||
.account-recovery-card .form-actions .submit-button:hover {
|
||||
background: rgb(0, 69.35, 171);
|
||||
}
|
||||
.account-recovery-card .form-actions .submit-button:active, .account-recovery-card .form-actions-center .submit-button:active {
|
||||
background: rgb(0, 52.3166666667, 129);
|
||||
.account-recovery-card .form-actions .submit-button:active {
|
||||
background: rgb(0, 65.7, 162);
|
||||
}
|
||||
.account-recovery-card .form-actions .submit-button:disabled, .account-recovery-card .form-actions-center .submit-button:disabled {
|
||||
.account-recovery-card .form-actions .submit-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.account-recovery-card .form-actions, .account-recovery-card .form-actions-center {
|
||||
.account-recovery-card .form-actions {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
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 {
|
||||
.account-recovery-card .form-actions .cancel-button,
|
||||
.account-recovery-card .form-actions .submit-button {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
@@ -10406,7 +10444,7 @@ select.form-control {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.result-info-box .info-text .info-link:hover {
|
||||
color: rgb(0, 52.3166666667, 129);
|
||||
color: rgb(0, 65.7, 162);
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.result-info-box .info-text {
|
||||
@@ -10521,15 +10559,14 @@ select.form-control {
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.account-recovery-card .form-actions, .account-recovery-card .form-actions-center {
|
||||
.account-recovery-card .form-actions {
|
||||
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 {
|
||||
.account-recovery-card .form-actions .cancel-button,
|
||||
.account-recovery-card .form-actions .submit-button {
|
||||
flex: 1;
|
||||
min-width: 144px;
|
||||
height: 40px;
|
||||
@@ -10537,11 +10574,11 @@ select.form-control {
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.account-recovery-card .form-actions .cancel-button, .account-recovery-card .form-actions-center .cancel-button {
|
||||
.account-recovery-card .form-actions .cancel-button {
|
||||
background: #e5e7eb;
|
||||
color: #5f666c;
|
||||
}
|
||||
.account-recovery-card .form-actions .submit-button, .account-recovery-card .form-actions-center .submit-button {
|
||||
.account-recovery-card .form-actions .submit-button {
|
||||
background: #0049b4;
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -12151,7 +12188,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.register-form-container .form-actions, .register-form-container .form-actions-center {
|
||||
.register-form-container .form-actions {
|
||||
justify-content: space-between;
|
||||
padding: 0 24px 24px;
|
||||
margin-top: 40px;
|
||||
@@ -12159,13 +12196,13 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
padding-top: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-form-container .form-actions, .register-form-container .form-actions-center {
|
||||
.register-form-container .form-actions {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.apikey-register-container > .form-actions, .apikey-register-container > .form-actions-center {
|
||||
.apikey-register-container > .form-actions {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
@@ -12175,7 +12212,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.apikey-register-container > .form-actions .btn-submit, .apikey-register-container > .form-actions-center .btn-submit {
|
||||
.apikey-register-container > .form-actions .btn-submit {
|
||||
width: 144px !important;
|
||||
height: 40px !important;
|
||||
min-height: 40px;
|
||||
@@ -12185,12 +12222,12 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
border-radius: 8px !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.apikey-register-container > .form-actions .btn-submit.btn-secondary, .apikey-register-container > .form-actions-center .btn-submit.btn-secondary {
|
||||
.apikey-register-container > .form-actions .btn-submit.btn-secondary {
|
||||
background-color: #e5e7eb !important;
|
||||
color: #5f666c !important;
|
||||
border: none !important;
|
||||
}
|
||||
.apikey-register-container > .form-actions .btn-submit.btn-primary, .apikey-register-container > .form-actions-center .btn-submit.btn-primary {
|
||||
.apikey-register-container > .form-actions .btn-submit.btn-primary {
|
||||
background-color: #0049b4 !important;
|
||||
color: #FFFFFF !important;
|
||||
border: none !important;
|
||||
@@ -13054,7 +13091,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.btn-copy-action:hover {
|
||||
background: rgb(122.5625, 195.3303571429, 224.4375);
|
||||
background: rgb(131.6625, 199.4303571429, 226.5375);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.btn-copy-action {
|
||||
@@ -13081,7 +13118,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.btn-view-secret:hover {
|
||||
background: rgb(20.6074766355, 140.8177570093, 224.3925233645);
|
||||
background: rgb(31.8897196262, 151.4130841121, 234.5102803738);
|
||||
}
|
||||
.btn-view-secret svg {
|
||||
width: 20px;
|
||||
@@ -13266,7 +13303,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.btn-copy-action:hover {
|
||||
background: rgb(122.5625, 195.3303571429, 224.4375);
|
||||
background: rgb(131.6625, 199.4303571429, 226.5375);
|
||||
}
|
||||
.btn-view-secret {
|
||||
width: 100% !important;
|
||||
@@ -13282,7 +13319,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
height: 16px;
|
||||
}
|
||||
.btn-view-secret:hover {
|
||||
background: rgb(20.6074766355, 140.8177570093, 224.3925233645);
|
||||
background: rgb(31.8897196262, 151.4130841121, 234.5102803738);
|
||||
}
|
||||
#revealedSecretBox {
|
||||
width: 100%;
|
||||
@@ -13792,7 +13829,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
.btn-notice-list:hover {
|
||||
background: rgb(214.5869565217, 217.6956521739, 223.9130434783);
|
||||
background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
|
||||
}
|
||||
.btn-notice-list:active {
|
||||
transform: scale(0.98);
|
||||
@@ -14352,7 +14389,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
.btn-inquiry-list:hover {
|
||||
background: rgb(214.5869565217, 217.6956521739, 223.9130434783);
|
||||
background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
|
||||
}
|
||||
.btn-inquiry-list:active {
|
||||
transform: scale(0.98);
|
||||
@@ -14385,7 +14422,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
.btn-inquiry-edit:hover {
|
||||
background: rgb(0, 62.6583333333, 154.5);
|
||||
background: rgb(0, 69.35, 171);
|
||||
}
|
||||
.btn-inquiry-edit:active {
|
||||
transform: scale(0.98);
|
||||
@@ -14418,7 +14455,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
.btn-inquiry-delete:hover {
|
||||
background: rgb(210.9493670886, 36.5506329114, 53.2594936709);
|
||||
background: rgb(217.9841772152, 41.3658227848, 58.2873417722);
|
||||
}
|
||||
.btn-inquiry-delete:active {
|
||||
transform: scale(0.98);
|
||||
@@ -14490,7 +14527,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.file-upload-inline .btn-remove-file-inline:hover {
|
||||
background: rgb(189.2151898734, 32.7848101266, 47.7721518987);
|
||||
background: rgb(209.4151898734, 36.2848101266, 52.8721518987);
|
||||
}
|
||||
.file-upload-inline .btn-remove-file-inline svg {
|
||||
width: 12px;
|
||||
@@ -14522,7 +14559,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
.file-upload-inline .btn-file-attach:hover {
|
||||
background: rgb(21.6317757009, 146.6504672897, 233.5682242991);
|
||||
background: rgb(37.3117757009, 153.9304672897, 235.0082242991);
|
||||
}
|
||||
.file-upload-inline .btn-file-attach svg {
|
||||
width: 22px;
|
||||
@@ -14558,7 +14595,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
.inquiry-form-container .form-row {
|
||||
padding: 16px 0;
|
||||
}
|
||||
.inquiry-form-container .form-actions, .inquiry-form-container .form-actions-center {
|
||||
.inquiry-form-container .form-actions {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
@@ -14567,7 +14604,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
padding: 32px 0 0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.inquiry-form-container .form-actions .btn, .inquiry-form-container .form-actions-center .btn {
|
||||
.inquiry-form-container .form-actions .btn {
|
||||
width: auto !important;
|
||||
min-width: 80px;
|
||||
padding: 0 16px;
|
||||
@@ -14576,21 +14613,21 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
border-radius: 8px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.inquiry-form-container .form-actions .btn-secondary, .inquiry-form-container .form-actions-center .btn-secondary {
|
||||
.inquiry-form-container .form-actions .btn-secondary {
|
||||
background: #E5E7EB;
|
||||
color: #5F666C;
|
||||
border: none;
|
||||
}
|
||||
.inquiry-form-container .form-actions .btn-secondary:hover, .inquiry-form-container .form-actions-center .btn-secondary:hover {
|
||||
background: rgb(214.5869565217, 217.6956521739, 223.9130434783);
|
||||
.inquiry-form-container .form-actions .btn-secondary:hover {
|
||||
background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
|
||||
}
|
||||
.inquiry-form-container .form-actions .btn-primary, .inquiry-form-container .form-actions-center .btn-primary {
|
||||
.inquiry-form-container .form-actions .btn-primary {
|
||||
background: #0049b4;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
}
|
||||
.inquiry-form-container .form-actions .btn-primary:hover, .inquiry-form-container .form-actions-center .btn-primary:hover {
|
||||
background: rgb(0, 62.6583333333, 154.5);
|
||||
.inquiry-form-container .form-actions .btn-primary:hover {
|
||||
background: rgb(0, 69.35, 171);
|
||||
}
|
||||
.inquiry-form-container .file-upload-inline .file-input-display {
|
||||
min-height: 50px;
|
||||
@@ -15698,7 +15735,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.org-file-remove:hover {
|
||||
background: #ff3838;
|
||||
background: rgb(255, 70.8, 70.8);
|
||||
}
|
||||
|
||||
.org-file-notice {
|
||||
@@ -16251,7 +16288,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
border: 1px solid #E2E8F0;
|
||||
padding: 32px;
|
||||
}
|
||||
.form-actions, .form-actions-center {
|
||||
.form-actions {
|
||||
display: none;
|
||||
}
|
||||
.file-upload-wrapper .file-upload-btn,
|
||||
@@ -16531,7 +16568,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
.status-indicator.status-active {
|
||||
background-color: rgba(107, 207, 127, 0.1);
|
||||
color: rgb(68.4897959184, 194.5102040816, 93.693877551);
|
||||
color: rgb(83.2897959184, 199.3102040816, 106.493877551);
|
||||
}
|
||||
.status-indicator.status-active .status-dot {
|
||||
background-color: #6BCF7F;
|
||||
@@ -16958,10 +16995,10 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
.org-register-container {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
.org-register-container .common-title-bar, .org-register-container .register-title-bar, .org-register-container .app-list-title-section, .org-register-container .user-management-container .table-controls, .user-management-container .org-register-container .table-controls {
|
||||
.org-register-container .common-title-bar, .org-register-container .user-management-container .table-controls, .user-management-container .org-register-container .table-controls {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.org-register-container .common-title-bar h3, .org-register-container .register-title-bar h3, .org-register-container .app-list-title-section h3, .org-register-container .user-management-container .table-controls h3, .user-management-container .org-register-container .table-controls h3 {
|
||||
.org-register-container .common-title-bar h3, .org-register-container .user-management-container .table-controls h3, .user-management-container .org-register-container .table-controls h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.org-register-container .register-form-container {
|
||||
@@ -16970,7 +17007,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.org-register-container .form-actions, .org-register-container .form-actions-center {
|
||||
.org-register-container .form-actions {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
@@ -16978,12 +17015,12 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
padding: 32px 0 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
.org-register-container .form-actions .form-actions-buttons, .org-register-container .form-actions-center .form-actions-buttons {
|
||||
.org-register-container .form-actions .form-actions-buttons {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.org-register-container .form-actions .form-actions-buttons .btn, .org-register-container .form-actions-center .form-actions-buttons .btn {
|
||||
.org-register-container .form-actions .form-actions-buttons .btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -17428,7 +17465,7 @@ body.commission-print-page .btn-primary:hover {
|
||||
padding: 20px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.terms-container .common-title-bar, .terms-container .register-title-bar, .terms-container .app-list-title-section, .terms-container .user-management-container .table-controls, .user-management-container .terms-container .table-controls {
|
||||
.terms-container .common-title-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -18283,7 +18320,7 @@ body.commission-print-page .btn-primary:hover {
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.signup-guide__btn:hover {
|
||||
background: rgb(0, 52.3166666667, 129);
|
||||
background: rgb(0, 65.7, 162);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.signup-guide__btn:active {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,22 @@
|
||||
// Color functions compatibility layer for Dart Sass 3.0.0
|
||||
// Replaces deprecated global darken() function
|
||||
|
||||
@use 'sass:color';
|
||||
@use 'sass:math';
|
||||
@use 'variables' as *;
|
||||
|
||||
/// Darken a color by reducing lightness
|
||||
/// @param {Color} $color - The color to darken
|
||||
/// @param {Number} $amount - The amount to darken (percentage)
|
||||
/// @return {Color} - The darkened color
|
||||
@function darken($color, $amount) {
|
||||
@return color.scale($color, $lightness: -$amount);
|
||||
}
|
||||
|
||||
/// Lighten a color by increasing lightness
|
||||
/// @param {Color} $color - The color to lighten
|
||||
/// @param {Number} $amount - The amount to lighten (percentage)
|
||||
/// @return {Color} - The lightened color
|
||||
@function lighten($color, $amount) {
|
||||
@return color.scale($color, $lightness: $amount);
|
||||
}
|
||||
@@ -2,6 +2,8 @@
|
||||
// This file contains all application-wide SASS mixins
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@use 'variables' as *;
|
||||
|
||||
// Media query mixins
|
||||
@mixin respond-to($breakpoint) {
|
||||
@if $breakpoint == 'xs' {
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Animation keyframes and utilities
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
@font-face {
|
||||
font-family: 'Spoqa Han Sans Neo';
|
||||
font-weight: 700;
|
||||
@@ -63,4 +67,4 @@
|
||||
src:url('/font/kjb/HGGGothicssi80g.woff') format('woff'),
|
||||
url('/font/kjb/HGGGothicssi80g.woff2') format('woff2'),
|
||||
url('/font/kjb/HGGGothicssi80g.ttf') format('truetype');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Reset and normalize styles
|
||||
// -----------------------------------------------------------------------------
|
||||
@@ -97,4 +101,4 @@ section, summary {
|
||||
::-moz-selection {
|
||||
background-color: rgba($primary-blue, 0.2);
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Basic typography styles
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Utility classes
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Accordion Component - FAQ and Collapsible Sections
|
||||
// Figma Design: node 984-2146
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Alert Components
|
||||
// Used in: Form validation, system messages, notifications
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
@charset "utf-8";
|
||||
|
||||
// =============================================================================
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Badge Component Styles - Status badges and labels
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Breadcrumb Navigation Component
|
||||
// Based on Figma: node 1339-3649
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Button styles - Modern vibrant design
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Card styles - Modern vibrant design
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// CTA (Call to Action) section styles
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Form styles
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Header Authentication Component Styles
|
||||
// Login/Logout button groups and user profile dropdown
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Modal styles - KJBank Design (Figma node 985:1912)
|
||||
// Close button positioned outside the modal (top-right)
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Navigation component styles
|
||||
// -----------------------------------------------------------------------------
|
||||
@@ -236,4 +240,4 @@
|
||||
padding: 0 $spacing-sm;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// Page Title Banner Component
|
||||
// Reusable banner for page titles across the portal
|
||||
|
||||
@import '../abstracts/variables';
|
||||
@import '../abstracts/mixins';
|
||||
|
||||
.page-title-banner {
|
||||
background: #E9F8FF;
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Pagination Component
|
||||
// Based on Figma design: node-id=985-1102
|
||||
@@ -99,4 +103,4 @@ $pagination-text-disabled: #adb5bd;
|
||||
justify-content: center;
|
||||
padding: $spacing-lg 0;
|
||||
margin-top: $spacing-lg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Partners section styles
|
||||
// -----------------------------------------------------------------------------
|
||||
@@ -5,4 +9,4 @@
|
||||
.partners {
|
||||
padding: $spacing-5xl 0;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// ============================================
|
||||
// Password Input Popup Component
|
||||
// Extends base modal styles from _modals.scss
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Table Component Styles - Reusable table designs
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// Test environment notice styles
|
||||
.test-env-notice {
|
||||
margin-top: 8px;
|
||||
padding: 12px 16px;
|
||||
background-color: #FFF4E6;
|
||||
border: 1px solid #FFB84D;
|
||||
border-radius: 4px;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&__text-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #E65100;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 4px 0 0 0;
|
||||
font-size: 13px;
|
||||
color: #5D4037;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__auth-code {
|
||||
color: #E65100;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Container and section styles
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Footer Styles - Figma Design Implementation
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Grid system - Modern responsive layout
|
||||
// -----------------------------------------------------------------------------
|
||||
@@ -295,4 +299,4 @@
|
||||
@include respond-to('md') {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Header styles - Modern & Responsive Design
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,73 +1,76 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// Main SASS Entry Point - Version 2 (Modern Vibrant Design)
|
||||
// Based on design/styles-v2.css
|
||||
// Dart Sass 3.0.0 compatible with @use instead of @import
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@charset "utf-8";
|
||||
|
||||
// 1. Configuration and helpers (no CSS output)
|
||||
@import 'abstracts/variables';
|
||||
@import 'abstracts/mixins';
|
||||
@use 'abstracts/variables' as *;
|
||||
@use 'abstracts/color-functions' as *; // Dart Sass 3.0.0 compatibility
|
||||
@use 'abstracts/mixins' as *;
|
||||
|
||||
// 2. Base styles
|
||||
@import 'base/reset';
|
||||
@import 'base/typography';
|
||||
@import 'base/animations';
|
||||
@import "base/kjb-font";
|
||||
@use 'base/reset' as *;
|
||||
@use 'base/typography' as *;
|
||||
@use 'base/animations' as *;
|
||||
@use 'base/kjb-font' as *;
|
||||
|
||||
// 3. Layout
|
||||
@import 'layout/header';
|
||||
@import 'layout/footer';
|
||||
@import 'layout/grid';
|
||||
@import 'layout/container';
|
||||
@use 'layout/header' as *;
|
||||
@use 'layout/footer' as *;
|
||||
@use 'layout/grid' as *;
|
||||
@use 'layout/container' as *;
|
||||
|
||||
// 4. Components
|
||||
@import 'components/buttons';
|
||||
@import 'components/badges';
|
||||
@import 'components/cards';
|
||||
@import 'components/apikey-common';
|
||||
@import 'components/forms';
|
||||
@import 'components/modals';
|
||||
@import 'components/navigation';
|
||||
@import 'components/partners';
|
||||
@import 'components/cta';
|
||||
@import 'components/password-popup';
|
||||
@import 'components/header-auth';
|
||||
@import 'components/tables';
|
||||
@import 'components/accordion';
|
||||
@import 'components/page-title-banner';
|
||||
@import 'components/alerts';
|
||||
@import 'components/pagination';
|
||||
@import 'components/breadcrumb';
|
||||
@use 'components/buttons' as *;
|
||||
@use 'components/badges' as *;
|
||||
@use 'components/cards' as *;
|
||||
@use 'components/apikey-common' as *;
|
||||
@use 'components/forms' as *;
|
||||
@use 'components/modals' as *;
|
||||
@use 'components/navigation' as *;
|
||||
@use 'components/partners' as *;
|
||||
@use 'components/cta' as *;
|
||||
@use 'components/password-popup' as *;
|
||||
@use 'components/header-auth' as *;
|
||||
@use 'components/tables' as *;
|
||||
@use 'components/accordion' as *;
|
||||
@use 'components/page-title-banner' as *;
|
||||
@use 'components/alerts' as *;
|
||||
@use 'components/pagination' as *;
|
||||
@use 'components/breadcrumb' as *;
|
||||
@use 'components/test-env-notice' as *;
|
||||
|
||||
// 5. Page-specific styles
|
||||
@import 'pages/index';
|
||||
@import 'pages/home';
|
||||
@import 'pages/api-portal';
|
||||
@import 'pages/api-market';
|
||||
@import 'pages/documentation';
|
||||
@import 'pages/login';
|
||||
@import 'pages/account-recovery';
|
||||
@import 'pages/signup-selection';
|
||||
@import 'pages/mypage';
|
||||
@import 'pages/apikey-register';
|
||||
@import 'pages/apikey-detail';
|
||||
@import 'pages/apikey-list';
|
||||
@import 'pages/notice';
|
||||
@import 'pages/inquiry';
|
||||
@import 'pages/org-register';
|
||||
@import 'pages/partnership';
|
||||
@import 'pages/user-management';
|
||||
@import 'pages/commission';
|
||||
@import 'pages/terms-agreements';
|
||||
@import 'pages/service';
|
||||
@import 'pages/api-statistics';
|
||||
@use 'pages/index' as *;
|
||||
@use 'pages/home' as *;
|
||||
@use 'pages/api-portal' as *;
|
||||
@use 'pages/api-market' as *;
|
||||
@use 'pages/documentation' as *;
|
||||
@use 'pages/login' as *;
|
||||
@use 'pages/account-recovery' as *;
|
||||
@use 'pages/signup-selection' as *;
|
||||
@use 'pages/mypage' as *;
|
||||
@use 'pages/apikey-register' as *;
|
||||
@use 'pages/apikey-detail' as *;
|
||||
@use 'pages/apikey-list' as *;
|
||||
@use 'pages/notice' as *;
|
||||
@use 'pages/inquiry' as *;
|
||||
@use 'pages/org-register' as *;
|
||||
@use 'pages/partnership' as *;
|
||||
@use 'pages/user-management' as *;
|
||||
@use 'pages/commission' as *;
|
||||
@use 'pages/terms-agreements' as *;
|
||||
@use 'pages/service' as *;
|
||||
@use 'pages/api-statistics' as *;
|
||||
|
||||
// 6. Themes
|
||||
@import 'themes/dark';
|
||||
@use 'themes/dark' as *;
|
||||
|
||||
// 7. Utilities (should be last)
|
||||
@import 'base/utilities';
|
||||
@use 'base/utilities' as *;
|
||||
|
||||
// 8. Vendor overrides
|
||||
@import 'vendors/overrides';
|
||||
@use 'vendors/overrides' as *;
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Account Recovery Page Styles (Find ID / Reset Password) - Figma: 1029-2249
|
||||
// Matches terms_agreements.html tab design for consistency
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// API Market Page - Modern Sidebar + Card Grid Layout
|
||||
// Reference: design/api-market.html
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// API Portal page specific styles
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.api-portal-page {
|
||||
// Any API portal-specific styles go here
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// API Statistics Page Styles
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
@use '../components/apikey-common' as *;
|
||||
|
||||
@charset "utf-8";
|
||||
|
||||
// ====================================
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
@use '../components/apikey-common' as *;
|
||||
|
||||
@charset "utf-8";
|
||||
|
||||
// ====================================
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
@use '../components/apikey-common' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// API Key Registration Wizard Styles
|
||||
// Reference: apps/mypage/apiKeyRegisterStep1.html, Step2, Step3
|
||||
@@ -2159,5 +2164,3 @@ input[type="checkbox"]:checked + .custom-checkbox {
|
||||
}
|
||||
|
||||
// .compound-input and .section-divider moved to components/_forms.scss
|
||||
|
||||
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// Commission Pages Styles
|
||||
// 수수료 관리 및 청구서 출력 페이지 스타일
|
||||
|
||||
@import '../abstracts/variables';
|
||||
@import '../abstracts/mixins';
|
||||
|
||||
// ==================== Commission Management Page ====================
|
||||
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Documentation page specific styles
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.documentation-page {
|
||||
// Any documentation-specific styles go here
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Home page specific styles
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.home-page {
|
||||
// Any home-specific styles go here
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Hero Carousel Section - Figma Design
|
||||
// -----------------------------------------------------------------------------
|
||||
@@ -2125,4 +2129,3 @@
|
||||
background: #DDDDDD;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Inquiry (Q&A) Pages - List, Detail, and Form Views
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Login Page Styles - Figma Design Implementation
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// MyPage Styles
|
||||
// Used in: mypage profile pages (updateCorporateManager, updatePersonalUser, etc.)
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Notice Pages - List and Detail Views
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
@use '../components/apikey-common' as *;
|
||||
|
||||
// Organization Registration Page Styles
|
||||
// Modern design for corporate registration flow
|
||||
|
||||
@import '../abstracts/variables';
|
||||
@import '../abstracts/mixins';
|
||||
|
||||
// Main Registration Container
|
||||
.org-register-page {
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Partnership Form Page - Modern Design
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Service Introduction Page Styles
|
||||
// Figma Design 기반 - 광주은행 오픈뱅크 플랫폼 소개 페이지
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Signup Selection Page Styles - Figma Design Implementation
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Terms and Agreements Page - Modern Design (Figma: 3003-1988)
|
||||
// 이용약관 및 개인정보처리방침 페이지
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// User Management Pages - Modern Card-Based Layout
|
||||
// Styles for user list and user detail pages
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Dark theme styles (optional)
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// Dark theme variables can be defined here
|
||||
// This file can be left empty if dark theme is not needed yet
|
||||
// This file can be left empty if dark theme is not needed yet
|
||||
|
||||
+5
-1
@@ -1,6 +1,10 @@
|
||||
@use '../abstracts/variables' as *;
|
||||
@use '../abstracts/color-functions' as *;
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Vendor library overrides
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// Place any third-party library style overrides here
|
||||
// This file can be left empty if no vendor libraries are used
|
||||
// This file can be left empty if no vendor libraries are used
|
||||
|
||||
@@ -69,6 +69,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 테스트 환경 안내 메시지 -->
|
||||
<div class="form-group">
|
||||
<th:block th:replace="~{fragment/test-env-auth-notice :: smsNotice}"></th:block>
|
||||
</div>
|
||||
|
||||
<!-- Auth Number Input -->
|
||||
<div class="form-group auth-number-group" id="authNumberGroup" style="display: none;">
|
||||
<label for="authNumber" class="form-label">인증번호 입력<span class="required-badge">필수</span></label>
|
||||
@@ -187,6 +192,11 @@
|
||||
$('#loadingOverlay').fadeOut(200);
|
||||
|
||||
if (response.valid) {
|
||||
// 테스트 환경 인증번호 표시
|
||||
if (response.authNumber) {
|
||||
displayTestAuthNotice(response.authNumber);
|
||||
}
|
||||
|
||||
customPopups.showAlert(response.message || '인증번호가 발송되었습니다.', 'success');
|
||||
|
||||
// 휴대폰 번호 필드 비활성화
|
||||
@@ -295,6 +305,33 @@
|
||||
window.location.href = '/login';
|
||||
});
|
||||
|
||||
// 테스트 환경 안내 메시지 표시
|
||||
function displayTestAuthNotice(authNumber) {
|
||||
const noticeHtml = `
|
||||
<div class="test-env-notice" style="margin-top: 12px; padding: 12px 16px; background-color: #FFF4E6; border: 1px solid #FFB84D; border-radius: 4px;">
|
||||
<div class="test-env-notice__content" style="display: flex; align-items: flex-start; gap: 8px;">
|
||||
<svg class="test-env-notice__icon" style="flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px;" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z" fill="#FF9800"/>
|
||||
</svg>
|
||||
<div class="test-env-notice__text-container" style="flex: 1;">
|
||||
<p style="margin: 0; font-size: 14px; color: #E65100; font-weight: 500;">테스트 환경 안내</p>
|
||||
<p style="margin: 4px 0 0 0; font-size: 13px; color: #5D4037; line-height: 1.5;">
|
||||
현재 테스트 환경입니다. 실제로 SMS가 발송되지 않으며, 인증번호는
|
||||
<strong style="color: #E65100; font-family: monospace; font-size: 14px; font-weight: bold;">${authNumber}</strong>
|
||||
입니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 기존 안내 메시지 제거 후 새로 추가
|
||||
$('.test-env-notice').remove();
|
||||
$('<div class="test-auth-notice-container"></div>')
|
||||
.html(noticeHtml)
|
||||
.insertAfter($('.phone-input-group').closest('.form-group'));
|
||||
}
|
||||
|
||||
// 기존 휴대폰 번호 복원
|
||||
$(document).ready(function() {
|
||||
const savedMobileNumber = $('#mobileNumber').val();
|
||||
|
||||
@@ -82,6 +82,16 @@
|
||||
</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">
|
||||
<p class="title w_tit">
|
||||
@@ -236,8 +246,45 @@
|
||||
countdownInterval = setInterval(updateRemainingTime, 1000);
|
||||
}
|
||||
|
||||
function displayTestAuthNotice(authNumber) {
|
||||
const noticeHtml = `
|
||||
<div class="test-env-notice" style="margin-top: 12px; padding: 12px 16px; background-color: #FFF4E6; border: 1px solid #FFB84D; border-radius: 4px;">
|
||||
<div class="test-env-notice__content" style="display: flex; align-items: flex-start; gap: 8px;">
|
||||
<svg class="test-env-notice__icon" style="flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px;" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z" fill="#FF9800"/>
|
||||
</svg>
|
||||
<div class="test-env-notice__text-container" style="flex: 1;">
|
||||
<p style="margin: 0; font-size: 14px; color: #E65100; font-weight: 500;">테스트 환경 안내</p>
|
||||
<p style="margin: 4px 0 0 0; font-size: 13px; color: #5D4037; line-height: 1.5;">
|
||||
현재 테스트 환경입니다. 실제로 SMS가 발송되지 않으며, 인증번호는
|
||||
<strong style="color: #E65100; font-family: monospace; font-size: 14px; font-weight: bold;">${authNumber}</strong>
|
||||
입니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 기존 안내 메시지 제거
|
||||
$('.test-env-notice').remove();
|
||||
|
||||
// 인증번호 입력 container 바로 앞에 안내 메시지 삽입
|
||||
const authNumberContainer = document.getElementById('authNumberContainer');
|
||||
if (authNumberContainer) {
|
||||
const noticeDiv = document.createElement('div');
|
||||
noticeDiv.className = 'test-auth-notice-container info1 pt28';
|
||||
noticeDiv.innerHTML = `<div class="info_line"><div class="info_box1">${noticeHtml}</div></div>`;
|
||||
authNumberContainer.parentNode.insertBefore(noticeDiv, authNumberContainer);
|
||||
}
|
||||
}
|
||||
|
||||
function handleAuthNumberRequest(response) {
|
||||
if (response.valid) {
|
||||
// 테스트 환경 인증번호 표시
|
||||
if (response.authNumber) {
|
||||
displayTestAuthNotice(response.authNumber);
|
||||
}
|
||||
|
||||
// Disable mobile number related fields
|
||||
let form = $('#accountForm');
|
||||
let mobilePrefix = form.find('.select_mobile_prefix');
|
||||
|
||||
@@ -88,6 +88,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 테스트 환경 안내 메시지 -->
|
||||
<div class="form-group">
|
||||
<th:block th:replace="~{fragment/test-env-auth-notice :: smsNotice}"></th:block>
|
||||
</div>
|
||||
|
||||
<!-- Auth Number Input -->
|
||||
<div class="form-group auth-number-group" id="authNumberGroup" style="display: none;">
|
||||
<label for="authNumber" class="form-label">인증번호 입력<span class="required-badge">필수</span></label>
|
||||
@@ -228,6 +233,11 @@
|
||||
$('#loadingOverlay').fadeOut(200);
|
||||
|
||||
if (response.valid) {
|
||||
// 테스트 환경 인증번호 표시
|
||||
if (response.authNumber) {
|
||||
displayTestAuthNotice(response.authNumber);
|
||||
}
|
||||
|
||||
customPopups.showAlert(response.message || '인증번호가 발송되었습니다.', 'success');
|
||||
|
||||
// 휴대폰 번호 필드 비활성화
|
||||
@@ -348,6 +358,33 @@
|
||||
window.location.href = '/login';
|
||||
});
|
||||
|
||||
// 테스트 환경 안내 메시지 표시
|
||||
function displayTestAuthNotice(authNumber) {
|
||||
const noticeHtml = `
|
||||
<div class="test-env-notice" style="margin-top: 12px; padding: 12px 16px; background-color: #FFF4E6; border: 1px solid #FFB84D; border-radius: 4px;">
|
||||
<div class="test-env-notice__content" style="display: flex; align-items: flex-start; gap: 8px;">
|
||||
<svg class="test-env-notice__icon" style="flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px;" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z" fill="#FF9800"/>
|
||||
</svg>
|
||||
<div class="test-env-notice__text-container" style="flex: 1;">
|
||||
<p style="margin: 0; font-size: 14px; color: #E65100; font-weight: 500;">테스트 환경 안내</p>
|
||||
<p style="margin: 4px 0 0 0; font-size: 13px; color: #5D4037; line-height: 1.5;">
|
||||
현재 테스트 환경입니다. 실제로 SMS가 발송되지 않으며, 인증번호는
|
||||
<strong style="color: #E65100; font-family: monospace; font-size: 14px; font-weight: bold;">${authNumber}</strong>
|
||||
입니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 기존 안내 메시지 제거 후 새로 추가
|
||||
$('.test-env-notice').remove();
|
||||
$('<div class="test-auth-notice-container"></div>')
|
||||
.html(noticeHtml)
|
||||
.insertAfter($('.phone-input-group').closest('.form-group'));
|
||||
}
|
||||
|
||||
// 기존 휴대폰 번호 복원
|
||||
$(document).ready(function() {
|
||||
const savedMobileNumber = $('#mobileNumber').val();
|
||||
|
||||
@@ -86,6 +86,15 @@
|
||||
</button>
|
||||
</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-label-wrapper label-offset">
|
||||
<span class="form-label-text">인증번호 입력</span> <span class="required-badge">필수</span>
|
||||
@@ -209,9 +218,47 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 테스트 환경 안내 메시지 표시
|
||||
function displayTestAuthNotice(authNumber) {
|
||||
const noticeHtml = `
|
||||
<div class="test-env-notice" style="margin-top: 12px; padding: 12px 16px; background-color: #FFF4E6; border: 1px solid #FFB84D; border-radius: 4px;">
|
||||
<div class="test-env-notice__content" style="display: flex; align-items: flex-start; gap: 8px;">
|
||||
<svg class="test-env-notice__icon" style="flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px;" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z" fill="#FF9800"/>
|
||||
</svg>
|
||||
<div class="test-env-notice__text-container" style="flex: 1;">
|
||||
<p style="margin: 0; font-size: 14px; color: #E65100; font-weight: 500;">테스트 환경 안내</p>
|
||||
<p style="margin: 4px 0 0 0; font-size: 13px; color: #5D4037; line-height: 1.5;">
|
||||
현재 테스트 환경입니다. 실제로 SMS가 발송되지 않으며, 인증번호는
|
||||
<strong style="color: #E65100; font-family: monospace; font-size: 14px; font-weight: bold;">${authNumber}</strong>
|
||||
입니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 기존 안내 메시지 제거
|
||||
$('.test-env-notice').remove();
|
||||
|
||||
// 인증번호 container의 이전 위치에 안내 메시지 삽입
|
||||
const authContainer = document.getElementById('authNumberContainer');
|
||||
if (authContainer) {
|
||||
const noticeDiv = document.createElement('div');
|
||||
noticeDiv.className = 'form-row';
|
||||
noticeDiv.innerHTML = `<div class="form-label-wrapper label-offset"></div><div class="form-field-wrapper">${noticeHtml}</div>`;
|
||||
authContainer.parentNode.insertBefore(noticeDiv, authContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// 인증번호 요청 후 처리 함수
|
||||
function handleAuthNumberRequest(response) {
|
||||
if (response.valid) {
|
||||
// 테스트 환경 인증번호 표시
|
||||
if (response.authNumber) {
|
||||
displayTestAuthNotice(response.authNumber);
|
||||
}
|
||||
|
||||
let authButton = document.querySelector(".btn_auth");
|
||||
|
||||
if (authButton) authButton.disabled = true;
|
||||
|
||||
@@ -33,6 +33,14 @@
|
||||
</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-label-wrapper label-offset">
|
||||
<span class="form-label-text"> </span>
|
||||
@@ -136,6 +144,39 @@
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 테스트 환경 안내 메시지 표시
|
||||
function displayTestAuthNotice(authNumber) {
|
||||
const noticeHtml = `
|
||||
<div class="test-env-notice" style="margin-top: 12px; padding: 12px 16px; background-color: #FFF4E6; border: 1px solid #FFB84D; border-radius: 4px;">
|
||||
<div class="test-env-notice__content" style="display: flex; align-items: flex-start; gap: 8px;">
|
||||
<svg class="test-env-notice__icon" style="flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px;" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z" fill="#FF9800"/>
|
||||
</svg>
|
||||
<div class="test-env-notice__text-container" style="flex: 1;">
|
||||
<p style="margin: 0; font-size: 14px; color: #E65100; font-weight: 500;">테스트 환경 안내</p>
|
||||
<p style="margin: 4px 0 0 0; font-size: 13px; color: #5D4037; line-height: 1.5;">
|
||||
현재 테스트 환경입니다. 실제로 이메일이 발송되지 않으며, 인증번호는
|
||||
<strong style="color: #E65100; font-family: monospace; font-size: 14px; font-weight: bold;">${authNumber}</strong>
|
||||
입니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 기존 안내 메시지 제거
|
||||
$('.test-env-notice').remove();
|
||||
|
||||
// authCodeContainer 바로 앞에 안내 메시지 삽입
|
||||
const authCodeContainer = document.getElementById('authCodeContainer');
|
||||
if (authCodeContainer) {
|
||||
const noticeDiv = document.createElement('div');
|
||||
noticeDiv.className = 'form-row';
|
||||
noticeDiv.innerHTML = `<div class="form-label-wrapper label-offset"></div><div class="form-field-wrapper">${noticeHtml}</div>`;
|
||||
authCodeContainer.parentNode.insertBefore(noticeDiv, authCodeContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// 인증코드 받기 버튼 클릭
|
||||
$('.btn_send_code').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
@@ -154,6 +195,11 @@
|
||||
[csrfHeaderName]: csrfToken
|
||||
},
|
||||
success: function(response) {
|
||||
// 테스트 환경 인증번호 표시
|
||||
if (response.authNumber) {
|
||||
displayTestAuthNotice(response.authNumber);
|
||||
}
|
||||
|
||||
customPopups.showAlert('인증코드가 이메일로 발송되었습니다.');
|
||||
$('#authCodeContainer').slideDown(300);
|
||||
$('#authCode').prop('readonly', false);
|
||||
|
||||
@@ -48,6 +48,14 @@
|
||||
</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;">
|
||||
<label class="org-form-label">
|
||||
@@ -181,9 +189,47 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 테스트 환경 안내 메시지 표시
|
||||
function displayTestAuthNotice(authNumber) {
|
||||
const noticeHtml = `
|
||||
<div class="test-env-notice" style="margin-top: 12px; padding: 12px 16px; background-color: #FFF4E6; border: 1px solid #FFB84D; border-radius: 4px;">
|
||||
<div class="test-env-notice__content" style="display: flex; align-items: flex-start; gap: 8px;">
|
||||
<svg class="test-env-notice__icon" style="flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px;" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z" fill="#FF9800"/>
|
||||
</svg>
|
||||
<div class="test-env-notice__text-container" style="flex: 1;">
|
||||
<p style="margin: 0; font-size: 14px; color: #E65100; font-weight: 500;">테스트 환경 안내</p>
|
||||
<p style="margin: 4px 0 0 0; font-size: 13px; color: #5D4037; line-height: 1.5;">
|
||||
현재 테스트 환경입니다. 실제로 SMS가 발송되지 않으며, 인증번호는
|
||||
<strong style="color: #E65100; font-family: monospace; font-size: 14px; font-weight: bold;">${authNumber}</strong>
|
||||
입니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 기존 안내 메시지 제거
|
||||
$('.test-env-notice').remove();
|
||||
|
||||
// 인증번호 container의 이전 위치에 안내 메시지 삽입
|
||||
const authContainer = document.getElementById('authNumberContainer');
|
||||
if (authContainer) {
|
||||
const noticeDiv = document.createElement('div');
|
||||
noticeDiv.className = 'org-form-group';
|
||||
noticeDiv.innerHTML = `<label class="org-form-label"></label><div class="org-form-input-wrapper">${noticeHtml}</div>`;
|
||||
authContainer.parentNode.insertBefore(noticeDiv, authContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// 인증번호 요청 후 처리 함수
|
||||
function handleAuthNumberRequest(response) {
|
||||
if (response.valid) {
|
||||
// 테스트 환경 인증번호 표시
|
||||
if (response.authNumber) {
|
||||
displayTestAuthNotice(response.authNumber);
|
||||
}
|
||||
|
||||
let authButton = document.querySelector('.btn_auth');
|
||||
let authContainer = document.getElementById('authNumberContainer');
|
||||
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<body>
|
||||
|
||||
<!-- SMS 인증번호 안내 메시지 -->
|
||||
<th:block th:fragment="smsNotice">
|
||||
<div th:if="${showTestAuthNotice and testAuthNumber != null}" class="test-env-notice">
|
||||
<div class="test-env-notice__content">
|
||||
<svg class="test-env-notice__icon" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z" fill="#FF9800"/>
|
||||
</svg>
|
||||
<div class="test-env-notice__text-container">
|
||||
<p class="test-env-notice__title">테스트 환경 안내</p>
|
||||
<p class="test-env-notice__description">
|
||||
현재 테스트 환경입니다. 실제로 SMS가 발송되지 않으며, 인증번호는
|
||||
<strong class="test-env-notice__auth-code" th:text="${testAuthNumber}">654321</strong>
|
||||
입니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
<!-- 이메일 인증번호 안내 메시지 -->
|
||||
<th:block th:fragment="emailNotice">
|
||||
<div th:if="${showTestAuthNotice and testAuthNumber != null}" class="test-env-notice">
|
||||
<div class="test-env-notice__content">
|
||||
<svg class="test-env-notice__icon" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z" fill="#FF9800"/>
|
||||
</svg>
|
||||
<div class="test-env-notice__text-container">
|
||||
<p class="test-env-notice__title">테스트 환경 안내</p>
|
||||
<p class="test-env-notice__description">
|
||||
현재 테스트 환경입니다. 실제로 이메일이 발송되지 않으며, 인증번호는
|
||||
<strong class="test-env-notice__auth-code" th:text="${testAuthNumber}">654321</strong>
|
||||
입니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user