아이디/비밀번호 찾기 기능은 휴대전화 또는 이메일로 인증한 뒤 아이디 또는 임시 비번을 인증수단을 통해 전송한다. 인증 성공하면 이동하는 인증 성공 페이지에서 작은 분기 처리를 해보겠다.
- 뷰 만들기. 마켓컬리 + 아이디어스를 따라했다. 아이콘은 fontawesome.
디비가 아직이라 대신 뷰와 컨트롤러 사이의 값 주고받는 연습을 확실히 하고 있다.
에러가 발생해도 최대한 빨리 캐치하고 싶다. 아니 해야 한다.
controller
@PathVariable을 연습했다. 저번에 실습했을 때는 실패했는데 이번엔 쉽게 되었다. 왜 실패했더라?
그냥 맵핑 경로에 {variable} 식으로 쓰고 파라미터 쓸 때 @PathVariable variable하면 끝.
// 아이디 찾기
@GetMapping("/user/find/id")
public String findIdView() {
return "/user/findId";
}
@PostMapping("/find/id/{verityType}")
public String findId(@PathVariable String verityType, User user) {
// if(certificate == "email") {
// mailService.sendEmail(user.getEmail());
// } else {
// smsService.sendSms(user.getPhone());
// }
return "redirect:/find/id/success/" + verityType;
}
// 비번 찾기
@GetMapping("/user/find/pwd")
public String findPwdView() {
return "/user/findPwd";
}
@GetMapping("/user/find/{findType}/success/{verifyType}")
public String findUserSuccessView(@PathVariable String findType, @PathVariable String verifyType, Model model) {
model.addAttribute("findType", findType);
model.addAttribute("verifyType", verifyType);
return "/user/findSuccess";
}구린 작명 센스를 가져서 이름짓는 게 너무 힘들다. id와 pwd를 구분하는 findType, 이메일과 휴대전화를 구분하는 verifyType 모델 객체에 값을 저장해서 jsp에서 c:choose 문법을 써서 분기처리했다.
jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<%@ include file="/WEB-INF/views/include/header.jsp" %>
<link rel="stylesheet" href="/css/user/findUserSuccess.css"/>
</head>
<body>
<%@ include file="/WEB-INF/views/include/navbar.jsp" %>
<body>
<div class="find-success-content">
<div class="center">
<div class="email-icon">
<c:choose>
<c:when test="${verifyType eq 'email'}">
<i class="fa-regular fa-envelope"></i>
</c:when>
<c:otherwise><i class="fa-solid fa-phone"></i></c:otherwise>
</c:choose>
</div>
<p class="result">
<c:choose>
<c:when test="${findType eq 'id'}">아이디가</c:when>
<c:otherwise>임시 비밀번호가</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${verifyType eq 'email'}">이메일로</c:when>
<c:otherwise>전화번호로</c:otherwise>
</c:choose>
발송되었어요.
</p>
<p class="warn-desc">
<c:choose>
<c:when test="${verifyType eq 'email'}">5분 후에도 메일이 오지 않는다면<br/>스팸함을 확인해 주세요.</c:when>
<c:otherwise>5분 후에도 메세지가 도착하지 않는다면<br/> 재시도해주세요.</c:otherwise>
</c:choose>
</p>
</div>
</div>
<%@ include file="/WEB-INF/views/include/footer.jsp" %>
</body>
</html>다음은 사용자에게 전송할 이메일 템플릿을 만들어 볼 예정이다. 그냥 비번만 덩그러니 보내는 건 좀 허하다.
검색해 봤더니 이메일 템플릿은 div가 지원이 안돼서 table태그로 만든다고 한다. 신기해서 꼭 해봐야겠다.
일단 쓰고 본다