merge후 충돌 해결

2026-07-28 18:18:23 +09:00
parent 1f51c9b21e 929980c089
commit daff07c006
42 changed files with 807 additions and 209 deletions
@@ -40,7 +40,6 @@ gateway:

 portal:
 #  auth-virtual-code: 654321
-  test-auth-notice-enabled: true
  dev:
    # application.yml의 `page:` 트리(브레드크럼/메뉴 이름) 라이브 반영
    hot-reload-pages: true
@@ -28,9 +28,6 @@ spring:
  thymeleaf:
    cache: false

-portal:
-  test-auth-notice-enabled: false  # prod 환경: UI 안내 미표시
-
 app:
  resource-versioning:
    enabled: true
@@ -22,7 +22,6 @@ spring:
    cache: false

 portal:
-  test-auth-notice-enabled: true
 # 검증 단계에선 사용하지 않음
 #  auth-virtual-code: 654321
  dev:
@@ -112,7 +112,6 @@ portal:
  auth-ttl: 300
  auth:
    resend_limit_seconds: 30
-  test-auth-notice-enabled: true  # 기본값: true (대부분의 개발환경에서 UI 안내 표시)

  user-approval: true
  password-expiration-days: 90
@@ -1160,7 +1160,7 @@ hr {
  transition: all 0.3s ease;
 }
 .mobile-drawer .drawer-welcome .btn-drawer-login:hover {
-  background: rgb(0, 65.7, 162);
+  background: rgb(0%, 25.7647058824%, 63.5294117647%);
 }
 .mobile-drawer .drawer-welcome.authenticated {
  flex-direction: row;
@@ -2456,7 +2456,7 @@ hr {
  color: #FFFFFF;
 }
 .btn-success:hover {
-  background: rgb(83.2897959184, 199.3102040816, 106.493877551);
+  background: rgb(32.662665066%, 78.1608643457%, 41.762304922%);
  transform: translateY(-3px);
 }
 .btn-danger {
@@ -2464,7 +2464,7 @@ hr {
  color: #FFFFFF;
 }
 .btn-danger:hover {
-  background: rgb(255, 70.8, 70.8);
+  background: rgb(100%, 27.7647058824%, 27.7647058824%);
  transform: translateY(-3px);
 }
 .btn-ghost {
@@ -2730,7 +2730,7 @@ hr {
 .action-btn-delete:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
-  background: rgb(255, 88.9, 88.9);
+  background: rgb(100%, 34.862745098%, 34.862745098%);
 }
 .action-btn-delete:active {
  transform: translateY(0);
@@ -2848,7 +2848,7 @@ hr {
  background: #a4d6ea;
 }
 .btn-input-action.btn-change:hover {
-  background: rgb(131.6625, 199.4303571429, 226.5375);
+  background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
 }
@@ -2923,7 +2923,7 @@ hr {
  border: none;
 }
 .btn-action-primary:hover {
-  background: rgb(31.8731707317, 92.7219512195, 205.7268292683);
+  background: rgb(12.4992826399%, 36.3615494978%, 80.6771879484%);
  transform: translateY(-2px);
  color: #fff;
 }
@@ -2973,7 +2973,7 @@ hr {
 }
 .status-badge.status-processing {
  background: rgba(255, 217, 61, 0.1);
-  color: rgb(221.2, 177.8721649485, 0);
+  color: rgb(86.7450980392%, 69.7537901759%, 0%);
 }
 .status-badge.status-failed {
  background: rgba(255, 107, 107, 0.1);
@@ -3013,7 +3013,7 @@ hr {
 }
 .status-badge-header.status-processing {
  background: rgba(255, 217, 61, 0.1);
-  color: rgb(221.2, 177.8721649485, 0);
+  color: rgb(86.7450980392%, 69.7537901759%, 0%);
 }

 .badge-sm {
@@ -4201,7 +4201,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, 88.9, 88.9);
+  background: rgb(100%, 34.862745098%, 34.862745098%);
 }
 .file-upload-wrapper .file-remove-btn:active {
  transform: translateY(0);
@@ -4522,7 +4522,7 @@ select.form-control {
  transition: all 0.3s ease;
 }
 .form-actions--with-withdrawal .withdrawal-link:hover {
-  background: rgb(210.2090909091, 232.6045454545, 242.9409090909);
+  background: rgb(82.4349376114%, 91.2174688057%, 95.2709447415%);
 }
 .form-actions--with-withdrawal .withdrawal-link img {
  width: 22px;
@@ -4677,7 +4677,7 @@ select.form-control {
  text-decoration: underline;
 }
 .notice-content-box a:hover {
-  color: rgb(0, 65.7, 162);
+  color: rgb(0%, 25.7647058824%, 63.5294117647%);
 }

 .form-row--content .form-label-wrapper {
@@ -5611,7 +5611,7 @@ select.form-control {
  font-size: 16px;
 }
 .drawer-logout-btn:hover {
-  background: rgb(255, 70.8, 70.8);
+  background: rgb(100%, 27.7647058824%, 27.7647058824%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
 }
@@ -6324,7 +6324,7 @@ select.form-control {
  color: #64748b;
 }
 .list-table-btn--default:hover {
-  background-color: rgb(233.3571428571, 233.3571428571, 231.1928571429);
+  background-color: rgb(91.512605042%, 91.512605042%, 90.6638655462%);
 }
 .list-table-btn--primary {
  background-color: #ecf0fa;
@@ -6332,7 +6332,7 @@ select.form-control {
  color: #2a69de;
 }
 .list-table-btn--primary:hover {
-  background-color: rgb(216.7625, 224.8125, 244.9375);
+  background-color: rgb(85.0049019608%, 88.1617647059%, 96.0539215686%);
 }
 .list-table-btn--secondary {
  background-color: #f5f5f4;
@@ -6340,7 +6340,7 @@ select.form-control {
  color: #64748b;
 }
 .list-table-btn--secondary:hover {
-  background-color: rgb(233.3571428571, 233.3571428571, 231.1928571429);
+  background-color: rgb(91.512605042%, 91.512605042%, 90.6638655462%);
 }
 .list-table-btn--danger {
  background-color: #fbe7e9;
@@ -6348,7 +6348,7 @@ select.form-control {
  color: #bb1026;
 }
 .list-table-btn--danger:hover {
-  background-color: rgb(247.5571428571, 210.3428571429, 214.0642857143);
+  background-color: rgb(97.081232493%, 82.487394958%, 83.9467787115%);
 }

 .table-pagination {
@@ -6998,7 +6998,7 @@ select.form-control {
 .alert.alert-error {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
-  color: rgb(255, 70.8, 70.8);
+  color: rgb(100%, 27.7647058824%, 27.7647058824%);
  align-items: center;
 }
 .alert.alert-error svg {
@@ -7012,7 +7012,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(61.5183673469, 189.6816326531, 87.1510204082);
+  color: rgb(24.12484994%, 74.3849539816%, 34.1768707483%);
 }
 .alert.alert-info {
  background: rgba(0, 73, 180, 0.1);
@@ -7913,6 +7913,69 @@ button.djb-comment-submit:disabled {
    margin-bottom: 22px;
  }
 }
+.password-policy-checklist {
+  list-style: none;
+  padding: 0;
+  margin: 12px 0 0 0;
+}
+.password-policy-checklist li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  line-height: 20px;
+  margin-bottom: 6px;
+  transition: color 0.15s ease;
+}
+.password-policy-checklist li:last-child {
+  margin-bottom: 0;
+}
+.password-policy-checklist li .policy-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+}
+.password-policy-checklist li .policy-icon::before {
+  content: "•";
+}
+.password-policy-checklist li.is-idle {
+  color: #888;
+}
+.password-policy-checklist li.is-idle .policy-icon {
+  color: #b5b5b5;
+}
+.password-policy-checklist li.is-pass {
+  color: #1a8f4c;
+}
+.password-policy-checklist li.is-pass .policy-icon {
+  color: #1a8f4c;
+}
+.password-policy-checklist li.is-pass .policy-icon::before {
+  content: "✔";
+}
+.password-policy-checklist li.is-fail {
+  color: #d63a3a;
+}
+.password-policy-checklist li.is-fail .policy-icon {
+  color: #d63a3a;
+}
+.password-policy-checklist li.is-fail .policy-icon::before {
+  content: "✖";
+}
+
+.password-policy-note {
+  margin: 10px 0 0 0;
+  font-size: 14px;
+  line-height: 18px;
+  color: #888;
+}
+
 .hero-carousel-section {
  position: relative;
  width: 100%;
@@ -11931,10 +11994,10 @@ body.index-page-body {
  line-height: 20px;
 }
 .login-button:hover {
-  background: rgb(25.65, 70.3, 173.85);
+  background: rgb(10.0588235294%, 27.568627451%, 68.1764705882%);
 }
 .login-button:active {
-  background: rgb(24.3, 66.6, 164.7);
+  background: rgb(9.5294117647%, 26.1176470588%, 64.5882352941%);
 }
 .login-button:disabled {
  opacity: 0.6;
@@ -11977,10 +12040,10 @@ body.index-page-body {
  border-bottom-right-radius: 8px;
 }
 .login-links-container .link-btn:hover {
-  background: rgb(220.61, 227.85, 245.95);
+  background: rgb(86.5137254902%, 89.3529411765%, 96.4509803922%);
 }
 .login-links-container .link-btn:active {
-  background: rgb(205.22, 215.7, 241.9);
+  background: rgb(80.4784313725%, 84.5882352941%, 94.862745098%);
 }

 .login-alert {
@@ -12475,11 +12538,11 @@ body.index-page-body {
 }
 .auth-request-button:hover,
 .auth-verify-button:hover {
-  background: rgb(147.83125, 206.7151785714, 230.26875);
+  background: rgb(57.9730392157%, 81.0647759104%, 90.3014705882%);
 }
 .auth-request-button:active,
 .auth-verify-button:active {
-  background: rgb(131.6625, 199.4303571429, 226.5375);
+  background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
 }
 .auth-request-button:disabled,
 .auth-verify-button:disabled {
@@ -12528,20 +12591,20 @@ body.index-page-body {
  background: #e5e7eb;
 }
 .account-recovery-card .form-actions .cancel-button:hover {
-  background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
+  background: rgb(84.6615515772%, 85.8414322251%, 88.2011935209%);
 }
 .account-recovery-card .form-actions .cancel-button:active {
-  background: rgb(202.7739130435, 206.7913043478, 214.8260869565);
+  background: rgb(79.5191815857%, 81.094629156%, 84.2455242967%);
 }
 .account-recovery-card .form-actions .submit-button {
  color: #FFFFFF;
  background: #0049B4;
 }
 .account-recovery-card .form-actions .submit-button:hover {
-  background: rgb(0, 69.35, 171);
+  background: rgb(0%, 27.1960784314%, 67.0588235294%);
 }
 .account-recovery-card .form-actions .submit-button:active {
-  background: rgb(0, 65.7, 162);
+  background: rgb(0%, 25.7647058824%, 63.5294117647%);
 }
 .account-recovery-card .form-actions .submit-button:disabled {
  opacity: 0.6;
@@ -12750,7 +12813,7 @@ body.index-page-body {
  transition: color 0.3s ease;
 }
 .result-info-box .info-text .info-link:hover {
-  color: rgb(0, 65.7, 162);
+  color: rgb(0%, 25.7647058824%, 63.5294117647%);
 }
@media (max-width: 576px) {
  .result-info-box .info-text {
@@ -17967,7 +18030,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  transition: background 0.2s ease;
 }
 .btn-copy-action:hover {
-  background: rgb(131.6625, 199.4303571429, 226.5375);
+  background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
 }
@media (max-width: 768px) {
  .btn-copy-action {
@@ -17994,7 +18057,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  transition: background 0.2s ease;
 }
 .btn-view-secret:hover {
-  background: rgb(31.8897196262, 151.4130841121, 234.5102803738);
+  background: rgb(12.5057724024%, 59.377680044%, 91.9648158329%);
 }
 .btn-view-secret svg {
  width: 20px;
@@ -18179,7 +18242,7 @@ input[type=checkbox]:checked + .custom-checkbox {
    border-radius: 8px;
  }
  .btn-copy-action:hover {
-    background: rgb(131.6625, 199.4303571429, 226.5375);
+    background: rgb(51.6323529412%, 78.2079831933%, 88.8382352941%);
  }
  .btn-view-secret {
    width: 100% !important;
@@ -18195,7 +18258,7 @@ input[type=checkbox]:checked + .custom-checkbox {
    height: 16px;
  }
  .btn-view-secret:hover {
-    background: rgb(31.8897196262, 151.4130841121, 234.5102803738);
+    background: rgb(12.5057724024%, 59.377680044%, 91.9648158329%);
  }
  #revealedSecretBox {
    width: 100%;
@@ -18468,7 +18531,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  flex-shrink: 0;
 }
 .detail-wrap .dt-btn-copy:hover {
-  background: rgb(189.6, 230.0857142857, 255);
+  background: rgb(74.3529411765%, 90.2296918768%, 100%);
 }
 .detail-wrap .dt-btn-copy svg {
  color: #2a69de;
@@ -18645,7 +18708,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  transition: background 0.2s ease;
 }
 .detail-wrap .dt-btn-gray:hover {
-  background: rgb(170.6589473684, 183.4378947368, 193.6610526316);
+  background: rgb(66.9250773994%, 71.9364293086%, 75.9455108359%);
 }
 .detail-wrap .dt-btn-red {
  width: 156px;
@@ -18663,7 +18726,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  transition: background 0.2s ease;
 }
 .detail-wrap .dt-btn-red:hover {
-  background: rgb(255, 70.0915337423, 64.24);
+  background: rgb(100%, 27.4868759774%, 25.1921568627%);
 }
 .detail-wrap .dt-btn-blue {
  width: 156px;
@@ -20138,7 +20201,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  }
 }
 .btn-inquiry-list:hover {
-  background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
+  background: rgb(84.6615515772%, 85.8414322251%, 88.2011935209%);
 }
 .btn-inquiry-list:active {
  transform: scale(0.98);
@@ -20171,7 +20234,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  }
 }
 .btn-inquiry-edit:hover {
-  background: rgb(0, 69.35, 171);
+  background: rgb(0%, 27.1960784314%, 67.0588235294%);
 }
 .btn-inquiry-edit:active {
  transform: scale(0.98);
@@ -20204,7 +20267,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  }
 }
 .btn-inquiry-delete:hover {
-  background: rgb(217.9841772152, 41.3658227848, 58.2873417722);
+  background: rgb(85.4839910648%, 16.2218912882%, 22.8577810871%);
 }
 .btn-inquiry-delete:active {
  transform: scale(0.98);
@@ -20276,7 +20339,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  margin-left: 8px;
 }
 .file-upload-inline .btn-remove-file-inline:hover {
-  background: rgb(209.4151898734, 36.2848101266, 52.8721518987);
+  background: rgb(82.1236038719%, 14.2293373045%, 20.7341772152%);
 }
 .file-upload-inline .btn-remove-file-inline svg {
  width: 12px;
@@ -20308,7 +20371,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  }
 }
 .file-upload-inline .btn-file-attach:hover {
-  background: rgb(37.3117757009, 153.9304672897, 235.0082242991);
+  background: rgb(14.6320689023%, 60.3648891332%, 92.1600879604%);
 }
 .file-upload-inline .btn-file-attach svg {
  width: 22px;
@@ -20368,7 +20431,7 @@ input[type=checkbox]:checked + .custom-checkbox {
    border: none;
  }
  .inquiry-form-container .form-actions .btn-secondary:hover {
-    background: rgb(215.8869565217, 218.8956521739, 224.9130434783);
+    background: rgb(84.6615515772%, 85.8414322251%, 88.2011935209%);
  }
  .inquiry-form-container .form-actions .btn-primary {
    background: #0049b4;
@@ -20376,7 +20439,7 @@ input[type=checkbox]:checked + .custom-checkbox {
    border: none;
  }
  .inquiry-form-container .form-actions .btn-primary:hover {
-    background: rgb(0, 69.35, 171);
+    background: rgb(0%, 27.1960784314%, 67.0588235294%);
  }
  .inquiry-form-container .file-upload-inline .file-input-display {
    min-height: 50px;
@@ -21165,7 +21228,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  cursor: pointer;
 }
 .djb-board-write-container .form-actions .btn-submit:hover {
-  background-color: rgb(33.643902439, 97.8731707317, 217.156097561);
+  background-color: rgb(13.193687231%, 38.3816355811%, 85.1592539455%);
 }
@media (max-width: 768px) {
  .djb-board-write-container .form-actions .btn-submit {
@@ -21653,7 +21716,7 @@ input[type=checkbox]:checked + .custom-checkbox {
  transition: all 0.3s ease;
 }
 .org-file-remove:hover {
-  background: rgb(255, 70.8, 70.8);
+  background: rgb(100%, 27.7647058824%, 27.7647058824%);
 }

 .org-file-notice {
@@ -22664,7 +22727,7 @@ input[type=checkbox]:checked + .custom-checkbox {
 }
 .status-indicator.status-active {
  background-color: rgba(107, 207, 127, 0.1);
-  color: rgb(83.2897959184, 199.3102040816, 106.493877551);
+  color: rgb(32.662665066%, 78.1608643457%, 41.762304922%);
 }
 .status-indicator.status-active .status-dot {
  background-color: #6BCF7F;
@@ -672,9 +672,36 @@ const customPopups = {

        $('body').css('overflow', 'hidden');

+        // 열 때마다 사유/에러 초기화
+        $('#withdrawalReasonInput').val('');
+        $('#withdrawalReasonError').hide();
+        $('#withdrawalReasonInput').off('input.withdrawal').on('input.withdrawal', function () {
+            $('#withdrawalReasonError').hide();
+        });
+
        $('#withdrawalPopupConfirmButton').off('click').on('click', function () {
+            // 탈퇴 사유 필수 입력
+            var reason = $.trim($('#withdrawalReasonInput').val() || '');
+            if (!reason) {
+                $('#withdrawalReasonError').show();
+                $('#withdrawalReasonInput').focus();
+                return;
+            }
+            $('#withdrawalReasonHidden').val(reason);
+
            customPopups.hideWithdrawal();
-            $('#withdrawalForm').submit();
+
+            // step-up 2FA 활성 시: 인증 성공 후에만 제출
+            var twofaRequired = $('#withdrawalPopup').attr('data-twofa-required') === 'true';
+            if (twofaRequired && typeof TwoFactorAuth !== 'undefined') {
+                TwoFactorAuth.open({
+                    purpose: '/withdraw',
+                    onSuccess: function () { $('#withdrawalForm').submit(); },
+                    onCancel: function () { /* 사용자 취소 — 탈퇴 중단 */ }
+                });
+            } else {
+                $('#withdrawalForm').submit();
+            }
        });

        $('#withdrawalPopupCancelButton').off('click').on('click', function () {
@@ -47,6 +47,7 @@
@use 'components/djb-inquiry-comments' as *;
@use 'components/board-common' as *;
@use 'components/two-factor' as *;
+@use 'components/password-policy' as *;

 // 5. Page-specific styles
@use 'pages/index' as *;
@@ -32,7 +32,7 @@
          <div class="found-users-list">
            <div class="found-user-item" th:each="user, stat : ${foundUsers}">
              <div class="user-info">
-                <span class="user-email" th:text="${user.maskedEmailAddr}">te***@example.com</span>
+                <span class="user-email" th:text="${user.loginId}">test@example.com</span>
                <span class="user-date">
                  (<th:block th:text="${#temporals.format(user.createdDate, 'yyyy.MM.dd')}">2024.01.01</th:block> 가입)
                </span>
@@ -149,34 +149,21 @@
            });
        }

-        // 로그인 전 중복 접속 확인 → 중복 시 기존 세션 강제 로그아웃 여부 질의
-        function checkDuplicateAndLogin(form) {
-            var loginId = form.id.value;
-            $.ajax({
-                url: /*[[@{/api/session/check-duplicate}]]*/ '/api/session/check-duplicate',
-                type: 'POST',
-                data: { loginId: loginId },
-                success: function (data) {
-                    if (data && data.duplicateSession) {
-                        $('#loginLoading').removeClass('active');
-                        var msg = '해당 계정은 이미 다른 곳(' + data.ipAddress + ')에서 접속 중입니다.<br>'
-                            + '접속 시각: ' + data.loginTime + '<br><br>'
-                            + '기존 접속을 해제하고 로그인하시겠습니까?';
-                        customPopups.showConfirm(msg, function (confirmed) {
-                            if (confirmed) {
-                                $('#loginLoading').addClass('active');
-                                form.submit();
-                            }
-                        });
-                    } else {
-                        form.submit();
-                    }
-                },
-                error: function () {
-                    // 중복 체크 실패 시 로그인은 그대로 진행
-                    form.submit();
-                }
-            });
+        // 동시 접속 확인은 비밀번호 검증(1차 인증) 통과 후 서버가 안내한다
+        // (2FA pending 또는 /login?duplicate=1 대기 상태에서 duplicateInfo 모델로 수신).
+        function duplicateConfirmMessage(info) {
+            return '해당 계정은 이미 다른 곳(' + info.ipAddress + ')에서 접속 중입니다.<br>'
+                + '접속 시각: ' + info.loginTime + '<br><br>'
+                + '기존 접속을 해제하고 로그인하시겠습니까?';
+        }
+
+        // 세션 CSRF 헤더 (meta[name=_csrf]) — 인증 후 확인/취소 POST 용
+        function csrfHeaders() {
+            var t = document.querySelector('meta[name="_csrf"]');
+            var h = document.querySelector('meta[name="_csrf_header"]');
+            var headers = {};
+            headers[h ? h.getAttribute('content') : 'X-XSRF-TOKEN'] = t ? t.getAttribute('content') : '';
+            return headers;
        }

        function fnInit() {
@@ -242,7 +229,7 @@
                        customPopups.showAlert('[[#{login.passLengthShort}]]');
                    } else {
                        refreshCsrfAndThen(form, function () {
-                            checkDuplicateAndLogin(form);
+                            form.submit();
                        });
                    }
                }
@@ -260,9 +247,12 @@
                }
            });

-            // 로그인 2FA: 1차 인증 통과 후 pending 상태면 추가 인증 팝업 자동 오픈
+            // 1차 인증(비밀번호) 통과 후 흐름: [동시 접속 확인] → [2FA] 순서.
            var twoFactorPending = [[${twoFactorPending}]];
-            if (twoFactorPending && typeof TwoFactorAuth !== 'undefined') {
+            var duplicateConfirmPending = [[${duplicateConfirmPending}]];
+            var duplicateInfo = [[${duplicateInfo}]];
+
+            function openLoginTwoFactor() {
                TwoFactorAuth.open({
                    mode: 'login',
                    onSuccess: function (res) {
@@ -279,6 +269,53 @@
                });
            }

+            if (twoFactorPending && typeof TwoFactorAuth !== 'undefined') {
+                // 로그인 2FA pending: 동시 접속이 있으면 확인 후 2FA 팝업, 취소 시 로그인 포기
+                if (duplicateInfo) {
+                    customPopups.showConfirm(duplicateConfirmMessage(duplicateInfo), function (confirmed) {
+                        if (confirmed) {
+                            openLoginTwoFactor();
+                        } else {
+                            $.ajax({
+                                url: /*[[@{/auth/2fa/cancel}]]*/ '/auth/2fa/cancel',
+                                type: 'POST',
+                                headers: csrfHeaders(),
+                                data: { reason: 'CANCELLED' }
+                            });
+                            customPopups.showAlert('로그인이 취소되었습니다.');
+                        }
+                    });
+                } else {
+                    openLoginTwoFactor();
+                }
+            } else if (duplicateConfirmPending && duplicateInfo) {
+                // 2FA off + 동시 접속: 확인 시 서버가 로그인 확정(기존 접속 해제), 취소 시 포기
+                customPopups.showConfirm(duplicateConfirmMessage(duplicateInfo), function (confirmed) {
+                    var url = confirmed
+                        ? /*[[@{/login/duplicate/confirm}]]*/ '/login/duplicate/confirm'
+                        : /*[[@{/login/duplicate/cancel}]]*/ '/login/duplicate/cancel';
+                    $.ajax({
+                        url: url,
+                        type: 'POST',
+                        headers: csrfHeaders(),
+                        success: function (res) {
+                            if (confirmed) {
+                                if (res && res.valid && res.redirect) {
+                                    window.location.href = res.redirect;
+                                } else {
+                                    customPopups.showAlert((res && res.message) || '로그인 확인이 만료되었습니다. 다시 로그인해주세요.');
+                                }
+                            }
+                        },
+                        error: function () {
+                            if (confirmed) {
+                                customPopups.showAlert('로그인 처리 중 오류가 발생했습니다. 다시 로그인해주세요.');
+                            }
+                        }
+                    });
+                });
+            }
+
            fnInit();
        });
    </script>
@@ -143,13 +143,6 @@
                  </div>
                </div>

-                <!-- Call Back URL -->
-                <div class="s1-field">
-                  <label class="s1-label">Call Back URL</label>
-                  <input type="text" id="callbackUrl" name="callbackUrl" th:field="*{callbackUrl}" class="s1-input"
-                    placeholder="URL을 입력해 주세요.">
-                </div>
-
                <!-- 화이트 리스트 -->
                <div class="s1-field">
                  <label class="s1-label">화이트 리스트 <span class="s1-required">*</span></label>
@@ -357,7 +350,6 @@
        form.addEventListener('submit', function (e) {
          const name = document.getElementById('appName').value.trim();
          const desc = textarea.value.trim();
-          const url = document.getElementById('callbackUrl').value.trim();

          if (!name) {
            e.preventDefault();
@@ -372,15 +364,6 @@
            textarea.focus();
            return;
          }
-
-          if (url) {
-            try { new URL(url); } catch (_) {
-              e.preventDefault();
-              customPopups.showAlert('올바른 URL 형식이 아닙니다.\n예: https://example.com/callback');
-              document.getElementById('callbackUrl').focus();
-              return;
-            }
-          }
        });
      });
    </script>
@@ -111,6 +111,38 @@
      </div>
    </div>
  </div>
+
+  <script th:if="${error}" th:inline="javascript">
+    document.addEventListener('DOMContentLoaded', function () {
+      customPopups.showAlert(/*[[${error}]]*/ '');
+    });
+  </script>
+  <script th:inline="javascript">
+    // 반영 직전 2FA: twofaRequired 면 최종 저장 제출을 가로채 2FA 팝업 → 성공 시 실제 제출.
+    // api-selector.js 의 submit 리스너(선택 검증·hidden 동기화)가 먼저 실행된 뒤 동작한다.
+    // "이전" 버튼(btnPrevStep)은 form.submit() 직접 호출이라 submit 이벤트를 타지 않음 → 2FA 미적용.
+    document.addEventListener('DOMContentLoaded', function () {
+      var twofaRequired = /*[[${twofaRequired}]]*/ false;
+      if (!twofaRequired) return;
+      var form = document.getElementById('apiSelectorForm');
+      if (!form) return;
+
+      form.addEventListener('submit', function (e) {
+        // 앞선 리스너가 검증 실패로 막았거나(미선택 등) 이미 취소된 제출이면 개입하지 않는다.
+        if (e.defaultPrevented) return;
+        e.preventDefault();
+
+        if (typeof TwoFactorAuth === 'undefined') { form.submit(); return; }
+        TwoFactorAuth.open({
+          mode: 'stepup',
+          purpose: '/myapikey/modify/step2',
+          // form.submit() 은 submit 이벤트를 재발생시키지 않으므로 그대로 서버로 전송된다.
+          onSuccess: function () { form.submit(); },
+          onCancel: function () { /* 사용자 취소 — step2 유지 */ }
+        });
+      });
+    });
+  </script>
 </th:block>

 <!-- 화면 전체 오버레이/플로팅은 body 직속(pagePopups)으로 렌더 → wrapper transform·overflow 영향 없이 뷰포트 기준 중앙 정렬 -->
@@ -151,7 +151,7 @@
            </div>

            <div class="s3-message-wrapper">
-              <h1 class="s3-success-title">앱 수정이 완료되었습니다.</h1>
+              <h1 class="s3-success-title">앱 수정 신청이 완료되었습니다.</h1>
              <p class="s3-success-desc">
                <span class="s3-highlight">담당자 승인 후 변경 사항이 적용됩니다.</span>
                <br>
@@ -22,7 +22,6 @@

                    <form id="passwordChangeForm" th:action="@{/password/change}" method="post">
                        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
-
                        <div class="register-form-container">
                            <div class="info-notice-box">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4685ef"
@@ -31,7 +30,8 @@
                                    <path d="M12 16v-4"></path>
                                    <path d="M12 8h.01"></path>
                                </svg>
-                                <p>소중한 계정 보호를 위해 비밀번호를 변경해 주세요!</p>
+                                <p>소중한 계정 보호를 위해 비밀번호를 변경해 주세요!<br>
+                                    비밀번호 변경이 완료되면 자동으로 로그아웃되며, 새 비밀번호로 다시 로그인해야 합니다.</p>
                            </div>

                            <div class="form-row">
@@ -27,7 +27,10 @@
                <input type="hidden" name="registrationType" th:value="${registrationType}" />
                <input type="hidden" id="registrationScenario" name="registrationScenario" value="new" />
                <div id="email-validation" class="org-validation-message"></div>
-            </div>
+            <div id="emailTestNotice" class="test-env-notice"
+                 style="display: none; margin-top: 8px; padding: 10px 12px; background-color: #FFF4E6; border: 1px solid #FFB84D; border-radius: 4px; font-size: 13px; color: #5D4037; line-height: 1.5;"></div>
+            <input type="hidden" id="emailVerified" name="emailVerified" value="false"/>
+            <div id="email-auth-validation" class="org-validation-message"></div>
        </div>

        <!-- 이메일 인증 (중복체크 통과 후 노출) -->
@@ -48,8 +51,6 @@
                    </div>
                    <button type="button" class="btn-action-primary md" id="btnVerifyEmailCode">인증확인</button>
                </div>
-                <input type="hidden" id="emailVerified" name="emailVerified" value="false" />
-                <div id="email-auth-validation" class="org-validation-message"></div>
            </div>
        </div>
    </th:block>
@@ -239,6 +240,12 @@
                            setEmailAuthMsg('인증번호를 발송했습니다.', false);
                            btn.text('인증번호 재발송');
                            startEmailCodeTimer();
+                            // 테스트 환경(PTL_PROPERTY auth.test-notice.enabled)일 때만 인증번호 노출
+                            if (res.authNumber) {
+                                $('#emailTestNotice').html('테스트 환경입니다. 실제 이메일이 발송되지 않으며, 인증번호는 <strong style="color:#E65100; font-family:monospace; font-size:14px;">' + res.authNumber + '</strong> 입니다.').show();
+                            } else {
+                                $('#emailTestNotice').hide().empty();
+                            }
                        } else {
                            setEmailAuthMsg((res && res.message) || '발송에 실패했습니다.', true);
                        }
@@ -45,6 +45,8 @@
        </div>
        <button type="button" class="btn org-btn-check" id="btnVerifyEmailCode">인증확인</button>
      </div>
+      <div id="emailTestNotice" class="test-env-notice"
+           style="display: none; margin-top: 8px; padding: 10px 12px; background-color: #FFF4E6; border: 1px solid #FFB84D; border-radius: 4px; font-size: 13px; color: #5D4037; line-height: 1.5;"></div>
      <input type="hidden" id="emailVerified" name="emailVerified" value="false"/>
      <div id="email-auth-validation" class="org-validation-message"></div>
    </div>
@@ -122,8 +124,9 @@
            if (emailChangeForm) emailChangeForm.style.display = 'none';

            // 중복체크 통과 → 이메일 인증 UI 노출
+            // (block 지정 시 .org-form-group 의 display:flex 를 덮어써 라벨/입력이 세로로 깨짐 → '' 로 CSS flex 복원)
            var evRow = document.getElementById('emailVerifyRow');
-            if (evRow) evRow.style.display = 'block';
+            if (evRow) evRow.style.display = '';
            break;

          case "conversionOrChange":
@@ -296,6 +299,17 @@
                setEmailAuthMsg('인증번호를 발송했습니다.', false);
                btn.textContent = '인증번호 재발송';
                startEmailCodeTimer();
+                // 테스트 환경(PTL_PROPERTY auth.test-notice.enabled)일 때만 인증번호 노출
+                var notice = document.getElementById('emailTestNotice');
+                if (notice) {
+                  if (res.authNumber) {
+                    notice.innerHTML = '테스트 환경입니다. 실제 이메일이 발송되지 않으며, 인증번호는 <strong style="color:#E65100; font-family:monospace; font-size:14px;">' + res.authNumber + '</strong> 입니다.';
+                    notice.style.display = '';
+                  } else {
+                    notice.style.display = 'none';
+                    notice.innerHTML = '';
+                  }
+                }
              } else {
                setEmailAuthMsg((res && res.message) || '발송에 실패했습니다.', true);
              }
@@ -24,19 +24,15 @@
                <image id="image0_1130_6799" width="163" height="129" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
              </defs>
            </svg>
-            <h2 class="result-title" th:text="${registrationType == 'corporate'} ? '법인 신청이 완료 되었습니다.' : '회원가입 신청이 완료되었습니다.'">회원가입 신청이 완료되었습니다.</h2>
+            <h2 class="result-title" th:text="${registrationType == 'corporate'} ? '법인 신청이 완료 되었습니다.' : '회원가입이 완료되었습니다.'">회원가입이 완료되었습니다.</h2>
          </div>

          <!-- Info Box -->
-          <div class="result-info-box">
-            <p class="info-text" th:if="${registrationType == 'corporate'}">
+          <div class="result-info-box" th:if="${registrationType == 'corporate'}">
+            <p class="info-text">
              관리자의 확인 및 승인 이후<br>
              이용하실 수 있습니다.
            </p>
-            <p class="info-text" th:unless="${registrationType == 'corporate'}">
-              API Portal 서비스를 이용하기 위해서<br>
-              <strong>이메일 인증</strong>을 완료해 주세요.
-            </p>
          </div>
        </div>

@@ -1,5 +1,6 @@
 <!-- views/fragment/popup/withdrawalPopup.html -->
-<div th:fragment="withdrawalPopup" id="withdrawalPopup" style="display: none;">
+<div th:fragment="withdrawalPopup" id="withdrawalPopup" style="display: none;"
+     th:attr="data-twofa-required=${withdrawTwofaRequired}">
  <!-- Modal Backdrop -->
  <div class="modal-backdrop" id="withdrawalModalBackdrop"></div>

@@ -24,15 +25,25 @@
          <li>회원 탈퇴는 API Portal 사이트의 회원 탈퇴입니다.</li>
          <li>사용중인 API 서비스의 중지는 제휴 담당자를 통해 문의 주시기 바랍니다.</li>
        </ul>
+        <div style="margin-top: 16px;">
+          <label for="withdrawalReasonInput" style="display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #334155;">
+            탈퇴 사유 <span style="color: #d63a3a;">(필수)</span>
+          </label>
+          <textarea id="withdrawalReasonInput" maxlength="200" rows="3"
+                    placeholder="탈퇴 사유를 입력해 주세요. (최대 200자)"
+                    style="width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 6px; font-size: 14px; line-height: 1.5; resize: vertical;"></textarea>
+          <p id="withdrawalReasonError" style="display: none; margin: 6px 0 0 0; font-size: 13px; color: #d63a3a;">탈퇴 사유를 입력해 주세요.</p>
+        </div>
        <form id="withdrawalForm" th:action="@{/withdraw}" method="POST" style="display:none;">
          <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
+          <input type="hidden" name="withdrawReason" id="withdrawalReasonHidden"/>
        </form>
      </div>

      <!-- Modal Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="withdrawalPopupCancelButton">취소</button>
-        <button type="button" class="btn btn-primary" id="withdrawalPopupConfirmButton">탈퇴신청</button>
+        <button type="button" class="btn btn-primary" id="withdrawalPopupConfirmButton">탈퇴하기</button>
      </div>

    </div>