[게시판] 게시글 수정(1) - 사용자 판별하여 수정/삭제 버튼 렌더링

게시글 수정 기능 구현 과정을 기록해보겠습니다.

먼저, 모든 사용자가 모든 글에 대한 수정과 삭제 권한을 갖으면 안되므로 해당 글의 작성자에게만 수정/삭제 권한을 줄 것입니다.

 

현재 로그인한 사용자 = 특정 글 작성자 라면 글 상세보기 화면에서 수정/삭제 버튼이 렌더링 되게하고

해당 기능을 실행할 수 있도록 구현했습니다.

 

 

---

 

📌 현재 로그인한 사용자 = 특정 글 작성자 인지 판별하는 로직

 [ 서버 ]  

BoardService.java

	public Map<String, Object> boardDetail(Long id) {
		BoardEntity boardEntity = boardRepository.findById(id)
				.orElseThrow(() -> new RuntimeException("게시글을 찾을 수 없습니다."));

		String currentUserId = SecurityUtil.getCurrentUserId();
		if (currentUserId == null || "anonymousUser".equals(currentUserId)) {
			throw new RuntimeException("로그인한 사용자가 없습니다.");
		}

		Long authorId = boardEntity.getUserId();
		boolean isAuthor = currentUserId.equals(authorId.toString());

		BoardDTO boardDTO = BoardDTO.of(boardEntity, isAuthor);

		Map<String, Object> response = new HashMap<>();
		response.put("board", boardDTO);
		response.put("isAuthor", isAuthor);

		return response;
	}

 

현재 로그인된 사용자를 가져와서 비교해야 하는데요.

게시글 작성할 때 썼던 SecurityUtil을 여기에서 또 써먹어줬습니다.

SecurityUtil은 아래 링크에서 확인하실 수 있습니다! 😀

https://xooxpeak.tistory.com/entry/%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B2%8C%EC%8B%9C%EA%B8%80-%EC%9E%91%EC%84%B1-%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0

 

 

SecurityUtil을 사용해 현재 로그인된 사용자를 currentUserId에 담고, 글을 작성한 사용자를 authorId에 담아줬습니다.

그리고 equals 메서드를 사용해 둘이 같은지 판별합니다.

판별한 boolean 값은 isAuthor에 담아줬습니다.

 

 

BoardDTO.java

• 게시판에 필요한 요소 외에 작성여부를 추가했습니다.
  왜냐하면 작성여부에 따라 수정과 삭제 버튼이 있어야 하기 때문입니다.
• Board 객체와 작성여부를 알려주는 boolean 객체를 대입하면 객체를 생성해주는 정적 팩토리 메서드를 추가했습니다. 이 메서드는 BoardEntity 객체와 작성자 여부를 받아와서 BoardDTO 객체를 생성하여 반환합니다.

private boolean isAuthor;

 

	public static BoardDTO of(BoardEntity boardEntity, boolean isAuthor) {
		return BoardDTO.builder()
				.id(boardEntity.getId())
				.userId(boardEntity.getUserId())
				.title(boardEntity.getTitle())
				.content(boardEntity.getContent())
				.boardDate(boardEntity.getBoardDate())
				.views(boardEntity.getViews())
				.userLike(boardEntity.getUserLike())
				.isAuthor(isAuthor)
				.build();
	}

 

 

---

 

 [ 클라이언트 ] 

BoardView.js

먼저 작성자 여부 상태의 상태함수를 만들어주고

 

isAuthor 상태가 true일 때만 수정/버튼이 화면에 렌더링됩니다.

 

---

💣 [ 트러블슈팅 ] isAuthor가 항상 false 가 되는 이슈

문제

작성자에게만 수정과 삭제 버튼이 보이도록 하려면 현재 로그인한 사용자와 작성자가 같은지 비교해야 합니다.

그러기 위해서 SecurityUtil에서 가져온 currentUserId와 boardEntity에서 가져온 authorId를 비교했었는데요.

여기서 문제점은 둘이 서로 항상 다른 값이라 isAuthor가 false 는 것 입니다.

 

원인

디버깅을 해봤더니

currentUserId는 user의 userId (말 그대로 회원의 아이디 입니다.) 를 가져오는데

authorId는 boardEntity의 userId는 회원의 아이디가 아닌, 회원의 PK값 (id)을 가져온 것이 원인이었습니다.

헷갈리게 설정해놓은 나의 죄…😓

 

해결

원인을 알았으니, 둘 중 하나를 수정하면 해결될 것이라고 생각했습니다.

판별하기 위해서는 아이디나 닉네임보다는 고유한 값인 PK값을 비교하는 것이 낫다고 판단하여, currentUserId를 수정하려고 했습니다.

그러나 SecurityUtil의 getCurrentUserId 메서드와 UserDetails 인터페이스의 getUsername 메서드를 확인한 결과, getUsername을 수정할 수 없다는 것을 알게 되었습니다. 🙄

따라서, authorId가 PK 값이 아닌 회원의 아이디 값을 가져오도록 방향을 바꾸기로 결정했습니다.

BoardService.java

String authorId = boardEntity.getUser().getUserId();

 

boardEntity 객체에서 getUser() 메서드로 사용자를 나타내는 객체를 반환하고, 이 사용자 객체에서 getUserId() 메서드를 호출하여 사용자의 아이디를 얻습니다.

또한, 유저의 아이디의 데이터타입은 String 이기 때문에 데이터 타입도 함께 변경해주었습니다.

 

결과

authorId에도 currentUserId와 같은 값이 들어왔습니다!

그 결과, isAuthor 값은 true가 되었네요.

 

사용자가 작성한 게시글을 클릭했을 때의 모습입니다.

콘솔창에 보면 isAuthor가 true로 잘 찍혀있구요.

그에 따라 수정과 삭제 버튼이 보이게 됩니다!

아직은 못생긴 버튼들...

 

 

---

 

 

(+)

어차피 회원가입할 때 아이디 중복 검사를 해서 같은 아이디의 회원은 없을 테니 괜찮을 것 같지만, 한편으로는 여전히 찝찝한 기분을 떨칠 수가 없네요. 추후에 더 공부해서 필요성을 깨닫게 된다면 꼭 수정하도록 하겠습니다!