8월 1일 화요일 TIL 회고록

개인 프로젝트 작업

---

프론트엔드 게시글 삭제 구현 

 

먼저 게시글 삭제 버튼을 만들었다.

<button type="button" class="btn btn-primary" onclick="boardDelete(${response.id})" style="font-size: 12px;">게시물 삭제</button>

그리고 게시글 삭제 function을 만들었다.

     function boardDelete(boardId) {
        if (
          confirm(
            "정말 삭제하시겠습니까??"
          ) == true
        ) {
          boardDeleteYes(boardId);
        }
      }
      function boardDeleteYes(boardId) {
        var settings = {
          url: `http://localhost:8080/api/basic-boards/${boardId}`,
          method: "DELETE",
          timeout: 0,
          headers: {
            Authorization: localStorage.getItem("accessToken"),
          },
        };

        $.ajax(settings)
          .done(function (response) {
            console.log(response);
            window.location = "ex.html";
          })
          .fail(function (response) {
            console.log(response);
            alert(response.message);
          });
      }

 

실행 결과

게시물 삭제 버튼을 누르면 정말 삭제하시겠습니까?? alert가 출력되며 확인 버튼을 누를시 게시글이 삭제된다.

h2 console에서도 게시글이 삭제되었다.

 

---

댓글 상세보기 API 구현

댓글 API들을 보는데 댓글 전체 조회는 있는데 댓글 상세 조회 기능은 없길래 API를 만들었다.

 

CommentController.class

  // 댓글 상세 조회
  @GetMapping("/comments")
  public Page<CommentResponse> getSelectComment(
      @AuthenticationPrincipal UserDetailsImpl userDetails,
      @RequestParam Long boardId) {
    return commentService.getSelectComment(userDetails.getUser(), boardId);
  }

조회이므로 GetMapping 어노테이션을 사용했고 매개변수로는 UserDetailsImpl, @RequestParam boardId를 받도록 만들었다. 

그 후 commentService.getSelectComment로 리턴시켰다.

 

CommentResponse.class

  public CommentResponse(Comment comment, String username) {
    this.id = comment.getId();
    this.content = comment.getContent();
    this.username = username;
    this.createdAt = comment.getCreatedDate();
    this.lastModifiedAt = comment.getLastModifiedDate();
    this.ref = comment.getRef();
    this.refOrder = comment.getRefOrder();
    this.answerNum = comment.getAnswerNum();
    this.parentNum = comment.getParentNum();
//    this.hasLike = hasLike;
//    this.commentLike = commentLike;
  }

ResponseDto에 생성자를 만들어주었다. 좋아요를 눌렀는지 확인하는 hasLike와 commentLike는 아직 기능 구현을 하지않아 주석처리 해놓았다.

 

CommentServiceImpl.class

  @Override
  @Transactional(readOnly = true)
  public Page<CommentResponse> getSelectComment(User user, Long boardId) {
    List<Comment> comments = commentRepository.findAllByBoardId(boardId);
    List<CommentResponse> commentResponses = new ArrayList<>();
    for (Comment comment : comments) {
      CommentResponse response = new CommentResponse(comment, comment.getUsername());
      commentResponses.add(response);
    }

    Collections.reverse(commentResponses);
    return new PageImpl<>(commentResponses);
  }

commentRepository.findAllByBoardId를 사용해 boardId에 있는? 댓글들을 comments에 넣는다.

반복문을 사용해 comments에 값들을 commentResponse에 넣어준 후 Collections.reverse를 사용해 내림차순으로 정렬시켰다.

 

실행 결과

"content": [
        {
            "id": 7,
            "content": "댓글3",
            "username": "dangddoong",
            "createdAt": "2023-08-01T21:45:26.306058",
            "lastModifiedAt": "2023-08-01T21:45:26.306058",
            "ref": 3,
            "refOrder": 0,
            "answerNum": 0,
            "parentNum": 0,
            "hasLike": false,
            "commentLike": 0
        },
        {
            "id": 6,
            "content": "댓글2",
            "username": "dangddoong",
            "createdAt": "2023-08-01T21:45:23.559635",
            "lastModifiedAt": "2023-08-01T21:45:23.559635",
            "ref": 2,
            "refOrder": 0,
            "answerNum": 0,
            "parentNum": 0,
            "hasLike": false,
            "commentLike": 0
        },
        {
            "id": 5,
            "content": "댓글1",
            "username": "dangddoong",
            "createdAt": "2023-08-01T21:45:21.094958",
            "lastModifiedAt": "2023-08-01T21:45:21.094958",
            "ref": 1,
            "refOrder": 0,
            "answerNum": 0,
            "parentNum": 0,
            "hasLike": false,
            "commentLike": 0
        }
    ],

포스트맨에선 정상적으로 동작하는데.. html에서는 동작이 되나 한개만 불러와진다.. ㅠㅠ

h2 console에서는 BOARD_ID가 2번인 게시글에 댓글이 3개 달려있지만

 

여기에선 댓글이 하나밖에 조회가 안된다.

신기한건 크롬 콘솔에서는 잘 불러와진다. 근데 왜 보여지는건 한개일까.. 쉽지않다 ㅋㅋㅋ

내일 고쳐봐야겠다..