Post

댓글관리 기능 업데이트

5월 20일 메이플 주문서 시뮬레이터에 댓글관리 기능이 업데이트 되었습니다. 어떤기능이 추가되었고, 개발과정에서 어떤 고민이 있었는지 기술합니다.

기능 요구사항

  • 댓글 신고기능
    • 댓글 우측에 있는 신고버튼을 사용해서 댓글을 신고할 수 있는 기능이다.
    • 신고된 댓글의 정보는 신고 리스트에 저장되어야 한다.
  • 신고 댓글조회
    • 관리자(ADMIN)권한을 가진 사용자는 신고된 댓글목록을 조회할 수 있다.
    • 신고된 댓글은 신고된 최신순으로 출력된다.
  • 신고목록에서 댓글 삭제
    • 관리자(ADMIN)는 댓글관리 페이지에서 신고된 댓글을 목록에서 삭제할 수 있다.
  • 신고된 댓글 삭제
    • 관리자(ADMIN)는 댓글관리 페이지에서 신고된 댓글을 삭제할 수 있다.
    • 신고목록뿐만 아니라 실제 댓글도 삭제되는 기능이다.

Backend

테이블 추가

신고된 댓글 정보를 저장하기 위해서는 신고정보를 담은 테이블이 추가적으로 필요하다. 기존의 댓글(Comment)테이블에 신고받은 횟수를 저장하는 컬럼을 추가할 수도 있지만, 신고받지 않는 댓글이 절대다수를 차지하는 상황에서 신고횟수를 담은 컬럼을 추가하는것은 공간의 낭비라고 판단하였다. 따라서 신고된 댓글의 ID, 그리고 신고된 횟수를 담은 새로운 테이블을 만들었다. 댓글의 정보가 필요하다면 댓글(Comment)테이블과의 조인을 통해서 데이터를 가져온다.

현재 메이플 주문서 시뮬레이터의 WAS는 Spring Boot로 개발되고, 데이터베이스에 접근하기 위해서 JPA를 사용하고 있다. 다음은 신고된 댓글 정보를 담은 report_comment 테이블에 매핑되는 엔티티를 정의한 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@Entity
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@AllArgsConstructor
@Getter
public class ReportComment {

    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "report_id")
    private Long id;

    @OneToOne(cascade = CascadeType.REMOVE)
    @JoinColumn(name = "comment_id")
    private Comment comment;

    private int count;

    // 생성자
    public ReportComment(Comment comment) {
        this.comment = comment;
        this.count = 1;
    }

    public void addCount() {
        count++;
    }

    public static ReportComment from(Comment comment) {
        return new ReportComment(comment);
    }
}
  • id: report_comment 테이블의 PK인 report_id컬럼을 표현한다.
    • 테이블이 PK를 자동 증가시키면서 관리하는 IDENTITY전략을 사용하였다.
    • 신고 댓글목록을 최신순으로 조회할때 사용된다. 최근에 생성된 신고정보일 수록 PK의 값이 크기때문에 PK의 내림차순을 조건으로 조회쿼리가 작성된다.
  • comment: 연관관계에 있는 댓글(Comment)정보이다.
  • count: 신고된 횟수를 나타낸다.

API

이름메서드URI
댓글 신고POST/api/item/comment/report
신고 댓글 조회GET/api/manage/report-comments
신고된 댓글삭제DELETE/api/manage/report-comments
신고리스트에서 댓글 삭제DELETE/api/manage/report-comments/list

댓글 신고

  • 사용자가 댓글을 신고합니다.
  • 신고된 댓글은 신고리스트 테이블에 저장됩니다.
  • 요청
    • 댓글을 신고할 대는 다음과 같이 댓글ID 정보를 담은 JSON데이터를 HTTP 메세지 바디에 담아 요청해야합니다.
      1
      2
      3
      
      {
        "commentId": example_comment_id
      }
      
  • 응답
    • 신고에 성공하면 204 No Content 응답을 반환합니다.
    • 존재하지 않는 댓글ID를 전달해 신고에 실패했을 경우 다음 데이터를 응답합니다.
      1
      2
      3
      4
      
      {
        "code": 1003,
        "message": "요청한 ID에 해당하는 댓글이 존재하지 않습니다."
      }
      

신고 댓글 조회

  • 신고된 댓글을 조회합니다.
  • 관리자(ADMIN)권한을 가진 사용자만 사용할 수 있는 기능입니다.
  • 요청
    • 쿼리스트링으로 page, size정보를 받아 조회되는 데이터의 offset, limit를 조절할 수 있습니다.
  • 응답
    • 조회에 성공했을 경우 신고된 댓글의 정보를 다음과 같은 JSON형식으로 응답합니다.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      
      {
        "reports": {
          "comments": [
            {
              "reportId": 2,
              "commentId": 1918,
              "name": "example_name",
              "createdDate": "2024-05-19T23:28:09.139968",
              "content": "example_content",
              "count": 2
            }
          ]
        }
      }
      
      • reportId: 신고 ID
      • commentId: 신고된 댓글의 ID
      • name: 댓글 작성자 이름
      • createdDate: 댓글 작성일자
      • content: 댓글 내용
      • count: 신고된 횟수
    • 관리자(ADMIN)권한을 소유하지 않은 사용자가 요청을 보내면 다음과 같은 JSON형식으로 응답합니다. 서비스에서 정한 오류 코드(code)와, 오류의 내용을 나타내는 메세지(message)입니다.
      1
      2
      3
      4
      
      {
        "code": 2004,
        "message": "해당 관리자 기능에 접근권한이 없습니다."
      }
      

신고된 댓글 삭제

  • 신고목록에서 조회한 댓글을 삭제하는 기능입니다.
  • 신고목록과, 실제 댓글을 모두 삭제합니다.
  • 관리자(ADMIN)권한을 가진 사용자만 사용할 수 있는 기능입니다.
  • 요청
    • 아래는 요청을 처리하기 위해 필요한 JSON 데이터의 형식입니다.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      
      {
        "comments": {
          "ids": [
            {댓글ID_1},
            {댓글ID_2},	
            {댓글ID_3}	
          ]
        }
      }
      
      • comments.ids 내부에 삭제할 댓글ID 리스트를 담아 전달하면 됩니다.
  • 응답
    • 댓글 삭제 요청에 성공하면 200 OK 응답을 반환합니다.
    • 관리자권한이 없는 사용자가 요청했을 경우 오류메세지를 반환합니다.

신고리스트에서 댓글 삭제

  • 신고 리스트에서만 댓글을 삭제합니다.
  • 실제 댓글은 삭제되지 않습니다.
  • 관리자(ADMIN)권한을 가진 사용자만 사용할 수 있는 기능입니다.
  • 요청
    • 아래는 요청을 처리하기 위해 필요한 JSON 데이터의 형식입니다.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      
      {
        "reports": {
          "ids": [
            example_report_id_1
            example_report_id_2,	
            example_report_id_3		
          ]
        }
      }
      
      • reports.ids 내부에 삭제할 신고ID 리스트를 담아 전달하면 됩니다.
  • 응답
    • 댓글 삭제 요청에 성공하면 200 OK 응답을 반환합니다.
    • 관리자권한이 없는 사용자가 요청했을 경우 오류메세지를 반환합니다.

Frontend

댓글 신고 모달

  • 댓글 옆의 경광등 이미지를 누르면 댓글을 신고할 수 있는 모달이 나타납니다.
  • 확인버튼을 누르면 신고 요청이 전달됩니다.
  • 취소버튼을 누르면 모달창이 닫힙니다.

헤더에 댓글관리 링크 추가

  • 헤더에는 관리자만 접근할 수 있는 관리 드랍다운이 추가되었습니다. 드랍다운 아이템 링크를 통해서 여러 관리 페이지로 접근할 수 있습니다.

댓글 관리 UI

  • 관리자가 신고된 댓글 목록을 조회하고, 관리할 수 있는 페이지 입니다.
  • 신고된 댓글과 관련된 정보가 조회됩니다.
  • 댓글을 선택해 댓글을 삭제하거나, 댓글 목록에서만 삭제요청을 전달할 수 있습니다.
This post is licensed under CC BY 4.0 by the author.