테스트 환경 인증번호 동적 표시 및 Sass 3.0 호환성 개선

src/main/java/com/eactive/apim/portal/apps/auth/service/AuthNumberService.java

@@ -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);
 }

src/main/java/com/eactive/apim/portal/apps/auth/service/AuthNumberServiceImpl.java

@@ -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

src/main/java/com/eactive/apim/portal/apps/user/dto/ValidationResponse.java

@@ -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;

src/main/java/com/eactive/apim/portal/apps/user/facade/AuthFacadeImpl.java

@@ -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());

src/main/java/com/eactive/apim/portal/common/breadcrumb/GlobalControllerAdvice.java

@@ -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;
+    }
 }

src/main/java/com/eactive/apim/portal/config/PortalProperties.java

@@ -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();

src/main/resources/application-dev.yml

@@ -38,6 +38,7 @@ gateway:
 
 portal:
   auth-virtual-code: 654321
+  test-auth-notice-enabled: true
 
 proxy:
   targets:

src/main/resources/application-gf63.yml

@@ -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:

src/main/resources/application-kjb_rinjae.yml

@@ -38,6 +38,7 @@ portal:
   logging:
     log-path: C:\eactive\logs
   auth-virtual-code: 654321
+  test-auth-notice-enabled: true
 
 proxy:
   targets:

src/main/resources/application-prod.yml

@@ -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

src/main/resources/application-stage.yml

@@ -16,6 +16,7 @@ spring:
     cache: false
 
 portal:
+  test-auth-notice-enabled: true
 # 검증 단계에선 사용하지 않음
 #  auth-virtual-code: 654321
 

src/main/resources/application.yml

@@ -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

src/main/resources/static/css/main.css

@@ -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 .cancel-button,
-.account-recovery-card .form-actions .submit-button,
+.account-recovery-card .form-actions .submit-button {
-.account-recovery-card .form-actions-center .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 {
+.account-recovery-card .form-actions .cancel-button:hover {
-  background: rgb(214.5869565217, 217.6956521739, 223.9130434783);
+  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 {
+.account-recovery-card .form-actions .cancel-button:active {
-  background: rgb(200.1739130435, 204.3913043478, 212.8260869565);
+  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 {
+.account-recovery-card .form-actions .submit-button:hover {
-  background: rgb(0, 62.6583333333, 154.5);
+  background: rgb(0, 69.35, 171);
 }
-.account-recovery-card .form-actions .submit-button:active, .account-recovery-card .form-actions-center .submit-button:active {
+.account-recovery-card .form-actions .submit-button:active {
-  background: rgb(0, 52.3166666667, 129);
+  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 .cancel-button,
-  .account-recovery-card .form-actions .submit-button,
+  .account-recovery-card .form-actions .submit-button {
-  .account-recovery-card .form-actions-center .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 .cancel-button,
-  .account-recovery-card .form-actions .submit-button,
+  .account-recovery-card .form-actions .submit-button {
-  .account-recovery-card .form-actions-center .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 {
+  .inquiry-form-container .form-actions .btn-secondary:hover {
-    background: rgb(214.5869565217, 217.6956521739, 223.9130434783);
+    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 {
+  .inquiry-form-container .form-actions .btn-primary:hover {
-    background: rgb(0, 62.6583333333, 154.5);
+    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 {

src/main/resources/static/sass/abstracts/_color-functions.scss

@@ -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);
+}

src/main/resources/static/sass/abstracts/_mixins.scss

@@ -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' {

src/main/resources/static/sass/base/_animations.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Animation keyframes and utilities
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/base/_kjb-font.scss

@@ -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');
-}
+}

src/main/resources/static/sass/base/_reset.scss

@@ -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;
-}
+}

src/main/resources/static/sass/base/_typography.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Basic typography styles
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/base/_utilities.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Utility classes
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/components/_accordion.scss

@@ -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

src/main/resources/static/sass/components/_alerts.scss

@@ -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

src/main/resources/static/sass/components/_apikey-common.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 @charset "utf-8";
 
 // =============================================================================

src/main/resources/static/sass/components/_badges.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Badge Component Styles - Status badges and labels
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/components/_breadcrumb.scss

@@ -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

src/main/resources/static/sass/components/_buttons.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Button styles - Modern vibrant design
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/components/_cards.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Card styles - Modern vibrant design
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/components/_cta.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // CTA (Call to Action) section styles
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/components/_forms.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Form styles
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/components/_header-auth.scss

@@ -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

src/main/resources/static/sass/components/_modals.scss

@@ -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)

src/main/resources/static/sass/components/_navigation.scss

@@ -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;
   }
-}
+}

src/main/resources/static/sass/components/_page-title-banner.scss

@@ -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;

src/main/resources/static/sass/components/_pagination.scss

@@ -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;
-}
+}

src/main/resources/static/sass/components/_partners.scss

@@ -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;
-}
+}

src/main/resources/static/sass/components/_password-popup.scss

@@ -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

src/main/resources/static/sass/components/_tables.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Table Component Styles - Reusable table designs
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/components/_test-env-notice.scss

@@ -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;
+  }
+}

src/main/resources/static/sass/layout/_container.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Container and section styles
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/layout/_footer.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Footer Styles - Figma Design Implementation
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/layout/_grid.scss

@@ -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;
   }
-}
+}

src/main/resources/static/sass/layout/_header.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Header styles - Modern & Responsive Design
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/main.scss

@@ -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';
+@use 'abstracts/variables' as *;
-@import 'abstracts/mixins';
+@use 'abstracts/color-functions' as *;  // Dart Sass 3.0.0 compatibility
+@use 'abstracts/mixins' as *;
 
 // 2. Base styles
-@import 'base/reset';
+@use 'base/reset' as *;
-@import 'base/typography';
+@use 'base/typography' as *;
-@import 'base/animations';
+@use 'base/animations' as *;
-@import "base/kjb-font";
+@use 'base/kjb-font' as *;
 
 // 3. Layout
-@import 'layout/header';
+@use 'layout/header' as *;
-@import 'layout/footer';
+@use 'layout/footer' as *;
-@import 'layout/grid';
+@use 'layout/grid' as *;
-@import 'layout/container';
+@use 'layout/container' as *;
 
 // 4. Components
-@import 'components/buttons';
+@use 'components/buttons' as *;
-@import 'components/badges';
+@use 'components/badges' as *;
-@import 'components/cards';
+@use 'components/cards' as *;
-@import 'components/apikey-common';
+@use 'components/apikey-common' as *;
-@import 'components/forms';
+@use 'components/forms' as *;
-@import 'components/modals';
+@use 'components/modals' as *;
-@import 'components/navigation';
+@use 'components/navigation' as *;
-@import 'components/partners';
+@use 'components/partners' as *;
-@import 'components/cta';
+@use 'components/cta' as *;
-@import 'components/password-popup';
+@use 'components/password-popup' as *;
-@import 'components/header-auth';
+@use 'components/header-auth' as *;
-@import 'components/tables';
+@use 'components/tables' as *;
-@import 'components/accordion';
+@use 'components/accordion' as *;
-@import 'components/page-title-banner';
+@use 'components/page-title-banner' as *;
-@import 'components/alerts';
+@use 'components/alerts' as *;
-@import 'components/pagination';
+@use 'components/pagination' as *;
-@import 'components/breadcrumb';
+@use 'components/breadcrumb' as *;
+@use 'components/test-env-notice' as *;
 
 // 5. Page-specific styles
-@import 'pages/index';
+@use 'pages/index' as *;
-@import 'pages/home';
+@use 'pages/home' as *;
-@import 'pages/api-portal';
+@use 'pages/api-portal' as *;
-@import 'pages/api-market';
+@use 'pages/api-market' as *;
-@import 'pages/documentation';
+@use 'pages/documentation' as *;
-@import 'pages/login';
+@use 'pages/login' as *;
-@import 'pages/account-recovery';
+@use 'pages/account-recovery' as *;
-@import 'pages/signup-selection';
+@use 'pages/signup-selection' as *;
-@import 'pages/mypage';
+@use 'pages/mypage' as *;
-@import 'pages/apikey-register';
+@use 'pages/apikey-register' as *;
-@import 'pages/apikey-detail';
+@use 'pages/apikey-detail' as *;
-@import 'pages/apikey-list';
+@use 'pages/apikey-list' as *;
-@import 'pages/notice';
+@use 'pages/notice' as *;
-@import 'pages/inquiry';
+@use 'pages/inquiry' as *;
-@import 'pages/org-register';
+@use 'pages/org-register' as *;
-@import 'pages/partnership';
+@use 'pages/partnership' as *;
-@import 'pages/user-management';
+@use 'pages/user-management' as *;
-@import 'pages/commission';
+@use 'pages/commission' as *;
-@import 'pages/terms-agreements';
+@use 'pages/terms-agreements' as *;
-@import 'pages/service';
+@use 'pages/service' as *;
-@import 'pages/api-statistics';
+@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 *;

src/main/resources/static/sass/pages/_account-recovery.scss

@@ -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

src/main/resources/static/sass/pages/_api-market.scss

@@ -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

src/main/resources/static/sass/pages/_api-portal.scss

@@ -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
-}
+}

src/main/resources/static/sass/pages/_api-statistics.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // API Statistics Page Styles
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/pages/_apikey-detail.scss

@@ -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";
 
 // ====================================

src/main/resources/static/sass/pages/_apikey-list.scss

@@ -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";
 
 // ====================================

src/main/resources/static/sass/pages/_apikey-register.scss

@@ -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
-
-

src/main/resources/static/sass/pages/_commission.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 ====================
 

src/main/resources/static/sass/pages/_documentation.scss

@@ -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
-}
+}

src/main/resources/static/sass/pages/_home.scss

@@ -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
-}
+}

src/main/resources/static/sass/pages/_index.scss

@@ -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;
   }
 }
-

src/main/resources/static/sass/pages/_inquiry.scss

@@ -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
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/pages/_login.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Login Page Styles - Figma Design Implementation
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/pages/_mypage.scss

@@ -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.)

src/main/resources/static/sass/pages/_notice.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Notice Pages - List and Detail Views
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/pages/_org-register.scss

@@ -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 {

src/main/resources/static/sass/pages/_partnership.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Partnership Form Page - Modern Design
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/pages/_service.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Service Introduction Page Styles
 // Figma Design 기반 - 광주은행 오픈뱅크 플랫폼 소개 페이지

src/main/resources/static/sass/pages/_signup-selection.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/color-functions' as *;
+@use '../abstracts/mixins' as *;
+
 // -----------------------------------------------------------------------------
 // Signup Selection Page Styles - Figma Design Implementation
 // -----------------------------------------------------------------------------

src/main/resources/static/sass/pages/_terms-agreements.scss

@@ -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)
 // 이용약관 및 개인정보처리방침 페이지

src/main/resources/static/sass/pages/_user-management.scss

@@ -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

src/main/resources/static/sass/themes/_dark.scss

@@ -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

src/main/resources/static/sass/vendors/_overrides.scss

@@ -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

src/main/resources/templates/views/apps/login/findId.html

@@ -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();

src/main/resources/templates/views/apps/login/inactiveAccountRecovery.html

@@ -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');

src/main/resources/templates/views/apps/login/resetPassword.html

@@ -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();

src/main/resources/templates/views/apps/mypage/components/commonUserInfo.html

@@ -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;

src/main/resources/templates/views/apps/mypage/verificationEmail.html

@@ -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">&nbsp;</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);

src/main/resources/templates/views/apps/register/components/newUserInfoForm.html

@@ -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');
 

src/main/resources/templates/views/fragment/test-env-auth-notice.html

@@ -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>