#16 board : article detail view - create, delete comment

This commit is contained in:
haerong22
2022-08-23 00:52:36 +09:00
parent 5ce977e362
commit 7019244156
2 changed files with 30 additions and 14 deletions

View File

@@ -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>

View File

@@ -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>