Spring Boot/구현해보기
닉네임 변경하기
xowoony
2023. 1. 10. 09:46
학습일 : 2022. 01. 10
MemberMapper.xml
유저의 정보를 email 기준으로 select 해온다.
그리고 유저 정보 업데이트 확인을 위해
update 쿼리도 작성해준다.
<!--회원탈퇴, 닉네임 변경-->
<select id="selectUserByEmail"
resultType="com.emptybeer.etb.entities.member.UserEntity">
SELECT `email` AS `email`,
`password` AS `password`,
`nickname` AS `nickname`,
`name` AS `name`,
`contact` AS `contact`,
`address_postal` AS `addressPostal`,
`address_primary` AS `addressPrimary`,
`address_secondary` AS `addressSecondary`,
`registered_on` AS `registeredOn`
FROM `etb_member`.`users`
WHERE BINARY `email` = #{email}
LIMIT 1
</select><update id="updateUser"
parameterType="com.emptybeer.etb.entities.member.UserEntity">
UPDATE `etb_member`.`users`
SET `password` = #{password},
`nickname` = #{nickname},
`name` = #{name},
`contact` = #{contact},
`address_postal` = #{addressPostal},
`address_secondary` = #{addressSecondary},
`registered_on` = #{registeredOn}
WHERE BINARY `email` = #{email}
LIMIT 1
</update>
IMemberMapper.java
인터페이스 작성
// 회원탈퇴, 닉네임 변경
UserEntity selectUserByEmail(@Param(value = "email") String email); int updateUser(UserEntity user);
MemberService.java
서비스에서 문제가 있었는데
나는 원래 있는 user의 nickname 정보를 existingUser에 set 해주고 있었음.
그래서 유저가 바꾸려고 하는 닉네임 정보가 set 되지 않고 기존의 닉네임이 그대로 set 되었기 때문에
변경은 완료가 정상적으로 되어도
바꾸려고 했던 닉네임으로 변경이 적용되지 않는 현상이 발생하였음.
이를 해결하기 위해
String changeNickname을 통해
existingUser.setNickname(changeNickname);를 작성해 existingUser에 유저가 새로 바꾸려고 하는 닉네임이 set 될 수 있도록 조치하여 해결하였다.
// 닉네임 수정
@Transactional
public Enum<? extends IResult>changeNickname(UserEntity user, String changeNickname) {
UserEntity existingUser = this.memberMapper.selectUserByEmail(user.getEmail());
existingUser.setNickname(changeNickname);
return this.memberMapper.updateUser(existingUser) > 0
? CommonResult.SUCCESS
: CommonResult.FAILURE;
}
public UserEntity getUser(String email) {
return this.memberMapper.selectUserByEmail(email);
}
MemberController.java
문제는 로그인을 해서 마이페이지에 들어왔을 경우 마이페이지 홈에서 유저의 기본 정보인
(변경후 닉네임, 주소, 연락처 등)이 반영이 안되어 있었다.
이를 해결하기 위해서는
로그인 했을 때에 유저 정보를 다 받아 올 수 있게 하여야 하는데
session.setAttribute("user", this.memberService.getUser(user.getEmail()));-> 유저 이메일 기준으로 유저의 모든 정보를 불러옴
구문을 적어줘서 해당 문제를 해결하였다.
// 닉네임 수정
@RequestMapping(value = "changeNickname",
method = RequestMethod.PATCH,
produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public String patchChangeNickname(@SessionAttribute(value = "user", required = false) UserEntity user, @RequestParam(value = "changeNickname") String changeNickname, HttpSession session) {
Enum<?> result = this.memberService.changeNickname(user, changeNickname);
System.out.println("넘어오나????");
JSONObject responseObject = new JSONObject();
responseObject.put("result", result.name().toLowerCase());
//세션 null -> 다시 user
session.setAttribute("user", this.memberService.getUser(user.getEmail()) );// UserEntity 값. user.getEmail() 기준으로 다시 유저정보 모두 들고 와서 session에 set
return responseObject.toString();
}@RequestMapping(value = "login",
method = RequestMethod.POST,
produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public String postLogin(HttpSession session, UserEntity user) {
Enum<?> result = this.memberService.login(user);
if (result == CommonResult.SUCCESS) {
session.setAttribute("user", user); // 해당 요소에 user 이름의 user 값을 가지는 HTML 속성을 추가한다.
session.setAttribute("user", this.memberService.getUser(user.getEmail()));
System.out.println("이메일/비밀번호 맞음.");
} else {
System.out.println("이메일/비밀번호 틀림.");
}
JSONObject responseObject = new JSONObject();
responseObject.put("result", result.name().toLowerCase());
return responseObject.toString();
}
changeNickname.js
const form = window.document.getElementById('form');
form.onsubmit = (e)=>{
e.preventDefault();
if (form['nicknameModify'].value === '') {
alert('변경하실 닉네임을 입력해 주세요.');
return;
}
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('changeNickname', form['nicknameModify'].value);
// formData.append('email', form['email'].value);
xhr.open('PATCH', './changeNickname');
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status >= 200 && xhr.status < 300) {
const responseObject = JSON.parse(xhr.responseText);
console.log(xhr.responseText);
switch (responseObject['result']) {
case'success':
alert('닉네임이 성공적으로 변경되었습니다.');
window.location.href = 'myPage';
break;
default:
alert('닉네임을 변경하지 못하였습니다. 잠시 후 다시 시도해 주세요.');
}
} else {
alert('서버와 통신하지 못하였습니다. 잠시 후 다시 시도해 주세요.');
}
}
}
xhr.send(formData);
}
ChangeNickname.html
<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>잔이비어 :: 마이페이지</title>
<!-- common.css + common.js 연결 -->
<th:block th:replace="~{fragments/head :: common}"></th:block>
<!-- myPage.css 연결 -->
<link rel="stylesheet" th:href="@{/member/resources/stylesheets/changeNickname.css}">
<!-- myPage.js 연결 -->
<script defer th:src="@{/member/resources/scripts/changeNickname.js}"></script>
</head>
<body th:if="${session.user != null}">
<!-- header -->
<th:block th:replace="~{fragments/body :: header}"></th:block>
<!--무언가를 불러오고 있습니다 loading-->
<th:block th:replace="~{fragments/body :: cover}"></th:block>
<!-- main -->
<main>
<form id="form">
<input type="hidden" th:value="${session.userEmail}" name="email">
<!-- beerSection1 -->
<section class="beer-section" id="beerSection">
<!-- Section1 -->
<div class="title-box1" id="titleBox1">
<div class="title">MY PAGE</div>
<div class="title-content">잔이비어 마이페이지</div>
</div>
<!-- Section2 -->
<div class="title-box2" id="titleBox2">
<table>
<tbody>
<tr>
<!-- 왼쪽 섹션 -->
<td class="category-tab">
<table>
<tbody>
<tr class="category-title">
<td>모아보기</td>
</tr>
<tr class="category-content">
<td>
<a th:href="@{/memberBbs/myArticle}">
<div>작성한 글 보기</div>
</a>
</td>
</tr>
<tr class="category-content">
<td>
<a th:href="@{/memberBbs/myComment}">
<div>작성한 댓글 보기</div>
</a>
</td>
</tr>
<tr class="category-content">
<td>
<a th:href="@{/memberBbs/myLike}">
<div>좋아요한 글 보기</div>
</a>
</td>
</tr>
<tr class="category-title">
<td>
회원정보 수정
</td>
</tr>
<tr class="category-content content4">
<td>
<a th:href="@{/member/changeNickname}">
<div>닉네임 변경</div>
</a>
</td>
</tr>
<tr class="category-content">
<td>
<a th:href="@{/member/changeContact}">
<div>연락처 변경</div>
</a>
</td>
</tr>
<tr class="category-content">
<td>
<a th:href="@{/member/changeAddress}">
<div>주소 변경</div>
</a>
</td>
</tr>
<tr class="category-content">
<td><a th:href="@{/member/delete}">
<div>회원 탈퇴</div>
</a></td>
</tr>
</tbody>
</table>
</td>
<!-- 오른쪽 섹션 -->
<td class="category-tab2">
<div class="change-nickname-container">
<span class="profile-container">
<div>
<div>
<div>
<span class="nick" th:text="${session.user.nickname}">유저 닉네임</span>
<span>님</span>
</div>
<div class="email" th:text="${session.user.getEmail()}">유저 이메일</div>
</div>
</div>
</span>
<div>
<table>
<caption class="title">닉네임 변경</caption>
<tbody>
<tr>
<td>
<label>
<input type="text" class="nickname" id="nicknameModify"
name="nicknameModify" placeholder="변경하실 닉네임을 입력해 주세요.">
</label>
</td>
</tr>
<tr>
<td>
<label class="submit-container">
<input type="submit" value="변경하기" class="modify" id="modify"
name="modify">
</label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</form>
</main>
<!-- footer -->
<th:block th:replace="~{fragments/body :: footer}"></th:block>
</body>
</html>
이상 닉네임 변경하기 완료!!!!