[MATURI] 댓글 기능 상세설명

목차

1. 백단에서 댓글 작성 로직처리
2. 백단에서 댓글 조회 로직처리
3. 프론트 단의 댓글 CRUD요청 처리
4. 프론트 단의 댓글 이벤트 처리

1. 백단에서 댓글 작성/조회 로직처리

Service단의 댓글 작성로직 소스코드

public Comment write(Long memberId,
                       Long articleId,
                       Long ref,
                       Long refStep,
                       Long refMemberId,
                       String refMemberNickName,
                       String content) {
    Member findMember = memberRepository.findById(memberId).orElseThrow(() ->
            new IllegalArgumentException("맴버가 없습니다!"));
    Article findArticle = articleRepository.findById(articleId).orElseThrow(() ->
            new IllegalArgumentException("존재하지 않는 글입니다!"));

    //새로운 댓글일 경우 ref는 최대 값 + 1, refStep은 1
    //새로운 댓글이 아닐 경우(ref값이 있을 경우) ref그대로 사용, refStep은 refStep + 1
    if (ref == null) {
      Long maxRef = commentQRepository.findMaxRef(articleId);
      log.info("maxRef = {}", maxRef);
      ref = maxRef == null ? 1L : maxRef + 1;
    }
    refStep = refStep == null ? 1L : refStep + 1;

    Comment comment = Comment.builder()
            .ref(ref)
            .refStep(refStep)
            .refMemberId(refMemberId)
            .refMemberNickName(refMemberNickName)
            .member(findMember)
            .article(findArticle)
            .content(content)
            .status(CommentStatus.NORMAL)
            .build();

    Comment findComment = commentRepository.save(comment);
    log.info("write findComment = {}",findComment);
    return findComment;
  }

댓글의 그룹을 구분하기 위해 ref변수를 통해 구분하였습니다.

 

최초의 ref값은 1로 저장하고, 이후에는 최대 ref값에 +1을 해서 DB에 저장을합니다.

 

첫 댓글의 경우 refStep값은 1로 DB에 저장을 합니다.

댓글을 그룹별로 구분

댓글의  댓글을 작성했을 경우, refStep값을 +1시켜서 저장을 합니다.

 

이 때 댓글의 댓글의 댓글을 작성할경우 들여쓰기로 구분하지 않고 앞에 닉네임을 추가해서 구분할 수 있도록 설계하였습니다. 

refStep을 증가

2. 백단에서 댓글 조회 로직처리

Service단의 댓글 조회 로직 소스코드

public List<List<CommentDTO>> articleComment(Long memberId, Long articleId) {
	//댓글 Entity 데이터를 DB에서 가져옴
    List<Comment> comments = commentQRepository.findByArticleId(articleId);
    
    //댓글 Entity -> DTO로 변환
    List<CommentDTO> commentDTOs = createCommentDTO(memberId, comments);
    
    //댓글 DTO를 ref별로 묶어서 변환
    List<List<CommentDTO>> groupComments = groupComments(commentDTOs);

    return groupComments;
  }

먼저 DB에서 데이터를 가져와서 ref별로 묶어서 프론트단에서 편하게 출력할 수있도록 데이터를 List<List<CommentDTO>>의 타입으로 변환시켜줍니다.

ref별로 댓글 데이터를 묶어주는 groupComments 메서드

private List<List<CommentDTO>> groupComments(List<CommentDTO> comments) {

    List<List<CommentDTO>> groupedComments = new ArrayList<>();
    List<CommentDTO> currentGroup = null;
    Long previousRef = null;

    // 1. 현재 댓글과 이전 댓글의 ref 값을 비교하여 같은 그룹에 속하는지를 판단합니다.
    for (CommentDTO comment : comments) {
      Long currentRef = comment.getRef();

      // 2. 같은 그룹에 속하지 않는다면 새로운 그룹을 만들어서 DTO를 추가합니다.
      if (currentGroup == null || !previousRef.equals(currentRef)) {
        currentGroup = new ArrayList<>();
        groupedComments.add(currentGroup);
      }

      // 3. 같은 그룹에 속한다면, 현재 그룹의 DTO에 댓글을 추가합니다.
      currentGroup.add(comment);
      previousRef = currentRef;
    }
    // 4. 그룹화된 DTO 리스트를 반환합니다.
    return groupedComments;
}

3. 프론트 단의 댓글 CRUD요청 처리

javscript로 ajax요청으로 댓글 목록을 조회해서 appendChild메서드를 이용해서 html소스코드를 추가하였습니다.

프론트단의 댓글 CRUD ajax 요청 javascript 전체 소스코드

https://drive.google.com/file/d/1f46HmU9fJCDFseeUu0gpmYDNrd1n9InG/view?usp=share_link

4. 프론트 단의 댓글 이벤트 처리

클릭 이벤트 및 input 이벤트가 발생했을 때 실행되는 javaScript코드로 댓글추가 input 클릭, 취소, 작성, 대댓글 추가 input 등등의 다양한 로직을 처리하는 소스코드입니다.

javaScript 댓글 이벤트 처리 소스 코드

https://drive.google.com/file/d/1dyHQ14ZIX3VBc2N1LVHfvdsfisRGJGF9/view?usp=share_link

 

대표로 한가지 댓글 수정을 누르면 조회된 댓글 내용을 수정 폼으로 변경되는 이벤트를 처리한 코드를 설명하겠습니다.

댓글의 더보기 버튼 클릭시

댓글 수정 버튼 클릭시

 

댓글 수정을 누르면 수정 폼으로 변경되는 javascript 소스코드

function updateFormShow(obj){
    let commentReplysWrap = $(obj).closest('.comment-wrap');
    let textareaWrap = commentReplysWrap.find('.comment-right-wrap .textarea-wrap');
    let textarea = textareaWrap.find('textarea');
    let updateBtnWrap = commentReplysWrap.find('.update-btn-wrap');

    //더보기 버튼을 닫아준다.
    $(".ellipsis-content").removeClass("active"); // .active 클래스 제거
    $(".ellipsis-content").css("height","0");
    $(".ellipsis-content").css("border","0");

    //textarea css적용
    textareaWrap.removeClass("readonly");
    textarea.prop("readonly",false);
    textareaWrap.find(".textarea-under-line").css("width","100%");

    //버튼 보여지도록 변경
    updateBtnWrap.css('display','flex');
}

처음 부터 textarea 태그로 댓글을 출력시키고 readonly속성으로 수정폼처리를 하였습니다.