3. 댓글 리스트 / 삭제

댓글 리스트는 해당 게시물에 맞는 댓글을 읽어서 게시판 리스트처럼 뿌려주면 된다.

다음 그림처럼 댓글 입력 화면 뒤에 리스트를 나열 하였다.

먼저 댓글 리스트는 해당 게시물을 가져올 때(board5Read 컨트롤 처리시) 같이 가져와야 한다.

다음 코드처럼 글 읽기 컨트롤(board5Read)에

댓글 리스트를 가져오는 서비스(selectBoard5ReplyList)를 추가해 주고

반환 받은 리스트(replylist)를 JSP로 전달해(modelMap) 준다.

public String board5Read(HttpServletRequest request, ModelMap modelMap) {
   
    String brdno = request.getParameter("brdno");
   
    boardSvc.updateBoard5Read(brdno);
    BoardVO boardInfo = boardSvc.selectBoardOne(brdno);
    List<?> listview = boardSvc.selectBoard5FileList(brdno);
    List<?> replylist = boardSvc.selectBoard5ReplyList(brdno);
   
    modelMap.addAttribute("boardInfo", boardInfo);
    modelMap.addAttribute("listview", listview);
    modelMap.addAttribute("replylist", replylist);
   
    return "board5/BoardRead";
}

Board5Ctr.java

public List<?> selectBoard5ReplyList(String param) {

        return sqlSession.selectList("selectBoard5ReplyList", param);

}

Board5Svc.java

JSP 파일에서 다음과 같이 앞서 추가했던 댓글 입력 코드 뒤에

댓글 리스트를 출력하는 코드를 작성한다.

<div style="border: 1px solid; width: 600px; padding: 5px">
    <form name="form1" action="board5ReplySave" method="post">
        <input type="hidden" name="brdno" value="<c:out value="${boardInfo.brdno}"/>">
        <input type="hidden" name="reno">
        작성자: <input type="text" name="rewriter" size="20" maxlength="20"> <br/>
        <textarea name="rememo" rows="3" cols="60" maxlength="500" placeholder="댓글을 달아주세요."></textarea>
        <a href="#" onclick="fn_formSubmit()">저장</a>
    </form>
</div>

<c:forEach var="replylist" items="${replylist}" varStatus="status">
    <div style="border: 1px solid gray; width: 600px; padding: 5px; margin-top: 5px;">   
        <c:out value="${replylist.rewriter}"/> <c:out value="${replylist.redate}"/>
        <a href="#" onclick="fn_replyDelete('<c:out value="${replylist.reno}"/>')">삭제</a>
        <a href="#" onclick="fn_replyUpdate('<c:out value="${replylist.reno}"/>')">수정</a>
        <br/>
        <div id="reply<c:out value="${replylist.reno}"/>"><c:out value="${replylist.rememo}"/></div>
    </div>
</c:forEach>

<div id="replyDiv" style="width: 99%; display:none">
    <form name="form2" action="board5ReplySave" method="post">
        <input type="hidden" name="brdno" value="<c:out value="${boardInfo.brdno}"/>">
        <input type="hidden" name="reno">
        <textarea name="rememo" rows="3" cols="60" maxlength="500"></textarea>
        <a href="#" onclick="fn_replyUpdateSave()">저장</a>
        <a href="#" onclick="fn_replyUpdateCancel()">취소</a>
    </form>
</div>

BoardRead.jsp

리스트(replylist)의 개수만큼 반복해서(forEach) 개별 댓글들을 출력해 준다.

게시판 리스트에서는 Table 테그를 이용했지만

여기서는 DIV를 사용했다.

예전에는 많은 개발자들이 리스트를 Table 테그로 생성했지만 근래에는 DIV를 많이 사용한다.

replyDiv는 수정을 위한 입력 폼으로 삭제시 댓글번호를 전달하기 위해 사용한다.

자세한 내용은 댓글 수정 부분에서 설명할 것이다.

삭제는 fn_replyDelete, 수정은 fn_replyUpdate 함수를 호출하고 파라메터로 댓글 번호(reno)를 넘겨준다.

삭제는 다음과 같이 댓글 번호(reno)를 숨겨진 필드에 넣어서

삭제 컨트롤(board5ReplyDelete)를 호출(submit)하면 된다.

function fn_replyDelete(reno){
    if (!confirm("삭제하시겠습니까?")) {
        return;
    }
    var form = document.form2;

    form.action="board5ReplyDelete";
    form.reno.value=reno;
    form.submit();   
}

BoardRead.jsp

컨트롤에서는 전송 받은 내용을 서비스에 전달하여

해당 댓글을 삭제 한 뒤 다시 해당 글읽기 페이지로 이동한다.

해당 글을 가져오기 위해 게시 글 번호(brdno)를 파라메터로 넘겨준다.

    @RequestMapping(value = "/board5ReplyDelete")
    public String board5ReplyDelete(HttpServletRequest request, BoardReplyVO boardReplyInfo) {
       
        boardSvc.deleteBoard5Reply(boardReplyInfo.getReno());

        return "redirect:/board5Read?brdno=" + boardReplyInfo.getBrdno();
    }

Board5Ctr.java