#16 board: child comment - view
This commit is contained in:
haerong22
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Bobby">
|
||||
<meta name="author" content="bobby">
|
||||
<title>게시글 페이지</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||
@@ -14,7 +14,7 @@
|
||||
<body>
|
||||
|
||||
<header id="header">
|
||||
헤더
|
||||
헤더 삽입부
|
||||
<hr>
|
||||
</header>
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
</section>
|
||||
|
||||
<article id="article-content" class="col-md-9 col-lg-8">
|
||||
<pre>본문<br><br></pre>
|
||||
<pre>본문</pre>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
@@ -49,11 +49,11 @@
|
||||
|
||||
<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,46 +62,63 @@
|
||||
</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>Bobby</strong>
|
||||
<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">
|
||||
<time><small>2022-08-12</small></time>
|
||||
<strong>Bobby</strong>
|
||||
<p>
|
||||
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" hidden>삭제</button>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="row g-5">
|
||||
<nav aria-label="Page navigation example">
|
||||
<nav id="pagination" aria-label="Page navigation">
|
||||
<ul class="pagination">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
@@ -116,12 +133,11 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer id="footer">
|
||||
<hr>
|
||||
푸터
|
||||
푸터 삽입부
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
th:href="@{/articles(searchType=${searchTypeHashtag},searchValue=${hashtag})}"
|
||||
/>
|
||||
</attr>
|
||||
|
||||
<attr sel="#article-content/pre" th:text="*{content}" />
|
||||
|
||||
<attr sel="#article-buttons" th:if="${#authorization.expression('isAuthenticated()')} and *{userId} == ${#authentication.name}">
|
||||
@@ -23,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">
|
||||
|
||||
Reference in New Issue
Block a user