본문 바로가기
BackEnd/Project

[Admin] Ch02. 댓글 관리 페이지 만들기

by 개발 Blog 2024. 8. 19.

공부 내용을 정리하고 앞으로의 학습에 이해를 돕기 위해 작성합니다.

이번 작업은 AdminLTE 템플릿을 활용해 댓글 관리 페이지를 구현했다. 이 페이지에서는 댓글 목록을 보여주고, 데이터 테이블(DataTable) 플러그인을 사용해 검색, 정렬, 페이지네이션 기능을 적용했다.

 

1. 댓글 관리 페이지 템플릿

댓글 관리 페이지는 기본적인 HTML 구조를 기반으로 하며, 데이터 테이블 플러그인을 사용해 테이블을 구성했다. 이 테이블은 댓글의 ID, 내용, 작성자, 작성일시를 표시한다. 다음은 해당 HTML 코드다.

<!DOCTYPE html>
<html lang="ko">
<head id="layout-head">
    <meta charset="UTF-8">
    <title>댓글 관리 페이지</title>

    <link rel="stylesheet" href="/js/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="/js/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="/js/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <header id="layout-header">헤더 삽입부</header>
    <aside id="layout-left-aside">왼쪽 사이드 바 삽입부</aside>

    <!-- Main content -->
    <main id="layout-main">
        <table id="main-table" class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>댓글 내용</th>
                <th>작성자</th>
                <th>작성일시</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>테스트 댓글이다.</td>
                <td>Eunchan</td>
                <td><time datetime="2024-01-01T00:00:00">2024-01-01 00:00:00</time></td>
            </tr>
            <tr>
                <td>2</td>
                <td>퍼가요~~</td>
                <td>Eunchan</td>
                <td><time datetime="2024-01-02T00:00:00">2024-01-02 00:00:00</time></td>
            </tr>
            <tr>
                <td>3</td>
                <td>악성 댓글 XXX</td>
                <td>Eunchan</td>
                <td><time datetime="2024-01-03T00:00:00">2024-01-03 00:00:00</time></td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th>ID</th>
                <th>댓글 내용</th>
                <th>작성자</th>
                <th>작성일시</th>
            </tr>
            </tfoot>
        </table>
    </main>
    <!-- /.content -->

    <aside id="layout-right-aside">오른쪽 사이드 바 삽입부</aside>
    <footer id="layout-footer">푸터 삽입부</footer>
</div>

<!--/* REQUIRED SCRIPTS */-->
<script id="layout-scripts">/* 공통 스크립트 삽입부 */</script>

<!--/* 페이지 전용 스크립트 */-->
<script src="/js/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/js/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="/js/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="/js/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="/js/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="/js/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="/js/plugins/jszip/jszip.min.js"></script>
<script src="/js/plugins/pdfmake/pdfmake.min.js"></script>
<script src="/js/plugins/pdfmake/vfs_fonts.js"></script>
<script src="/js/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="/js/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="/js/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<script>
    $(function () {
        $("#main-table").DataTable({
            "responsive": true, "lengthChange": false, "autoWidth": false,
            "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"],
            "pageLength": 10
        }).buttons().container().appendTo('#main-table_wrapper .col-md-6:eq(0)');
    });
</script>
</body>
</html>

 

2. 타임리프 템플릿 코드

타임리프를 통해 레이아웃과 공통 요소를 쉽게 적용할 수 있다. 아래는 타임리프를 활용한 템플릿 코드다.

<?xml version="1.0"?>
<thlogic>
    <attr sel="#layout-head" th:replace="~{layouts/layout-head :: common_head(~{::title}, (~{::link} ?: ~{}))}" />
    <attr sel="#layout-header" th:replace="~{layouts/layout-header :: header}" />
    <attr sel="#layout-left-aside" th:replace="~{layouts/layout-left-aside :: aside}" />
    <attr sel="#layout-main" th:replace="~{layouts/layout-main-table :: common_main_table('댓글 관리', (~{::#main-table} ?: ~{}))}" />
    <attr sel="#layout-right-aside" th:replace="~{layouts/layout-right-aside :: aside}" />
    <attr sel="#layout-footer" th:replace="~{layouts/layout-footer :: footer}" />
    <attr sel="#layout-scripts" th:replace="~{layouts/layout-scripts :: script}" />
</thlogic>

 

3. 컨트롤러 코드

기존 컨트롤러를 아래와 같이 수정했다. HttpServletRequest를 이용해 현재 URI를 모델에 추가하여, 타임리프 템플릿에서 활용할 수 있게 했다.

@RequestMapping("/management/article-comments")
@Controller
public class ArticleCommentManagementController {

    @GetMapping
    public String articleComments(
            @PageableDefault(size = 10, sort = "createdAt", direction = Sort.Direction.DESC) Pageable pageable,
            Model model,
            HttpServletRequest request // 추가
    ) {
        model.addAttribute("requestURI", request.getRequestURI()); // 추가
        return "management/article-comments";
    }
}

 

아래 사진은 댓글 관리 페이지를 실제로 실행한 화면이다. AdminLTE 템플릿을 기반으로 한 페이지로, 댓글 목록이 테이블 형태로 출력되고 있다. 데이터 테이블(DataTable) 플러그인을 사용하여 각 댓글에 대해 정렬, 검색, 페이지네이션이 가능하다. 화면 좌측에는 관리 메뉴가 위치해 있으며, 사이드바의 검색 기능도 정상적으로 동작한다.

 

4. AdminLTE 검색 기능 적용

AdminLTE의 내장된 검색 플러그인을 통해 사이드바에서 검색 기능을 사용할 수 있다.

 

layout-left-aside.html

  <!--/* SidebarSearch Form */-->
  <div class="form-inline">
    <div class="input-group" data-widget="sidebar-search" data-min-length="1">
      <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
      <div class="input-group-append">
        <button class="btn btn-sidebar">
          <i class="fas fa-search fa-fw"></i>
        </button>
      </div>
    </div>
  </div>

 

공식 문서에 따르면 기본 minLength는 3이지만, 현재 프로젝트에서는 1로 설정해 두 글자만 입력해도 검색 결과가 자동완성된다.

 

 

마지막으로 article-comments.html과 article-comments.th.xml의 이름을 변경했다. 이유는 프로젝트 내에서 일관된 네이밍 규칙을 적용하기 위해서이다. 기존의 파일명이 카멜케이스(articleComments)로 되어 있었지만, 대부분의 파일들이 케밥케이스(article-comments) 형식을 따르고 있었다. 이를 맞추어 네이밍을 통일함으로써 코드의 가독성을 높이고 유지보수의 편의성을 확보할 수 있게 되었다.

 

이번 포스팅에서는 AdminLTE 레이아웃과 DataTable 플러그인을 활용해 댓글 관리 페이지를 구현했다. 데이터 테이블의 정렬, 검색, 페이지네이션 기능을 적용하여 사용자 편의성을 높였으며, 코드의 가독성과 일관성을 위해 파일명을 케밥 케이스에서 카멜 케이스로 변경했다. 이러한 수정 작업을 통해 프로젝트 전반의 코드 품질을 개선하고 유지보수성을 강화했다.

'BackEnd > Project' 카테고리의 다른 글

[Admin] Ch02. 로그인 페이지 만들기  (0) 2024.08.20
[Admin] Ch02. 회원 관리 페이지 만들기  (0) 2024.08.20
[Admin] Ch02. 게시글 관리 페이지 만들기  (0) 2024.08.19
[Admin] Ch02. AdminLTE 기초 셋업  (0) 2024.08.19
[Admin] Ch02. 뷰 엔드포인트 테스트 정의  (0) 2024.08.18

관련글

티스토리툴바