Update 2025-12-19 16:23:03

backend/templates/base.html

@@ -29,21 +29,30 @@
     <!-- Skip to main content (접근성) -->
     <a href="#main-content" class="visually-hidden-focusable">본문으로 건너뛰기</a>
 
-    {# 플래시 메시지 (전역) #}
+    {# 플래시 메시지 (좌측 상단 토스트 스타일) #}
     {% with messages = get_flashed_messages(with_categories=true) %}
     {% if messages %}
-    <div class="position-fixed end-0 p-3" style="z-index: 2000; top: 70px;">
+    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 2000; margin-top: 60px;">
         {% for cat, msg in messages %}
-        <div class="alert alert-{{ cat }} alert-dismissible fade show shadow-lg" role="alert">
-            <i class="bi bi-{{ 'check-circle' if cat == 'success' else 'exclamation-triangle' }} me-2"></i>
-            {{ msg }}
-            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <div class="toast align-items-center text-white bg-{{ 'success' if cat == 'success' else 'danger' if cat == 'error' else 'primary' }} border-0 fade show"
+            role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
+            <div class="d-flex">
+                <div class="toast-body d-flex align-items-center">
+                    <i
+                        class="bi bi-{{ 'check-circle-fill' if cat == 'success' else 'exclamation-diamond-fill' }} me-2 fs-5"></i>
+                    <div>{{ msg }}</div>
+                </div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
+                    aria-label="Close"></button>
+            </div>
         </div>
         {% endfor %}
     </div>
     {% endif %}
     {% endwith %}
 
+
+
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
         <div class="container-fluid">
@@ -110,6 +119,10 @@
     <!-- Main Content -->
     <main id="main-content"
         class="{% if request.endpoint in ['auth.login', 'auth.register', 'auth.reset_password'] %}container mt-5{% else %}container mt-4 container-card{% endif %}">
+
+        {# 플래시 메시지 (컨텐츠 상단 표시) #}
+
+
         {% block content %}{% endblock %}
     </main>
 
@@ -133,6 +146,24 @@
     {% endif %}
 
     {% block scripts %}{% endblock %}
+
+    <!-- Auto-hide Toasts -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            var toastElList = [].slice.call(document.querySelectorAll('.toast'));
+            var toastList = toastElList.map(function (toastEl) {
+                // 부트스트랩 토스트 인스턴스 생성 (autohide: true 기본값)
+                var toast = new bootstrap.Toast(toastEl, { delay: 3000 });
+                toast.show();
+
+                // 3초 후 자동으로 DOM에서 제거하고 싶다면 이벤트 리스너 추가 가능
+                toastEl.addEventListener('hidden.bs.toast', function () {
+                    // toastEl.remove(); // 필요시 제거
+                });
+                return toast;
+            });
+        });
+    </script>
 </body>
 
 </html>