프로젝트 코드 변경 사항 및 메모 #6

💡 댓글, 대댓글

1. 데이터베이스 테이블 변경

create table qna_reply
(    
    reply_seq number not null,    
    qna_num number not null,
    reply_date date not null, 
    reply_content varchar(1000) not null,
    member_id varchar(30) not null,
    reply_group not null number default 0,
    reply_order not null number default 0, 
    CONSTRAINT reply_pk PRIMARY KEY (reply_seq),
    CONSTRAINT reply_fk FOREIGN KEY (qna_num) REFERENCES qna(qna_num),
    CONSTRAINT reply_fk2 FOREIGN KEY (member_id) REFERENCES member(member_id)    
);

대댓글 기능 추가를 위해 reply_group, reply_order 컬럼을 추가하고 ReplyVO를 생성하였음.

2. 네이버 카페 댓글 같은 디자인

• 답글, 수정, 삭제가 날짜 옆에 뜬다.
• 모든 덧글에 답글이 뜨고, 수정과 삭제의 경우 내가 쓴 댓글에만 뜬다.
• 답글을 누르면 하단에 입력창이 뜬다.
• 답글이 달린 댓글인 경우 삭제를 할 수 없다.
• 답글은 글 작성자 혹은 관리자만 달 수 있다.

세션에 저장된 아이디와 ajax로 댓글 리스트를 불러올 때 아이디를 비교해서 수정, 삭제 버튼 보임 여부를 결정한다.

이런식의 디자인으로 완성했다. 깔끔한 것 같아서 마음에 든다.

2. 원댓글 입력

reply_group은 하나의 원댓글을 묶어주는 역할을 한다. 새로운 원댓글을 입력하면 기존에 존재하는 reply_group에서 1을 더해줘서 삽입해주면 된다. 원래는 max(reply_group)을 하는 메서드를 따로 만들었었는데 sql문을 통해서 추가하는 방법을 생각했다.

<insert id="insertReply" parameterType="com.spring.community.ReplyVO">
        insert into qna_reply values(REPLY_SEQ.NEXTVAL, #{qna_num}, sysdate,  #{reply_content}, #{member_id}, (select max(reply_group)+1 from qna_reply), 0)        
</insert>

하지만 이렇게 사용하는 경우 다른 원글에서 댓글을 달 때 다른 글의 reply_group 최고 값을 참조하게 된다. 상관 없을 수도 있겠지만 일단 내가 원하는 바의 데이터 형식은 아니기 때문에 다시 수정하기로 했다.

<insert id="insertReply" parameterType="com.spring.community.ReplyVO">
        insert into qna_reply values(REPLY_SEQ.NEXTVAL, #{qna_num}, sysdate,  #{reply_content}, #{member_id}, (select nvl(max(reply_group)+1,0) from qna_reply where qna_num = #{qna_num}), 0)        
</insert>

where절 조건을 추가하고 nvl 함수를 이용해서 처음 원댓글이 들어 갈 때 max()값이 null인 경우 0이 추가 되게 하였다.

// 댓글 입력 
    $(".reply-origin-btn").on("click", function() {
        var reply_content = $(".reply-text").val(); 

        if(session_id == 'null') {
            Swal.fire({
                text: "로그인 이후 이용해주세요.",
                icon: "info",
            }) .then(function(){
                location.href='login.do';
            });  
        }else {
            if(!isWriter) {
                Swal.fire("","작성자만 댓글을 입력 할 수 있습니다.","info");
            }else {
                if(reply_content == '') {
                    Swal.fire("","내용을 입력해주세요.","info");
                }else {

                    var param = $("#reply-origin").serialize(); 
                    console.log(param)
                    $.ajax({
                        type : 'POST',
                        url : '/setak/insertReply.do',
                        data : param,
                        dataType : 'text',
                        contentType:'application/x-www-form-urlencoded; charset=utf-8',
                        success:function(){
                            getReplyList(); 
                        },
                        error:function() {
                            alert("Ajax 통신 실패");
                        }
                    });
                }
            }        
        }

    });

몸이 별론데 역시 하면 좋군