Merge pull request #34 from ekgus419/feature/33-n-comments

[고도화] 댓글 기능 고도화 - n차 대댓글

Author: ekgus419

src/main/resources/templates/articles/detail.html

@@ -61,8 +61,8 @@ <h1>첫번째 글</h1>
                 </div>
             </form>
 
-            <ul id="article-comments" class="row col-md-10 col-lg-8 pt-3">
-                <li class="parent-comment">
+            <ul class="article-comments">
+                <li class="article-comment">
                     <form class="comment-delete-form">
                         <input type="hidden" class="article-id">
                         <div class="row">
@@ -80,26 +80,7 @@ <h1>첫번째 글</h1>
                         </div>
                     </form>
 
-                    <ul class="row me-0">
-                        <li class="child-comment">
-                            <form class="comment-delete-form">
-                                <input type="hidden" class="article-id">
-                                <div class="row">
-                                    <div class="col-md-10 col-lg-9">
-                                        <strong>Uno</strong>
-                                        <small><time>2022-01-01</time></small>
-                                        <p class="mb-1">
-                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
-                                            Lorem ipsum dolor sit amet
-                                        </p>
-                                    </div>
-                                    <div class="col-2 mb-3 align-self-center">
-                                        <button type="submit" class="btn btn-outline-danger">삭제</button>
-                                    </div>
-                                </div>
-                            </form>
-                        </li>
-                    </ul>
+                    <ul class="child-comments"></ul>
 
                     <div class="row">
                         <details class="col-md-10 col-lg-9 mb-4">

src/main/resources/templates/articles/detail.th.xml

@@ -28,25 +28,20 @@
             <attr sel=".comment-textbox" th:name="content" />
         </attr>
 
-        <attr sel="#article-comments" th:remove="all-but-first">
-            <attr sel=".parent-comment[0]" th:each="articleComment : ${articleComments}">
+        <attr sel=".article-comments"
+              th:remove="all-but-first"
+              th:fragment="articleComments(childComments)"
+              th:classappend="${childComments} != null ? 'row me-0' : 'row col-md-10 col-lg-8 pt-3'"
+        >
+            <attr sel=".article-comment[0]" th:each="articleComment : ${childComments} ?: ${articleComments}">
                 <attr sel=".comment-delete-form" th:action="'/comments/' + ${articleComment.id} + '/delete'" th:method="post">
                     <attr sel="div/strong" th:text="${articleComment.nickname}" />
                     <attr sel="div/small/time" th:datetime="${articleComment.createdAt}" th:text="${#temporals.format(articleComment.createdAt, 'yyyy-MM-dd HH:mm:ss')}" />
                     <attr sel="div/p" th:text="${articleComment.content}" />
                     <attr sel="button" th:if="${#authorization.expression('isAuthenticated()')} and ${articleComment.userId} == ${#authentication.name}" />
                 </attr>
-                <attr sel="ul" th:if="${articleComment.childComments != null and !articleComment.childComments.isEmpty()}"
-                      th:remove="all-but-first">
-                    <attr sel=".child-comment[0]" th:each="childComment : ${articleComment.childComments}">
-                        <attr sel=".comment-delete-form" th:action="'/comments/' + ${childComment.id} + '/delete'" th:method="post">
-                            <attr sel="div/strong" th:text="${childComment.nickname}" />
-                            <attr sel="div/small/time" th:datetime="${childComment.createdAt}" th:text="${#temporals.format(childComment.createdAt, 'yyyy-MM-dd HH:mm:ss')}" />
-                            <attr sel="div/p" th:text="${childComment.content}" />
-                            <attr sel="button" th:if="${#authorization.expression('isAuthenticated()')} and ${childComment.userId} == ${#authentication.name}" />
-                        </attr>
-                    </attr>
-                </attr>
+
+                <attr sel=".child-comments" th:unless="${articleComment.childComments.isEmpty}" th:replace=":: articleComments(${articleComment.childComments})" />
             </attr>
             <attr sel=".parent-comment-id" th:name="parentCommentId" th:value="${articleComment.id}" />
         </attr>