From 70192441560050d8cef2bae49fb7044c2ebfbef8 Mon Sep 17 00:00:00 2001
From: haerong22 <haerong22@naver.com>
Date: Tue, 23 Aug 2022 00:52:36 +0900
Subject: [PATCH] #16 board : article detail view - create, delete comment

---
 .../resources/templates/articles/detail.html  | 31 ++++++++++++-------
 .../templates/articles/detail.th.xml          | 13 ++++++--
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/board/src/main/resources/templates/articles/detail.html b/board/src/main/resources/templates/articles/detail.html
index 5eca5968..2e117fa5 100644
--- a/board/src/main/resources/templates/articles/detail.html
+++ b/board/src/main/resources/templates/articles/detail.html
@@ -49,10 +49,11 @@
 
         <div class="row g-5">
             <section>
-                <form class="row g-3">
+                <form class="row g-3" id="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"></textarea>
+                        <textarea class="form-control" id="comment-textbox" placeholder="댓글 쓰기.." rows="3" required></textarea>
                     </div>
                     <div class="col-md-3 col-lg-4">
                         <label for="comment-submit" hidden>댓글 쓰기</label>
@@ -62,17 +63,25 @@
 
                 <ul id="article-comments" class="row col-md-10 col-lg-8 pt-3">
                     <li>
-                        <div class="row">
-                            <strong>Bobby</strong>
-                            <small><time>2022-08-12</time></small>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
-                                Lorem ipsum dolor sit amet
-                            </p>
-                        </div>
+                        <form class="comment-form">
+                            <input type="hidden" class="article-id">
+                            <div class="row">
+                                <div class="col-md-10 col-lg-9">
+                                    <strong>Bobby</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" id="delete-comment-button">삭제</button>
+                                </div>
+                            </div>
+                        </form>
                     </li>
                     <li>
-                        <div class="row">
+                        <div>
                             <time><small>2022-08-12</small></time>
                             <strong>Bobby</strong>
                             <p>
diff --git a/board/src/main/resources/templates/articles/detail.th.xml b/board/src/main/resources/templates/articles/detail.th.xml
index f947ceba..a89bfd71 100644
--- a/board/src/main/resources/templates/articles/detail.th.xml
+++ b/board/src/main/resources/templates/articles/detail.th.xml
@@ -18,11 +18,18 @@
         </attr>
     </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>
+
     <attr sel="#article-comments" th:remove="all-but-first">
         <attr sel="li[0]" th:each="articleComment : ${articleComments}">
-            <attr sel="div/strong" th:text="${articleComment.nickname}" />
-            <attr sel="div/small/time" th:datetime="${article.createdAt}" th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd HH:mm:ss')}" />
-            <attr sel="div/p" th:text="${articleComment.content}" />
+            <attr sel="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>
         </attr>
     </attr>
 </thlogic>
\ No newline at end of file