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();
                     }