TIL 2024-01-22 타임리프 작성자가 아닐 시 버튼 안보이게 하기

 

현재 제작중인 팀프로젝트 스왑스왑

 

정말 잘 만들고 있다!! 동적 쿼리(제목, 카테고리, 지역) 및 자신이 찜한 게시글 확인 (서브 쿼리) 찜 기능, 커서 기반 페이지네이션

 

아이 이뻐

 

근데 문제가 있었다!!

자신이 쓴 게시글이 아닌데도 수정하기, 업하기, 삭제하기 등이 보이는 것(물론 쓸 수 없게 예외처리 해두긴 했다)

 

이러면 사용자 경험이 안좋아지는 것...

 

그래서 어떻게 할지 하다가 th:if 문을 알게 됐다!

 

현재 컨트롤러에서는 자신이 찜을 했는지 안했는지 알기 위해서 Member 를 매개변수로 받고 있다.

 

@GetMapping("/posts/{postId}")
    public String getPost(
            @PathVariable Long postId,
            @AuthMember Member member,
            Model model
    ) {
        PostGetResponseDto responseDto = postService.getPost(postId, member);

        model.addAttribute("postGetResponseDto", responseDto);
        model.addAttribute("postId", postId);

        return "post/post";
    }

 

여기서 responseDto 로 받아온 멤버랑 AuthMember랑 맞지 않는다면? 작성자가 아닌 것

 

@GetMapping("/posts/{postId}")
    public String getPost(
            @PathVariable Long postId,
            @AuthMember Member member,
            Model model
    ) {
        PostGetResponseDto responseDto = postService.getPost(postId, member);

        model.addAttribute("postGetResponseDto", responseDto);
        model.addAttribute("postId", postId);
        
        String seeMemberNickname;
        if(member == null) {
            seeMemberNickname = "";
        } else {
            seeMemberNickname = member.getNickname();
        }

        model.addAttribute("isWriter", responseDto.author().equals(seeMemberNickname));

        return "post/post";
    }

 

이렇게 작성해서 isWriter를 넣어준다

 

저 if 문은 member가 null 이면 getNickname 때 예외가 발생해서 if 문으로  묶어준 것이다.

 

<div class="post-up-button"
               th:if="${isWriter}"
               th:data-post-id="${postId}"
               th:onclick="upPost(this.getAttribute('data-post-id'))"><a sec:authorize="isAuthenticated()">업하기</a></div>
          <div class="post-delete-button"
               th:if="${isWriter}"
               th:data-post-id="${postId}"
               th:onclick="deletePost(this.getAttribute('data-post-id'))">
            <a sec:authorize="isAuthenticated()">삭제하기</a>

 

이런 식으로 th:if 를 넣으면 true일 때 이 요소를 넣겠다!가 되는 것이다.

isWriter는 닉네임 일치할때 true니까 작성자만 보이게 되는 것!! (닉네임이 유니크해야된다)

 

간단한 타임리프~~~