Skip to content

Commit

Permalink
#70 - 대댓글 뷰 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
@lmw7414
lmw7414 committed Jan 15, 2023
1 parent 334f33b commit 0f8607b
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 24 deletions.
57 changes: 37 additions & 20 deletions src/main/resources/templates/articles/detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>

Expand Down
19 changes: 15 additions & 4 deletions src/main/resources/templates/articles/detail.th.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down

0 comments on commit 0f8607b

Please sign in to comment.