BLOCK-UI js, css 재수정

src/main/webapp/resources/xit/xit-common.js

@@ -76,19 +76,15 @@ $(document).ajaxError( function( event, jqxhr, settings, exception ){
 });
 
 /* Ajax Progress Block UI 설정 */
-// Progress Block UI HTML 생성 및 추가
+// Progress Block UI 초기화
 $(document).ready(function() {
-    // Progress Block UI HTML을 body에 추가
-    if ($('#ajax-progress-overlay').length === 0) {
-        var progressHtml = 
-            '<div id="ajax-progress-overlay" class="ajax-progress-overlay">' +
-                '<div class="ajax-progress-content">' +
-                    '<div class="ajax-progress-spinner"></div>' +
-                    '<p class="ajax-progress-text">처리 중입니다...</p>' +
-                '</div>' +
-            '</div>';
-        $('body').append(progressHtml);
-    }
+    // Progress Block UI 생성
+    createProgressBlockUI();
+    console.log('[Ajax Block UI] 초기화 완료');
+
+    // activeAjaxCount 리셋 (페이지 로드 시)
+    activeAjaxCount = 0;
+    console.log('[Ajax Block UI] Ajax 카운터 초기화:', activeAjaxCount);
 });
 
 // Ajax 활성 요청 카운터 (동시 Ajax 요청 처리를 위함)
@@ -96,35 +92,92 @@ var activeAjaxCount = 0;
 
 // Ajax 시작 시 Progress Block UI 표시
 $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
+    console.log('[Ajax Block UI] Ajax 시작:', ajaxOptions.url);
 
-    //사용자계정은 block ui 설정안함
-    if (ajaxOptions.url && ajaxOptions.url.includes('/system/user/duplicateCheck.ajax') !== -1) {
+    // Block UI 제외 대상 URL 체크
+    if (ajaxOptions.url && ajaxOptions.url.indexOf('/system/user/duplicateCheck.ajax') !== -1) {
+        console.log('[Ajax Block UI] 제외 대상 URL, Block UI 표시 안함');
         return;
     }
 
     activeAjaxCount++;
+    console.log('[Ajax Block UI] 활성 Ajax 카운트 증가:', activeAjaxCount);
+
     // 첫 번째 Ajax 요청일 때만 Progress Block UI 표시
     if (activeAjaxCount === 1) {
-        $('#ajax-progress-overlay').css('display', 'flex').hide().fadeIn(200);
+        // Block UI 요소 존재 확인
+        if ($('#ajax-progress-overlay').length === 0) {
+            console.warn('[Ajax Block UI] Block UI 요소가 존재하지 않음, 생성 시도');
+            createProgressBlockUI();
+        }
+
+        var $overlay = $('#ajax-progress-overlay');
+        if ($overlay.length > 0) {
+            $overlay.css('display', 'flex').hide().fadeIn(200);
+            console.log('[Ajax Block UI] Block UI 표시 완료');
+        } else {
+            console.error('[Ajax Block UI] Block UI 요소를 찾을 수 없음');
+        }
     }
 });
 
 // Ajax 완료 시 Progress Block UI 제거 (성공/실패 모든 경우)
 $(document).ajaxComplete(function(event, jqXHR, ajaxOptions) {
+    console.log('[Ajax Block UI] Ajax 완료:', ajaxOptions.url);
 
+    // Block UI 제외 대상 URL 체크 (ajaxSend와 동일한 조건으로 수정)
     if (ajaxOptions.url && ajaxOptions.url.indexOf('/system/user/duplicateCheck.ajax') !== -1) {
-        // 사이드바 상태 저장 요청은 카운트 감소하지 않음
+        console.log('[Ajax Block UI] 제외 대상 URL, 카운트 감소 안함');
         return;
     }
 
     activeAjaxCount--;
+    console.log('[Ajax Block UI] 활성 Ajax 카운트 감소:', activeAjaxCount);
+
     // 모든 Ajax 요청이 완료되었을 때만 Progress Block UI 숨김
     if (activeAjaxCount <= 0) {
         activeAjaxCount = 0; // 음수 방지
-        $('#ajax-progress-overlay').fadeOut(200);
+        var $overlay = $('#ajax-progress-overlay');
+        if ($overlay.length > 0) {
+            $overlay.fadeOut(200);
+            console.log('[Ajax Block UI] Block UI 숨김 완료');
+        } else {
+            console.warn('[Ajax Block UI] Block UI 요소를 찾을 수 없어 숨길 수 없음');
+        }
     }
 });
 
+// Progress Block UI 생성 함수
+function createProgressBlockUI() {
+    if ($('#ajax-progress-overlay').length === 0) {
+        var progressHtml =
+            '<div id="ajax-progress-overlay" class="ajax-progress-overlay" style="' +
+                'position: fixed; top: 0; left: 0; width: 100%; height: 100%; ' +
+                'background-color: rgba(0, 0, 0, 0.3); z-index: 9999; ' +
+                'display: none; justify-content: center; align-items: center;">' +
+                '<div class="ajax-progress-content" style="' +
+                    'background-color: #ffffff; border-radius: 8px; padding: 30px; ' +
+                    'box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center; min-width: 200px;">' +
+                    '<div class="ajax-progress-spinner" style="' +
+                        'width: 40px; height: 40px; border: 4px solid #f3f3f3; ' +
+                        'border-top: 4px solid #007bff; border-radius: 50%; ' +
+                        'animation: spin 1s linear infinite; margin: 0 auto 15px;"></div>' +
+                    '<p class="ajax-progress-text" style="' +
+                        'color: #495057; font-size: 14px; font-weight: 500; margin: 0; ' +
+                        'text-align: center;">처리 중입니다...</p>' +
+                '</div>' +
+            '</div>';
+        $('body').append(progressHtml);
+
+        // CSS 애니메이션이 없는 경우를 대비한 인라인 스타일 추가
+        var style = document.createElement('style');
+        style.textContent = '@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }';
+        document.head.appendChild(style);
+
+        console.log('[Ajax Block UI] Block UI 요소 생성 완료');
+    }
+}
+
 
 $(document).ready(function () {
     $('.pop-x-btn, .modalclose').click(function() {