toaster 적용

src/main/resources/templates/page/login.html

@@ -58,6 +58,14 @@
                 </div>
                 <button class="w-100 btn btn-lg btn-primary" type="button" id="actionLogin" th:text="#{loginForm.login}">Sign in</button>
             </form>
+            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; right: 0;">
+                <div class="toast-header">
+                    <strong class="mr-auto">알림</strong>
+                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                </div>
+                <div class="toast-body">
+                </div>
+            </div>
             <div class="mt-2 text-center">
                 <span class="text-muted"><a href="/forgot_password.do">비밀번호 초기화</a></span>
             </div>
@@ -100,8 +108,10 @@
         function fnInit() {
             getId(document.loginForm);
 
-            if (document.loginForm.message !== null && document.loginForm.message.value !== "") {
-                alert(document.loginForm.message.value);
+            let message = document.loginForm.message.value;
+            if (message) {
+                $('.toast-body').text(message);
+                $('.toast').toast('show');
             }
         }
 
@@ -120,7 +130,9 @@
                     event.stopPropagation()
                 } else {
                     if (form.password.value.length < 8) {
-                        alert("[[#{validate.passLengthShort}]]");
+                        let message = "[[#{validate.passLengthShort}]]";
+                        $('.toast-body').text(message);
+                        $('.toast').toast('show');
                     } else {
                         form.submit();
                     }

src/main/resources/templates/page/routes/mockRouteEdit.html

@@ -8,6 +8,14 @@
         require.config({paths: {'vs': '/plugins/vs'}});
     </script>
     <div class="container-fluid mt-2">
+        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; right: 0;">
+            <div class="toast-header">
+                <strong class="mr-auto">알림</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body">
+            </div>
+        </div>
         <form name="mockRouteForm" id="mockRouteForm"
               th:action="${mockRoute.id == null}?@{/mgmt/routes/register.do}:@{/mgmt/routes/update.do}"
               th:object='${mockRoute}' method="post">
@@ -477,7 +485,9 @@
                 },
                 removeResponse: function (idx) {
                     if (model.responses[idx].defaultResponse) {
-                        alert('기본 응답은 삭제할 수 없습니다.');
+                        let message = '기본 응답은 삭제할 수 없습니다.';
+                        $('.toast-body').text(message);
+                        $('.toast').toast('show');
                         return;
                     }
                     model.responses.splice(idx, 1);

src/main/resources/templates/page/tester/apiTester.html

@@ -18,6 +18,14 @@
         </div>
     </div>
     <div class="container-fluid mt-2">
+        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; right: 0;">
+            <div class="toast-header">
+                <strong class="mr-auto">알림</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body">
+            </div>
+        </div>
         <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
         <div class="card">
             <div class="card-header" style="min-height: 50px;">
@@ -819,9 +827,14 @@
                         contentType: 'application/json',
                         data: JSON.stringify(model),
                         success: function (data) {
+                            let message = '저장되었습니다.';
+                            $('.toast-body').text(message);
+                            $('.toast').toast('show');
                         },
                         error: function (response, textStatus, errorThrown) {
                             controller.hideLoadingOverlay();
+                            $('.toast-body').text(response.responseJSON);
+                            $('.toast').toast('show');
                         },
                         complete: function () {
                             controller.hideLoadingOverlay();

src/main/resources/templates/page/updatePw.html

@@ -42,6 +42,14 @@
                     </div>
                 </form>
             </div>
+            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; right: 0;">
+                <div class="toast-header">
+                    <strong class="mr-auto">알림</strong>
+                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                </div>
+                <div class="toast-body">
+                </div>
+            </div>
             <div class="card-footer">
                 <button type="button" class="btn btn-primary btn_update"><i class="fa-sharp fa-solid fa-floppy-disk"></i> 저장</button>
                 <a th:href="@{/}" class="btn btn-primary" th:title="#{button.cancel}"><i class="fa-sharp fa-solid fa-cancel"></i> [[#{button.cancel}]]</a>
@@ -73,7 +81,8 @@
         $(function () {
             var resultMsg = '[[#{${resultMsg}}]]';
             if (resultMsg !== "") {
-                alert(resultMsg);
+                $('.toast-body').text(resultMsg);
+                $('.toast').toast('show');
             }
         })
     </script>