- 로그인 Form
왼쪽이 실제 네이버 로그인 form이고 오른쪽이 클론코딩을 진행하며 뜯어 만든 로그인 form입니다
솔직히 외관은 비슷하게 할 필요는 없지만 보기 좋은 떡이 먹기에도 좋다고 만들면서 눈요기좀 했습니다
- memberLogin.jsp
로그인을 시도했지만 email/pass가 불일치하거나 없는 email로 로그인하는 경우
<form action="/member/login" method="post" id="login-form-main">
<div id="id_line">
<div id="id-icon-div">
<samp id="id-icon"></samp>
</div>
<input type="text" id="id_input" name="memberEmail" placeholder="아이디">
</div>
<div id="pass_line">
<div id="pass-icon-div">
<samp id="pass-icon"></samp>
</div>
<input type="password" id="pw_input" name="memberPassword" placeholder="비밀번호">
</div>
<span id="err-box">${loginFalse}</span>
<a href="/member/save" id="Go-Save">
회원가입
</a>
<div id="btn-form-inner">
<button type="button" id="btn-login" onclick="sub_check()">
<samp id="btn-login-txt"
style="font-size: 20px;font-weight: 700;line-height: 24px;color: white">
로그인
</samp>
</button>
</div>
</form>
막상 뜯어보면 크게 특별한 기능은 없습니다
css때문에 엄청 길어졌습니다
- memberLoging.jsp - script
<script>
const memberEmail = document.getElementById('id_input');
email을 작성하는 input
const memberPass = document.getElementById('pw_input');
password를 작성하는 input
const subResult = document.getElementById('err-box');
결과를 출력하는 span 태그
const loginForm = document.getElementById('login-form-main');
값을 넘겨주는 form태그
const sub_check = () => {
if(memberEmail.value.length == 0){
subResult.innerHTML = "아이디를 입력해 주세요."
} else if(memberPass.value.length == 0) {
subResult.innerHTML = "비밀번호를 입력해 주세요."
} else {
subResult.innerHTML = "${loginFalse}";
loginForm.submit();
}
}
</script>
아이디와 비밀번호가 있는지에 대한 판단은 서버에 넘어가서 확인을 해야하기 때문에
jsp에서는 최소한의 value 체크만 진행했습니다
- MemberController - 생성자 주입 사용
@GetMapping("/member/login")
public String memberLogin() {
return "/memberPage/memberLogin";
로그인form으로 이동을 도와주는 get맵핑
}
@PostMapping("/member/login")
로그인 form에서 전달한 값을 받아주는 post맵핑
public String loginMember(@ModelAttribute MemberDTO memberDTO ,
전달 받은 값을 ModelAttribute 를 사용하여
바로 DTO에 담아 사용했습니다
HttpSession session , Model model) {
로그인이 성공했다면 사용될 session
성공 , 실패에 사용될 model 입니다
MemberDTO memberDB = memberService.loginMember(memberDTO);
전달 받은 값을 매개변수로 사용하여 Service 로 넘겨줍니다
db까지 전달을 마치고 리턴 받은 값을 memberDB에 담아줍니다 리턴 타입은 DTO입니다
String loginFalse = "아이디 또는 비밀번호를 잘못 입력했습니다."+
"<br>"+"입력하신 내용을 다시 확인해주세요.";
로그인 실패시 전달될 문구를 Controller에서 만들었습니다
String bestBoardCount = "6";
index에서는 페이징이 사용된 list가 있기 때문에
로그인 성공 시 함께 넘겨주어야하는 변수입니다
if(memberDB != null) {
db에서는 select로 해당 email/password의 유저가 있는지 확인을하고
dto객체를 리턴해줍니다 그렇기 때문에 받은 값이 null아니라면
회원이 맞기 때문에 로그인 처리를 진행합니다
session.setAttribute("memberId",memberDB.getId());
세션에 해당 유저의 id값을 담아줍니다
model.addAttribute("memberDTO",memberDB);
index에서 사용할 유저의 정보를 model에 담아 함께 넘어갑니다
return "redirect:/";
} else {
model.addAttribute("loginFalse",loginFalse);
db에서 받아온 dto객체가 null이라면 로그인 실패 문구와 함께
다시 로그인 페이지로 넘어갑니다
return "/memberPage/memberLogin";
}
}
- MemberService , MemberRepository
@Service
public MemberDTO loginMember(MemberDTO memberDTO) {
return memberRepository.loginMember(memberDTO);
}
@Repository
public MemberDTO loginMember(MemberDTO memberDTO) {
return sql.selectOne("naverMember.loginMember",memberDTO);
}
Service와 Repository에서는 별다른 작업을 수행하지 않습니다
Mapper까지 값을 이동하고 리턴 받은 값을 controller에 전달만 해줍니다
- Mapper
<select id="loginMember" parameterType="member" resultType="member">
select *
from member_table
where (memberEmail = #{memberEmail} and memberPassword = #{memberPassword})
or (memberDomain = #{memberEmail} and memberPassword = #{memberPassword})
</select>
위에서 설명한것 처럼 입력받은 값으 email / password가 있는지 확인을 하고
dto객체를 리턴해줍니다 사용자가 도메인까지 붙여 로그인을 진행하는 상황을 대비하여
domain과 pass가 맞는 상황까지 쿼리문에 작성했습니다
로그인에 성공하면 index로 넘어가고 로그인 버튼이 유저info로 변경됩니다