본문 바로가기
Spring

회원가입 시 alert 창 띄우기

by allwing12 2022. 11. 7.
<html>
<head
</head>
<script type="text/javascript">
<!--     var result = confirm('회원가입을 하시겠습니까 ?');-->
<!--        if(result) {-->
<!--            location.replace('login');-->
<!--            alert('회원가입이 완료 되었습니다.');-->
<!--        } else {-->
<!--            location.replace('signup');-->
<!--            alert('회원가입이 취소 되었습니다.')-->
<!--        }-->

            var win = alert('회원가입이 완료 되었습니다.');
            win;
          location.href = "/login";


</script>

<body>
</body>
</html>

 

회원가입을 했을 때 정상적으로 완료가 되었다면 완료 되었다고 alert창을 띄우고 싶어서 고생을 했다.

되게 여러가지 해봤던 것 같은데 일단 alert 창을 띄우냐 아니면 confirm 창을 띄우냐 였는데

두개의 차이점은 alert창은 정말 그냥 alert('텍스트'); 이렇게 하면 알림으로 텍스트만 뜨는거고

confirm 창은 확인 취소 버튼이 생겨서 확인을 눌렀을 때에는 true 값을 취소를 눌렀을 때에는 false 값을 나타낸다.

 

근데 처음에 되게 헤맨게 회원가입 시 데이터가 들어가면 안되는 상황에서 데이터가 들어가고 들어가야하는 상황에서도

들어가거나 안들어가고 아니면 뜨면 안되는데 뜨고 이러니까 짜증이 났다...

button 태그에서 타입을 submit 으로 해야지 데이터베이스에 데이터가 정상적으로 들어가는 것을 확인했고

일반적인 button 타입으로 설정하면 데이터가 들어가지 않는 것도 알아냈다.

이 button 태그를 a태그로도 바꿔보고 button 타입에다가 location.href 또는 window.location.href 등등

많은 것을 해봤는데 다 안되서 짜증나는 와중에 js 를 활용하기로 했었다.

 

근데 또 js 도 if 문을 활용해서 하는데 true 값일 때 이렇게 false 값일 때 이렇게 줘도 말을 안듣더라...

그러다가 위의 코드 처럼 하니까 정상적으로 작동을 하게 되었다.

 

대신 컨트롤러도 return 값을 바꿔주었따.

 

 

public class UserController {
    private final UserServices userServices;

    @GetMapping("/signup")
    public String signup(UserCreateForm userCreateForm) {
        return "signup_form";
    }
    @PostMapping("/signup")
    public String signup(@Valid UserCreateForm userCreateForm, BindingResult bindingResult) {
        if(bindingResult.hasErrors()) {
            return "signup_form";
        }
        if (!userCreateForm.getPassword1().equals(userCreateForm.getPassword2())) {
            bindingResult.rejectValue("password2", "passwordInCorrect", "비밀번호가 일치하지 않습니다.");
            return "signup_form";
        }
        try {
            userServices.create(userCreateForm.getUsername(),
                    userCreateForm.getEmail(),
                    userCreateForm.getPassword1());
        } catch (DataIntegrityViolationException e) {
            e.printStackTrace();
            bindingResult.reject("signupFailed", "이미 등록된 아이디 입니다.");
            return "signup_form";
        } catch (Exception e) {
            e.printStackTrace();
            bindingResult.reject("signupFailed", e.getMessage());
            return "signup_form";
        }
        return "errors";
    }

 

여기에서 바뀐 부분은 맨아래 return 값인데 return 값으로 errors.html 을 부르게 했다.

그리고 errors.html 은 바로 맨 위에 있는 코드들이며 정상적으로 회원가입 폼에 틀린게 없으면

errors를 return 하여 alert창을 띄운 후 확인을 눌렀을 때 location.href 로 설정한 login 주소로 넘어가서

바로 login_form 을 보여주는 것으로 해놨다.

나는 일단 이런식으로 해서 회원가입 시 정상적인 데이터가 입력이 되었다면 alert창이 뜨고 login_form 으로 이동하게 해놨고

조금 나중에는 이 alert 창 커스텀 하는 것도 해보려고 한다

댓글