Java - 게시판 프로젝트(5)
2023.04.03 - 2023.04.12
게시판 프로젝트 (5)
마이페이지 수정기능
1. 마이페이지 수정 기능
로그인 후에 자신의 정보를 확인할 수 있는 "마이페이지" 메뉴 추가 후, 좀 더 세밀한 기능과 마이페이지 수정 기능을 추가하였다.
1) 로그인을 하지 않았다면, 로그인 페이지로 넘어가는 기능
2) 마이페이지 수정 기능
먼저, 로그인을 하지 않았다면, 로그인 페이지로 넘어가는 기능은 RegisterController.java에서 추가하였다.
@GetMapping("/info")
public String registerInfo(HttpServletRequest request) {
if(!loginCheck(request))
return "redirect:/login/login?toURL="+request.getRequestURL(); // 로그인을 안했으면 로그인 화면으로 이동
else {
return "registerInfo";
}
}
private boolean loginCheck(HttpServletRequest request) {
// 1. 세션을 얻어서(false는 session이 없어도 새로 생성하지 않는다. 반환값 null)
HttpSession session = request.getSession(false);
// 2. 세션에 id가 있는지 확인, 있으면 true를 반환
return session!=null && session.getAttribute("id")!=null;
}해당 내용은 패스트캠퍼스 강의에서 나온 내용이다. 살짝 어려운 내용이지만, 계속해서 보다 보니 이해가 쉽게 되었다.
이렇게 해당 내용을 추가함으로써 로그인한 사용자만 마이페이지에 접속할 수 있게 되었다.
두번째로, 마이페이지 수정 기능을 추가하였다.
마이페이지 수정 기능을 추가하면서 애를 가장 많이 먹었다. 원래 처음에 세운 계획은 마이페이지를 나타내주는 registerInfo.jsp에서 수정하기 버튼을 누르면, (마이페이지 추가 된 내용 => https://eunseo3227.tistory.com/5)
readonly였던 각 input를 수정할 수 있도록 설정을 바꾸고, 수정하기 버튼이 저장 버튼으로 바꾸고 해당 버튼을 클릭하면 수정될 수 있도록 하는 것이었다.
원래 생각해놓은 방향대로 잘 흘러가지 않았다. 그래서 아예 regiserInfoModify.jsp를 만들었다. 해당 jsp는 registerForm.jsp를 토대로 만들었다.
수정하기 버튼을 누르면, regiserInfoModify.jsp로 이동하고 LoginController.java를 수정하여 id, pwd, name, email, birthday, sns을 세션에 저장해 두도록 하였다.
저장된 세션을 토대로 기존의 사용자 정보를 regiserInfoModify.jsp에서 출력할 수 있도록 하였다. 그리고 sns은 readonly로 설정하고, 체크박스를 선택할 때마다 바뀌도록 하였다. 하나만 정할 수 있도록 함수를 추가하였는데, 추가한 함수는 다음과 같다. 자바 스크립트에 대해 잘 몰라서 인터넷 검색을 통해 참고했다;;
<div class="sns-chk">
<label><input type="checkbox" name="sns" value="facebook" onclick="getCheckboxValue(this)"/>페이스북</label>
<label><input type="checkbox" name="sns" value="kakaotalk" onclick="getCheckboxValue(this)"/>카카오톡</label>
<label><input type="checkbox" name="sns" value="instagram" onclick="getCheckboxValue(this)"/>인스타그램</label>
</div>
<script>
function getCheckboxValue(sns) {
const checkboxes = document.getElementsByName("sns");
checkboxes.forEach((cb) => {
cb.checked = false;
})
sns.checked = true;
let result = '';
if(sns.checked) {
result = sns.value;
} else {
result = '';
}
document.getElementById('sns').value = result;
}
</script>대충 눈으로 읽어보면 이해되는 내용이기에 넘어가겠다.
마지막으로 저장 버튼을 누르면 저장될 수 있도록 RegisterController.java에 내용을 추가하였다.
@PostMapping을 통해 id, pwd, name, email, birth, sns을 request.getParameter로 받았고 birth는 User 객체에 Date 타입이므로 해당 내용을 추가하였다.
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Date date = new Date(sdf.parse(birth).getTime());
User user = new User(id, pwd, name, email, date, sns);
그리고 기존에 UserDao에 작성되어 있던 updateUser 메서드를 사용하여 저장하였다. 그리고 다시 각 정보들은 다시 session에 저장하였다. 그 이유는 저장이 잘 되면, 다시 registerInfo.jsp로 넘어가야 하기 때문이다.
int updateResult = userDao.updateUser(user);
if(updateResult ==1) {
User resultUser = userDao.selectUser(id);
m.addAttribute("user", resultUser);
} else {m.addAttribute("user", user);}
session.setAttribute("id", id);
session.setAttribute("pwd", pwd);
session.setAttribute("name", name);
session.setAttribute("email", email);
session.setAttribute("birthday", birth);
session.setAttribute("sns", sns);
최종적으로 수정에 성공하면 다시 registerInfo.jsp로 넘어가 수정된 사용자의 마이페이지를 확인할 수 있다. UserDao에서 사용된 DB관련 메서드는 나중에 한 번이 정리해볼 예정이다. 수정하기 기능을 새로 도전하는 것이라 어려웠던 것도 있지만 일과 병행하느라 조금 늦어진 감이 있다. 아직, id 길이 체크와 빈칸 체크 등에서 그냥 오류가 나버려서 그것을 수정하면 마이페이지는 최종적으로 마무리할 수 있을 것 같다.
