[java] Java를 이용한 대댓글 기능

구현된 화면은 다음과 같습니다.

대댓글

---

1. table 생성

---

CREATE TABLE board_reply (
   reply_id NUMBER(10) NOT NULL,
   board_id NUMBER(10),
   parent_id NUMBER(10),
   depth NUMBER(10),
   reply_content CLOB,
   reply_writer varchar(100) NOT NULL,
   register_datetime date DEFAULT sysdate,
   CONSTRAINT pk_board_reply PRIMARY KEY(reply_id)
 );

---

2. jsp - html 

---

<!-- 댓글 : S -->
<div class="bov_mid" style="padding-top: 1em">

    <!-- 댓글 리스트 표출 : S -->
    <c:forEach var="reply" items="${replyList}" varStatus="status">
    
        <!-- (1) 부모 댓글 : S -->
        <c:if test="${reply.parent_id eq '0'}">
            <div id="comment<c:out value="${reply.reply_id}"/>" class="comm_list"> 
                <p>
                    <c:out value="${reply.reply_writer}"/>
                    <c:if test="${sessoin_id eq reply.reply_writer}">
                        <em style="margin-left: 4px; font-size: 10px; color: #da3238;">작성자</em>
                    </c:if>
                </p>
                <p id="replyList_content<c:out value="${reply.reply_id}"/>" class="replyList_content"><c:out value="${reply.reply_content}"/></p>

                <!-- 작성일자 -->
                <div>
                    <span class="info_image"></span>
                    <p id="replyList_date"><c:out value="${reply.register_datetime}"/></p>
                </div>

                <!-- 댓글수정/삭제 -->
                <span class="bottomLine">
                    <a href="#none" onclick="re_reply(<c:out value="${reply.reply_id}"/>);return false" class="link_reply" style="clear: both; float: right; align-self: center; padding-top: 10px;">댓글작성</a>
                    <p id="reply_popup" style="display: inline-block;position: relative; cursor: pointer; width: 20px;height: 22px; background-image: url(../images/egovframework/cmmn/comment_icon.png);" 
                    onclick="detail_box(<c:out value="${reply.reply_id}"/>);"></p>
                </span>
            </div>
        </c:if>
        <!-- (1) 부모 댓글 : E -->
        
        <!-- (2) 자식 댓글 : S -->        
        <c:if test="${reply.parent_id ne '0'}">
            <div id="comment<c:out value="${reply.reply_id}"/>" class="comm_list" style="padding-left: 60px; border-top: 1px solid #eee; background-color: #f8f8f8;"> 
                <p>
                    <c:out value="${reply.reply_writer}"/>
                    <c:if test="${sessoin_id eq reply.reply_writer}">
                        <em style="margin-left: 4px; font-size: 10px; color: #da3238;">작성자</em>
                    </c:if>
                </p>
                <p id="replyList_content<c:out value="${reply.reply_id}"/>" class="replyList_content"><c:out value="${reply.reply_content}"/></p>

                <!-- 작성일자 -->
                <div>
                    <span class="info_image"></span>
                    <p id="replyList_date"><c:out value="${reply.register_datetime}"/></p>
                </div>

                <!-- 댓글수정/삭제 -->
                <span class="bottomLine" style="justify-content: flex-end;">
                    <p id="reply_popup" style="display: inline-block;position: relative; cursor: pointer; width: 20px;height: 22px; background-image: url(../images/egovframework/cmmn/reply_icon.png);" 
                    onclick="detail_box(<c:out value="${reply.reply_id}"/>);"></p>
                </span>
            </div>
        </c:if>
        <!-- (2) 자식 댓글 : E -->
    </c:forEach>

    <div class="comm_write" style="padding-top: 1em; border-top: 1px solid #E0E0E0;">
        <!-- 댓글 작성하기 : S -->
        <span style="text-align: left; margin-bottom: 1em; display: block;">댓글쓰기</span>
        <c:if test="${sessoin_id ne null}">
            <textarea name="reply_content_area" id="reply_content_area" placeholder="" title="댓글쓰기"></textarea>
        </c:if>
        <c:if test="${sessoin_id eq null}">
            <textarea name="reply_content_area" id="reply_content_area" placeholder="로그인이 필요합니다." readonly title="댓글쓰기"></textarea>
        </c:if>
        <!-- 댓글 작성하기 : E -->

        <!-- 자동입력방지 : S -->
        <div class="form-group" style="float: right; display: block; width: 26em; margin-left: 0.6em;">
            <div class="captcha" style="display: flex;">
                <div class="captcha_child">
                    <img id ="captchaImg" title ="캡차 이미지" src="captchaImg.do" alt="캡차 이미지"/>
                    <div id ="captchaAudio" style="display:none"></div>
                </div>
                <div class="captcha_child_two">
                    <a onclick="javaScript:getImage()" class="refreshBtn">
                        <i class="fa fa-refresh" aria-hidden="true"></i> 새로고침
                    </a>
                    <a onclick="javaScript:audio()" class="refreshBtn">
                        <i class="fa fa-volum-up" aria-hidden="true"></i> 음성듣기
                    </a>
                </div>
            </div>
            
            <!-- 댓글 등록버튼 : S -->
            <div style="display: flex; padding-top:5px">	
                <input id="answer" type="text" value="" style="width:193px; margin-right: 8px;">
                <input id="reply_save" type="button" value="등록"/>
            </div>
            <!-- 댓글 등록버튼 : E -->
            
        </div>
        <!-- 자동입력방지 : E -->
        
    </div>
    <!-- 댓글 리스트 표출 : E -->    
    
</div>
<!-- 댓글 : E -->

---

3. 상세화면

---

/* 상세화면 */
@RequestMapping(value = "/boardView.do")
public ModelAndView boardView(
    BoardVO boardVO,
    replyVO replyVO,
    HttpServletRequest request
) throws Exception {
    ModelAndView mv = new ModelAndView();
    HttpSession session = request.getSession();

    try {
        List<BoardVO> BoardList = boardService.selectBoardView(boardVO);
        mv.addObject("resultList", BoardList);

        List<replyVO> ReplyList = boardService.selectBoardReplyList(boardVO);
        mv.addObject("replyList", ReplyList);

        // 다음글
        String next_id = BoardList.get(0).getNext_id();
        String next_subject = BoardList.get(0).getNext_subject();
        mv.addObject("next_id", next_id);
        mv.addObject("next_subject", next_subject);

        // 이전글
        String prev_id = BoardList.get(0).getPrev_id();
        String prev_subject = BoardList.get(0).getPrev_subject();
        mv.addObject("prev_id", prev_id);
        mv.addObject("prev_subject", prev_subject);

        if(session.getAttribute("user_id") != null) {
            String sessoin_id = session.getAttribute("user_id").toString();
            mv.addObject("sessoin_id", sessoin_id);
        }
        mv.setViewName("board/view");

    }catch (Exception e) {
        e.printStackTrace();
    }
    return mv;
}

 

// service.java

/* 댓글 리스트 가져오기 */
List<replyVO> selectBoardReplyList(BoardVO vo) throws Exception;

 

// serviceImpl.java

/* 댓글 리스트 가져오기 */
@Override
public List<replyVO> selectBoardReplyList(BoardVO vo) throws Exception {
    return boardDAO.selectBoardReplyList(vo);
}

 

// dao.java

/* 댓글 리스트 가져오기 */
List<replyVO> selectBoardReplyList(BoardVO vo) throws Exception;

 

// XML

<!-- 댓글 리스트 -->
<select id="selectBoardReplyList" parameterType="BoardVO" resultType="replyVO">
    select 
        reply_id, board_id,parent_id, depth, reply_content, reply_writer,register_datetime
    from 
        board_reply
    where
        board_id = #{id}
    start with parent_id = 0
    connect by prior reply_id = parent_id
    order siblings by reply_id 
</select>

---

4. 댓글 저장 

---

// javaScript 

// 댓글 저장 : S
function reply_save() {
    var reply_content_area = $("#reply_content_area").val();
    var board_id = $("#board_id").val();

    //값 셋팅
    var objParams = {
            board_id        : $("#board_id").val(),
            parent_id       : "0",    
            depth           : "0",
            reply_content   : reply_content_area
    };

    //ajax 호출
    $.ajax({
        url         :    "/reply_save.do",
        dataType    :    "json",
        contentType :    "application/x-www-form-urlencoded; charset=UTF-8",
        type        :    "post",
        async       :     false, //동기: false, 비동기: ture
        data        :    objParams,
        success     :    function(retVal){

            if(retVal.code != "SUCCESS") {
                alert(retVal.message);
                return false;
            }else{
                location.href= "/boardView.do?id="+board_id;
            }
        },
        error : function(request, status, error){
            alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
        }
    });

    //댓글 초기화
    $("#reply_content").val("");
}
// 댓글 저장 : E

 

// controller.java

// 댓글 저장
@ResponseBody
@RequestMapping(value="/reply_save.do", method=RequestMethod.POST)
public Object boardReplySave(
        @RequestParam Map<String, Object> paramMap,
        HttpServletRequest request
) {
    //리턴값
    Map<String, Object> map = new HashMap<String, Object>();

    try {
        // 세션 생성 
        HttpSession session = request.getSession(); 
        String sessoin_id = session.getAttribute("user_id").toString();
        paramMap.put("reply_writer", sessoin_id);

        //정보입력
        int result = boardService.insertBoardReply(paramMap);

        if(result > 0){
            map.put("code", "SUCCESS");
            map.put("reply_id",  paramMap.get("reply_id"));
            map.put("reply_writer",  paramMap.get("reply_writer"));
            map.put("reply_content",  paramMap.get("reply_content"));
            map.put("parent_id", paramMap.get("parent_id"));
            map.put("message", "등록에 성공 하였습니다.");
        }else{
            map.put("code", "FAIL");
            map.put("message", "등록에 실패 하였습니다.");
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return map;

}

 

// service.java

/* 댓글 등록 */
int insertBoardReply(Map<String, Object> paramMap) throws Exception;

 

// serviceImpl.java

/* 댓글 등록 */
@Override
public int insertBoardReply(Map<String, Object> paramMap) throws Exception {
    return boardDAO.insertBoardReply(paramMap);
}

 

// dao.java

/* 댓글 등록 */
int insertBoardReply(Map<String, Object> paramMap) throws Exception;

 

// XML

<!-- 댓글 등록 -->
<insert id="insertBoardReply" parameterType="java.util.HashMap">
    <selectKey keyProperty="reply_id" resultType="int" order="BEFORE">
      select REPLY_SEQ.nextval FROM DUAL
    </selectKey>
    insert into board_reply(
        reply_id,
        board_id,
        parent_id,
        depth,
        reply_content,
        reply_writer
    )values(
        #{reply_id},
        #{board_id},
        #{parent_id},
        #{depth},
        #{reply_content},
        #{reply_writer}
    )
</insert>

---

5. 대댓글

---

// javaScript

// 댓글작성 클릭 : S
function re_reply(id) {
    $('#re_reply_div').remove();

    var htmlmsg = "";
    htmlmsg =  '<div id="re_reply_div" style="display: flex; padding-left: 50px; padding-top: 15px; padding-bottom: 15px;">'
    htmlmsg += 		'<textarea name="re_reply_content_area" id="re_reply_content_area" placeholder="" title="댓글쓰기" style="float: none; width: 100%; height: 65px;"></textarea>'
    htmlmsg += 		'<span style="padding-left: 5px; width: 50px;">'
    htmlmsg += 			'<input id="re_reply_button" type="button" value="등록" onclick="re_reply_save('+ id +');" style="height: 100%;width: calc(100% - -1.2em);">'
    htmlmsg += 		'</span>'
    htmlmsg += '</div>';
    $('#comment' + id).append(htmlmsg);
}
// 댓글작성 클릭 : E

// 대댓글 저장 : S
function re_reply_save(id) {
     var re_reply_content = $("#re_reply_content_area").val();

     //값 셋팅
     var board_id = $("#board_id").val();
     var objParams = {
             board_id        : board_id,
             parent_id       : id,    
             depth           : 1,
             reply_content   : re_reply_content
     };
     
     //ajax 호출
     $.ajax({
         url         :    "/reply_save.do",
         dataType    :    "json",
         contentType :    "application/x-www-form-urlencoded; charset=UTF-8",
         type        :    "post",
         async       :     false, //동기: false, 비동기: ture
         data        :    objParams,
         success     :    function(retVal){

             if(retVal.code != "SUCCESS") {
                 alert(retVal.message);
                 return false;
             }else{
                 location.href= "/boardView.do?id="+board_id;
             }
         },
         error : function(request, status, error){
            alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
         }
     });

     //댓글 초기화
     $("#reply_content").val("");
 }
// 대댓글 저장 : E

---

// 댓글수정, 댓글삭제 div 태그 표출하기
var globalId = "";
function detail_box(id) {
    $('#comment' + id + ' #reply_popup').empty();
    var msg = "popper" + id;
    globalId = id;

    var htmltag = "";
    htmltag += '<div class="ly_more popper" id="'+ msg + '" x-placement="bottom-end" style="position: absolute;will-change: transform;top: 0px;left: 0px;transform: translate3d(-84px, 20px, 0px);">';
    htmltag += '<div class="tip">';
    htmltag += '</div>';
    htmltag += '<ul class="type_icons" style="list-style: none;">';
    htmltag += 		'<li>';
    htmltag += 			'<a style="white-space: nowrap;">';
    htmltag += 				'<span class="ico ico_link"><em class="blind">copy link</em></span>';
    htmltag +=				'<span onclick="reply_modify('+id+');">댓글수정</span>';
    htmltag += 			'</a>';
    htmltag += 		'</li>';
    htmltag += 		'<li>';
    htmltag += 			'<a>';
    htmltag += 				'<span class="ico ico_embed"><em class="blind">embed</em></span>';
    htmltag +=				'<span onclick="reply_delete('+id+');">댓글삭제</span>';
    htmltag += 			'</a>';
    htmltag += 		'</li>';
    htmltag += '</ul>';
    htmltag += '<div x-arrow="" class="popper__arrow">';
    htmltag += '</div>';
    htmltag += '</div>';

    $('#comment' + id + ' #reply_popup').append(htmltag);
}

// 댓글수정, 삭제 div태그 이외의 영역 클릭시 display none
$(document).mouseup(function (e){
    var popup = $("#popper" + globalId);
    if(popup.has(e.target).length == 0){
        popup.css('display', 'none')
    }
});

---

참조 : https://huskdoll.tistory.com/792#google_vignette 

참조 : https://yjdawn.tistory.com/159

참조 : https://forest71.tistory.com/51