2. 무한 댓글 리스트

댓글의 댓글은 계층형 구조를 가지고 저장되고

화면에 출력될 때도 계층형(트리 구조)으로 출력된다.

이 계층형 구조는 부모 글과 자식 글을 구분하기 위한 것으로

자식 글을 부모 글 보다 뒤로 들여쓰기 해서 다음 그림과 같이 트리(?)처럼 표현 할 수 있다.

여기서는 하나의 댓글을 둘러싼 박스(DIV)를 뒤로 물러나게 만들었다.

댓글 박스를 만드는 DIV의 좌표 값을(margin-left )값을 20px씩 더 주면 들여쓰기 형태로 구현된다.

즉, 댓글의 깊이(redepth)값에 20씩 곱하여 계산한다.

기존의 코드에 다음 코드를 추가하여 간단하게 처리하였다.

<c:forEach var="replylist" items="${replylist}" varStatus="status">
    <div style="border: 1px solid gray; width: 600px; padding: 5px; margin-top: 5px;
          margin-left: <c:out value="${20*replylist.redepth}"/>px; display: inline-block">   
        <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>
        <a href="#" onclick="fn_replyReply('<c:out value="${replylist.reno}"/>')">댓글</a>
        <br/>
        <div id="reply<c:out value="${replylist.reno}"/>"><c:out value="${replylist.rememo}"/></div>
    </div><br/>
</c:forEach>