feat(Banner): enhance loading logic and add detailed debug logs

- Updated `loadBanner` to wait for DOM readiness with `DOMContentLoaded` support.
- Added comprehensive debug logs for banner loading, response status, and DOM interactions.

src/components/Banner.astro

@@ -10,11 +10,18 @@ import "../styles/components/Banner.css"
 
   async function loadBanner() {
     try {
+      console.log('Loading banner from:', `${API_BASE}/api/banners/active`);
       const response = await fetch(`${API_BASE}/api/banners/active`);
+      console.log('Banner response status:', response.status);
+
       if (response.ok) {
         const data = await response.json();
+        console.log('Banner data:', data);
+
         if (data.banner) {
           const container = document.getElementById('banner-container');
+          console.log('Banner container found:', !!container);
+
           if (container) {
             container.innerHTML = `
               <div class="banner-wrapper">
@@ -23,7 +30,10 @@ import "../styles/components/Banner.css"
                 </div>
               </div>
             `;
+            console.log('Banner displayed successfully');
           }
+        } else {
+          console.log('No active banner found');
         }
       }
     } catch (error) {
@@ -31,6 +41,10 @@ import "../styles/components/Banner.css"
     }
   }
 
-  // Load banner when page loads
+  // Load banner when DOM is ready
-  loadBanner();
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', loadBanner);
+  } else {
+    loadBanner();
+  }
 </script>