From 0f8607bd4feb2c3a5cad14b88c07287d8571f173 Mon Sep 17 00:00:00 2001
From: Lee Min Woo <lmw7414@naver.com>
Date: Sun, 15 Jan 2023 16:27:33 +0900
Subject: [PATCH] =?UTF-8?q?#70=20-=20=EB=8C=80=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EB=B7=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/templates/articles/detail.html  | 57 ++++++++++++-------
 .../templates/articles/detail.th.xml          | 19 +++++--
 2 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/src/main/resources/templates/articles/detail.html b/src/main/resources/templates/articles/detail.html
index 9dd2be1..892b576 100644
--- a/src/main/resources/templates/articles/detail.html
+++ b/src/main/resources/templates/articles/detail.html
@@ -49,11 +49,11 @@ <h1>첫번째 글</h1>
 
     <div class="row g-5">
         <section>
-            <form class="row g-3" id="comment-form">
+            <form class="row g-3 comment-form">
                 <input type="hidden" class="article-id">
                 <div class="col-md-9 col-lg-8">
                     <label for="comment-textbox" hidden>댓글</label>
-                    <textarea class="form-control" id="comment-textbox" placeholder="댓글 쓰기.." rows="3" required></textarea>
+                    <textarea class="form-control comment-textbox" id="comment-textbox" placeholder="댓글 쓰기.." rows="3" required></textarea>
                 </div>
                 <div class="col-md-3 col-lg-4">
                     <label for="comment-submit" hidden>댓글 쓰기</label>
@@ -62,41 +62,58 @@ <h1>첫번째 글</h1>
             </form>
 
             <ul id="article-comments" class="row col-md-10 col-lg-8 pt-3">
-                <li>
-                    <form class="comment-form">
+                <li class="parent-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>
+                                <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" id="delete-comment-button">삭제</button>
+                                <button type="submit" class="btn btn-outline-danger">삭제</button>
                             </div>
                         </div>
                     </form>
-                </li>
-                <li>
+
+                    <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>
+
                     <div class="row">
-                        <div class="col-md-10 col-lg-9">
-                            <strong>Uno2</strong>
-                            <small><time>2022-01-01</time></small>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
-                                Lorem ipsum dolor sit amet
-                            </p>
-                        </div>
-                        <div class="col-2 mb-3">
-                            <button type="submit" class="btn btn-outline-danger" hidden>삭제</button>
-                        </div>
+                        <details class="col-md-10 col-lg-9 mb-4">
+                            <summary>댓글 달기</summary>
+                            <form class="comment-form">
+                                <input type="hidden" class="article-id">
+                                <input type="hidden" class="parent-comment-id">
+                                <textarea class="form-control comment-textbox" placeholder="댓글 쓰기.." rows="2" required></textarea>
+                                <button class="form-control btn btn-primary mt-2" type="submit">쓰기</button>
+                            </form>
+                        </details>
                     </div>
                 </li>
             </ul>
-
         </section>
     </div>
 
diff --git a/src/main/resources/templates/articles/detail.th.xml b/src/main/resources/templates/articles/detail.th.xml
index fee49c2..523f7f3 100644
--- a/src/main/resources/templates/articles/detail.th.xml
+++ b/src/main/resources/templates/articles/detail.th.xml
@@ -24,19 +24,30 @@
         </attr>
 
         <attr sel=".article-id" th:name="articleId" th:value="*{id}" />
-        <attr sel="#comment-form" th:action="@{/comments/new}" th:method="post">
-            <attr sel="#comment-textbox" th:name="content" />
+        <attr sel=".comment-form" th:action="@{/comments/new}" th:method="post">
+            <attr sel=".comment-textbox" th:name="content" />
         </attr>
 
         <attr sel="#article-comments" th:remove="all-but-first">
-            <attr sel="li[0]" th:each="articleComment : ${articleComments}">
-                <attr sel="form" th:action="'/comments/' + ${articleComment.id} + '/delete'" th:method="post">
+            <attr sel=".parent-comment[0]" th:each="articleComment : ${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.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>
+            <attr sel=".parent-comment-id" th:name="parentCommentId" th:value="${articleComment.id}" />
         </attr>
 
         <attr sel="#pagination">