게시글 페이지 기능 구현

ttaho·2023년 3월 3일
0

Project-board

목록 보기
15/16

게시글 페이지에서 게시글마다 바뀌어야하는 곳은 다음과 같다.

빨간영역이 게시글 자체의 필드들이고,
파란영역이 게시글의 댓글 필드들이다.

detail.th.xml에서 값들을 변경할 수 있게, detail.html의 바뀌어야될 태그들에 아이디를 달아주자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="taeho yun">
    <title>게시글 페이지</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>

<body>

<header id="header">
    헤더 삽입부
    <hr>
</header>

<main id="article-main" class="container">
    <header id="article-header" class="py-5 text-center">
        <h1>첫번째 글</h1>
    </header>

    <div class="row g-5">
        <section class="col-md-5 col-lg-4 order-md-last">
            <aside>
                <p><span id="nickname">Uno</span></p>
                <p><a id="email" href="mailto:djkehh@gmail.com">uno@mail.com</a></p>
                <p><time id="created-at" datetime="2022-01-01T00:00:00">2022-01-01</time></p>
                <p><span id="hashtag">#java</span></p>
            </aside>
        </section>

        <article id="article-content" class="col-md-7 col-lg-8">
            <pre>본문<br><br></pre>
        </article>
    </div>

    <div class="row g-5">
        <section>
            <form class="row g-3">
                <div class="col-8">
                    <label for="comment-textbox" hidden>댓글</label>
                    <textarea class="form-control" id="comment-textbox" placeholder="댓글 쓰기.." rows="3"></textarea>
                </div>
                <div class="col-auto">
                    <label hidden>댓글 쓰기</label>
                    <button class="btn btn-primary" id="comment-submit" type="submit">쓰기</button>
                </div>
            </form>
        </section>
    </div>

    <ul id="article-comments" class="row col-7">
        <li>
            <div>
                <strong>Uno</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>
        </li>
        <li>
            <div>
                <strong>Uno</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>
        </li>
    </ul>
    </section>
    </div>
    <div class="row g-5">
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo; prev</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">next &raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

</main>

<footer id="footer">
    <hr>
    푸터 삽입부
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>
</html>

detail.th.xml을 수정한다.

게시판 페이지가

th:each = article : ${articles}을 사용하여

article 객체마다 필드들을 꺼내줬다면
게시글 페이지에서는 th:object=${article}로 *{필드}이런 방법으로 필드들을 꺼내준다.

이제 http://localhost:8080/articles/{articleid} 에서 id를 바꿔주거나, 게시판 페이지에서 게시글을 누르면 해당하는 게시글의 페이지로 이동 후, 해당 게시글과 게시글댓글에 포함된 필드들을 확인할 수 있다.

profile
백엔드 꿈나무

0개의 댓글