[Googoos🕊] 04. Spring | 회원가입 중복체크 | ajax, MyBatis

어떠한 사이트에 가입을 할 때 소셜 로그인이 아닌 회원가입을 진행할 때 중복 체크하는 기능을 쉽게 볼 수 있다. 
오늘은 중복 체크 기능을 구현했다.

 

01. memberMapper.xml 

-- 이메일 중복 체크 --
<select id="emailCheck" parameterType="com.mygg.mygg.dto.MemberDTO" resultType="int">
    SELECT COUNT(*)
    FROM member
    WHERE email = #{email}
</select>
-- 닉네임 중복 체크 --
<select id="nickCheck" parameterType="com.mygg.mygg.dto.MemberDTO" resultType="int">
    SELECT COUNT(*)
    FROM member
    WHERE nickname = #{nickname}
</select>
-- 휴대폰 번호 중복 체크 --
<select id="phoneCheck" parameterType="com.mygg.mygg.dto.MemberDTO" resultType="int">
    SELECT COUNT(*)
    FROM member
    WHERE phone_number = #{phone_number}
</select>

 각각의 조건으로 COUNT를 하는데 이메일이 존재하면 COUNT = 1, 존재하지 않으면 COUNT = 0으로 조회된다. 따라서, resultType="int"로 한다.

 

 

02. MemberRepository & MemberService

int emailCheck(String email) throws Exception;
int nickCheck(String nickname) throws Exception;
int phoneCheck(String phone_number) throws Exception;

 

 

03. MemberServiceImpl

@Override
public int emailCheck(String email) throws Exception {
    int result = memberRepository.emailCheck(email);
    return result;
}

@Override
public int nickCheck(String nickname) throws Exception {
    int result = memberRepository.nickCheck(nickname);
    return result;
}

@Override
public int phoneCheck(String phone_number) throws Exception {
    int result = memberRepository.phoneCheck(phone_number);
    return result;
}

 

 

04. MemberRegisterController

@Controller
@RequestMapping("/member")
public class MemberRegisterController {

    @Autowired
    private MemberService memberService;

    // Join page
    @RequestMapping(value = "/signup", method = RequestMethod.GET)
    public void registerGET() throws Exception {

    }

    @ResponseBody
    @RequestMapping(value = "/emailCheck", method = RequestMethod.POST)
    public int emailCheck(String email) throws Exception {
        int result = memberService.emailCheck(email);
        return result;
    }

    @ResponseBody
    @RequestMapping(value = "/nickCheck", method = RequestMethod.POST)
    public int nickCheck(String nickname) throws Exception {
        int result = memberService.nickCheck(nickname);
        return result;
    }

    @ResponseBody
    @RequestMapping(value = "/phoneCheck", method = RequestMethod.POST)
    public int phoneCheck(String phone_number) throws Exception {
        int result = memberService.phoneCheck(phone_number);
        return result;
    }

    @RequestMapping(value = "/signup", method = RequestMethod.POST)
    public String registerPOST(MemberDTO memberDTO, String email, String nickname, String phone_number) throws Exception {
        int emailResult = memberService.emailCheck(email);
        int nickResult = memberService.nickCheck(nickname);
        int phoneResult = memberService.phoneCheck(phone_number);

        try {
            if (emailResult == 1 || nickResult == 1 || phoneResult == 1) {
                return "/member/signup";
            } else if (emailResult == 0 && nickResult == 0 && phoneResult == 0) {
                memberService.register(memberDTO);
                return "redirect:/member/login";
            }
        } catch (Exception e) {
            throw new RuntimeException();
        }
        return "redirect:/";
    }
}

 MemberRegisterController에 중복 체크 요청이 들어오면 파라미터를 MemberService로 보내주고 조회한 결과를 result에 넣어준다. 그리고 return을 반환한다. 반환 값은 결과가 있으면 1 없으면 0이 반환된다. 반환 결과가 1이면 중복이 된 것이므로 /member/signup으로 보내고, 0이면 중복된 것이 없으므로 memberSerive.register(memberDTO)를 실행하여 회원가입을 완료합니다. 회원가입이 완료되면 /member/login 페이지로 이동합니다.

 

 

05. signup.html

<form action="/member/signup" method="post">
    <table>
        <tr>
            <th>
                <label for="email"> 이메일 </label>
            </th>
            <td>
                <input type="email" id="email" name="email">
                <button class="emailCheck" type="button" id="emailCheck" onclick="fn_emailCheck();" value="N"> 중복확인 </button>
            </td>
        </tr>
        ......

<script>
    function fn_emailCheck() {
        $.ajax({
            url : "/member/emailCheck",
            type : "POST",
            dataType :"JSON",
            data : {"email" : $("#email").val()},
            success : function (data) {
                if(data == 1) {
                    alert("중복된 이메일입니다.");
                } else if (data == 0) {
                    $("#emailCheck").attr("value", "Y");
                    alert("사용 가능한 이메일입니다.")
                }
            }

        })
    }

    function fn_nickCheck() {
        $.ajax({
            url : "/member/nickCheck",
            type : "POST",
            dataType :"JSON",
            data : {"nickname" : $("#nickname").val()},
            success : function (data) {
                if(data == 1) {
                    alert("중복된 닉네임입니다.");
                } else if (data == 0) {
                    $("#nickCheck").attr("value", "Y");
                    alert("사용 가능한 닉네임입니다.")
                }
            }

        })
    }

    function fn_phoneCheck() {
        $.ajax({
            url : "/member/phoneCheck",
            type : "POST",
            dataType :"JSON",
            data : {"phone_number" : $("#phone_number").val()},
            success : function (data) {
                if(data == 1) {
                    alert("중복된 휴대폰 번호입니다.");
                } else if (data == 0) {
                    $("#phoneCheck").attr("value", "Y");
                    alert("사용 가능한 휴대폰 번호입니다.")
                }
            }

        })
    }
</script>

 중복체크 요청은 ajax로 만든다. url에 요청하는 url을 설정해주고 data는 각각의 조건으로 값을 가져오고 /member/... 에 보내준다. data가 1이면 "중복된 ~입니다."를 alert으로 확인할 수 있고, data가 0이면 "사용 가능한 ~입니다."를 확인할 수 있다.

 

 

06. 테스트 확인

 

 

전체 소스코드는 GitHub 참고

codesiri/Googoos