3) 회원 가입 기능 구현 - Spring Project (OTT 서비스)

해당 프로젝트는 2023/01/25 ~ 2023/03/12 내에 진행되는
아카데미 내 수강생들끼리 팀을 나누어 진행한 모의 프로젝트입니다.
팀원은 5명이었으며, 프로젝트 리더를 맡았습니다.

이전 글 목록

1) 주어진 RFP를 바탕으로 주제 선정 - Spring MVC2 프로젝트

2) ERD 설계 - Spring MVC2 프로젝트

 

 

 

 

OTT 사이트의 특성상 큰 기능은 회원 관련, 영상 관련 기능으로 나뉠 것이라고 생각했다.

우선 View 작업은 나중에 생각하기로 하였으며, 우선 기능 구현에 중점을 두고 기능 구현을 시작했다.

 

회원가입

---

회원가입을 통해 로그인 처리가 되었을 때만 영상에 접근 가능하도록 정책을 설계했기 때문에, 회원가입이 우선적으로 진행되어야 한다고 생각했다.

DBMS는 MySQL을 사용하였으며, 팀원 모두가 접근할 수 있도록 구름IDE를 통해 MySQL과 연동하였으며,
구름IDE의 IP와 포트번호를 받아 와서 프로젝트와 연동이 될 수 있도록 아래의 블로그를 참고하여 셋팅하였다.
https://dalconbox.tistory.com/37

구름IDE 에서 MySQL 사용하기

 

UserController.java

회원 테이블에서 회원 가입 시 입력받아야 할 정보는 [ 이메일, 비밀번호, 닉네임, 휴대폰번호 ] 총 네 가지였다.

 

이메일 중복확인 버튼 구현을 위한 메서드를 작성하였으며 String 형태로 리턴을 받아 중복 확인 결과를 사용자에게 전달할 수 있게 설계하였다.

이메일 중복확인 버튼을 눌렸을 때 통과가 되어야 회원가입 버튼이 작동할 수 있게 설계 할 예정이다.

 

사용자가 회원가입 요청을 보낼 시 POST 방식으로 데이터를 userDto에 전달하여 처리되게 하였다.

또한 createPost 메서드에서 DB까지의 접근 과정에서 리턴값을 boolean으로 받아 와서 회원 가입 결과를 사용자에게 출력되게 처리하였다.

(...생략...)
@Controller
@RequestMapping("/user/**")
public class UserController {

	@Autowired
	UserService userService;	
	UserDao userDao;
	
	//회원가입 페이지 이동
	@RequestMapping("signup")
	public String create() {
		return "user/signup";
	}
	
	//signup 시 email 중복확인 버튼 구현
	@RequestMapping("emailCheck")
	@ResponseBody // ajax 요청에 담긴 값을 자바 객체로 변환시켜 인스턴스(boolean)에 저장 -> illegalargumentException 방지
	public boolean emailCheck(@RequestParam("email") String email) {
		//DB 들어가서 email 중복값이 있나 들고나옴
		String check = null;
		check = userService.emailCheck(email); //input email에서 받은 email을 DB까지 전달하여 조회작업
		if(check != null) return true;
		else return false;		
	}

	
	@RequestMapping(value = "signup", method = RequestMethod.POST)
	public ModelAndView createPost(UserDto userDto) {
	    ModelAndView mav = new ModelAndView();
	    boolean tf = userService.create(userDto);
	    System.out.println(tf);
	    // ID값이 true이면 성공, false면 실패
	    if (!tf) {
	        mav.addObject("message", "fault");
	        mav.setViewName("user/signup");
	    }else { //
	        mav.addObject("message", "success");
	        mav.setViewName("main/main");      
	    }
	    return mav;
	}
}

 

UserService.java / UserServiceImpl.java

(...생략...)
public interface UserService {

	boolean create(UserDto userDto);

	String emailCheck(String email);

}

(...생략...)
@Service
public class UserServiceImpl implements UserService{
	@Autowired
	UserDao userDao;
	
	@Override
	public boolean create(UserDto userDto) {
		return userDao.create(userDto);
	}

	@Override
	public String emailCheck(String email) {
		return userDao.emailCheck(email);
	}

}

 

UserDao.java

회원가입 시 signUpCheck를 통해 닉네임의 중복여부를 파악하였고, 백단에서의 모든 중복 방지 기능을 구현했다.

 

휴대폰 번호는 외부 API를 통해 인증절차를 거칠 수 있으면 좋겠지만, 휴대폰 인증 API는 기업 단위에서가 아니면 사용이 불가능 한 것으로 알고 있기 때문에 따로 휴대폰번호 중복에 대한 처리는 수행하지 않을 예정이다.

 

(...생략...)
@Repository
public class UserDao {
	@Autowired
	SqlSessionTemplate sqlSessionTemplate;	
	
	//Controller의 emailCheck 받아오기
	public String emailCheck(String email) {
		String check = null;
		check = this.sqlSessionTemplate.selectOne("user.email_check", email);
		System.out.println(check);
		return check;
	}
	
	// 가입 시 중복 값 방지 DB에서도 처리예정
	public boolean create(UserDto userDto) {
		//이미 이메일 중복은 받았고, 휴대폰 번호는 따로 API예정이라 닉네임만 중복여부 확인.
		String checkTF = this.sqlSessionTemplate.selectOne("user.signUpCheck", userDto);
		if(checkTF == null) {
			sqlSessionTemplate.insert("user.insert", userDto);
			return true; // checkTF가 아무값도 가지고 나오지 않으면 중복x -> 가입가능
		}
		else return false;
	}
	
}

 

user.SQL.xml

설계한 그대로의 쿼리문을 작성 해 주었다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE  mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="user">
	<insert id="insert">  
	    <![CDATA[
	    insert into USER (EMAIL, PASSWORD, NICKNAME, PHONE_NUM)  
	    values (#{email}, #{password}, #{nickname}, #{phone_num})
	    ]]>
	</insert>
	
	<!-- 이메일 중복버튼 구현을 위한 조회 쿼리문 -->
	<select id="email_check" resultType="String">
		select EMAIL
		  from USER
		 where EMAIL=#{email}
	</select>
	
	<!-- 회원 가입 버튼 클릭 시 email, nickname, phone_num 중복 체크 -->
	<select id="signUpCheck" resultType="String">
		select NICKNAME
		  from USER
		 where NICKNAME=#{nickname}
	</select>
</mapper>

 

signup.jsp

컨트롤러의 ModelAndView를 return받아 회원가입 결과를 JSTL을 활용하여 조건을 주었다.

JSTL이란?

자바 서버 표준 태그 라이브러리를 말하며, JSP를 단순화하는 많은 태그들을 제공한다.
core, formatting, xml, sql태그 등이 있다.

 

정규 표현식을 통한 유효성 검사는 스크립트 내의 if문 코드로 대체하였다. 차후 보수 할 예정이다.

 

이메일 중복 버튼 클릭 시 입력한 이메일의 값을 ajax를 통하여 emailCheck이 매핑된 곳으로 전송하여 이메일 중복여부를 확인하고, 그 결과를 boolean값으로 리턴 받아 사용자에게 중복 여부를 출력 해 주었다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<form method="post">
	이메일 : <input type="email" name="email">
	<button type="button" id="btn">아이디 중복체크</button>
	<p id="idcheck"></p>
	비밀번호 : <input type="password" name="password">
	<p id="pwcheck"></p>
	닉네임 : <input type="text" name="nickname">
	<p id="nncheck"></p>
	<c:if test="${message=='fault'}">
		<p id="nncheck2">중복된 닉네임입니다.</p>
	</c:if>	
	휴대폰 번호 : <input type="text" name="phone_num">
	<p id="phcheck"></p>	
	<input type="button" value="가입하기">
	<c:if test="${message=='fault'}">
		<h1>
			가입 실패
		</h1>
	</c:if>
</form>
<script>
	//혹시모를 청개구리의 enter키 입력 방지
	document.addEventListener('keydown', function(e){
		if (e.key === 'Enter'){
			e.preventDefault();
		};
	}, true);
	
	var a=0, b=0, c=0, d=0;

	//가입 버튼이 가입 양식에 일치할 때 가입 받아주기
	$('input[type=button]').on('click',function(e){
		const password = $('input[name=password]').val().length;
		const nickname = $('input[name=nickname]').val().length;
		const phone_num = $('input[name=phone_num]').val().length;
		
		if(password < 4 || password > 20){
			e.preventDefault();
			$('#pwcheck').text('비밀번호는 4~20자로 입력 해 주세요');
		}else {
			a=1;
			$('#pwcheck').text('');
		}
		
		if(nickname < 4 || nickname > 20){
			e.preventDefault();
			$('#nncheck').text('닉네임은 4~20자로 입력 해 주세요');
		}else {
			b=1;
			$('#nncheck').text('');
		}
		
		if(phone_num < 4 || phone_num > 15){
			e.preventDefault();
			$('#phcheck').text('올바른 휴대폰 번호를 입력 해 주세요');
		}else {
			c=1;
			$('#phcheck').text('');		
		}
		
		if(a==1 && b==1 && c==1 && d==1){			
			$('input[type=button]').prop('type', 'submit');
		}
		
	});
	
	$('#btn').on('click',function(){
		let email = $('input[name=email]').val();
		//이메일 올바르게 쓰지 않았을 때 바로 리턴
		if(!email.includes('@')) return $('#idcheck').text('올바른 이메일을 입력 해 주세요');
		//ajax로 email보내기 -> emailCheck 매핑된 곳으로 보내서 중복 확인
		$.ajax({
			url : 'emailCheck',
			type : 'post',
			data : {'email' : email}, // 입력한 email data
			dataType : 'text', 
			success : function(result){
				//result가 text 형태로 와서 false가 text 형태로 비교
				if(result == 'false'){      //false = 사용가능
					$('#idcheck').text('사용 가능한 이메일입니다');
					d=1;
				}else{
					$('#idcheck').text('이미 사용중인 이메일입니다');
				}
			},
			error : function(){
				alert('에러발생 에러발생 ㅌㅌ');
			}
		});
	});
	

</script>
</body>
</html>

 

 

 

어느정도 기능구현을 진행한 뒤 블로그를 작성하기 떄문에, 다른 버튼이 있는 부분은 양해부탁드립니다.