V1(익명블로그)-게시글 상세보기 만들기

---

BoardNativeRepository 기능 추가 코드

    // 게시글 상세 보기 (특정 ID로 조회)
    public Board findById(Integer id) {
        String strQuery = """
                select * from board_tb where id = ?
                """;
        try {
            Query query = em.createNativeQuery(strQuery, Board.class);
            query.setParameter(1, id);
            return (Board) query.getSingleResult();
        } catch (Exception e) {
            return null;
        }
    }

---

BoardController - 상세보기 요청 추가

    // 게시글 상세보기 화면 요청
    // http://localhost:8080/board/1
    @GetMapping("/board/{id}")
    public String detailPage(@PathVariable(name = "id") Integer id, Model model) {
        // 유효성 검사 , 인증 검사

        Board board = boardNativeRepository.findById(id);
        model.addAttribute("board", board);

        return "board/detail";
    }

---

detail.mustache 코드

{{> layout/header}}
<div class="container p-5">

    <!-- 수정삭제버튼 섹션 -->
    <!-- d-flex justify-content-end: 버튼들을 오른쪽 정렬 -->
    <div class="d-flex justify-content-end">
        <!--
        수정 버튼: GET 방식으로 수정 폼 페이지로 이동
        {{! board.id}}: 현재 게시글의 ID를 URL에 포함
        RESTful URL 패턴: /board/{id}/update-form
        -->
        <a href="/board/{{board.id}}/update-form" class="btn btn-warning me-1">수정</a>

        <!--
        삭제 버튼: POST 방식으로 삭제 요청
        form을 사용하는 이유: DELETE 동작은 GET이 아닌 POST/DELETE 방식 사용
        RESTful URL 패턴: /board/{id}/delete
        -->
        <form action="/board/{{board.id}}/delete" method="post">
            <button class="btn btn-danger">삭제</button>
        </form>
    </div>

    <!-- 작성자 정보 표시 -->
    <div class="d-flex justify-content-end">
        <!-- {{! board.username}}: Board 객체의 getUsername() 메서드 호출 -->
        <b>작성자</b> : {{board.username}}
    </div>

    <!-- 게시글 내용 섹션 -->
    <div>
        <!-- 게시글 제목 -->
        <h2><b>{{board.title}}</b></h2>
        <hr />
        <!-- 게시글 본문 -->
        <div class="m-4 p-2">
            <!--
            {{! board.content}}: 게시글 내용 출력
            HTML 태그가 포함된 내용은 {{! board.content}} 형태로 사용 (이스케이프 해제)
            보안상 사용자 입력 내용은 기본적으로 HTML 태그를 이스케이프 처리
            -->
            {{board.content}}
        </div>
    </div>

    <!-- 댓글 섹션 (향후 구현 예정) -->
    <div class="card mt-3">
        <!-- 댓글 등록 폼 -->
        <div class="card-body">
            <!--
            댓글 등록 폼: POST 방식으로 댓글 저장
            향후 댓글 기능 구현시 사용할 예정
            현재는 정적 HTML로만 구성
            -->
            <form action="/reply/save" method="post">
                <textarea class="form-control" rows="2" name="comment" placeholder="댓글을 입력하세요"></textarea>
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-outline-primary mt-1">댓글등록</button>
                </div>
            </form>
        </div>

        <!-- 댓글 목록 헤더 -->
        <div class="card-footer">
            <b>댓글리스트</b>
        </div>

        <!-- 댓글 목록 (현재는 정적 더미 데이터) -->
        <div class="list-group">
            <!-- 댓글 아이템 1 -->
            <div class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex">
                    <!-- 댓글 작성자 배지 -->
                    <div class="px-1 me-1 bg-primary text-white rounded">cos</div>
                    <!-- 댓글 내용 -->
                    <div>댓글 내용입니다</div>
                </div>
                <!-- 댓글 삭제 버튼 -->
                <form action="/reply/1/delete" method="post">
                    <button class="btn">🗑</button>
                </form>
            </div>

            <!-- 댓글 아이템 2 -->
            <div class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex">
                    <div class="px-1 me-1 bg-primary text-white rounded">ssar</div>
                    <div>댓글 내용입니다</div>
                </div>
                <form action="/reply/1/delete" method="post">
                    <button class="btn">🗑</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{> layout/footer}}