공부 내용을 정리하고 앞으로의 학습에 이해를 돕기 위해 작성합니다.
이번 포스팅에서는 AdminLTE의 모달 기능을 이용하여 게시글 관리 페이지에서 게시글의 상세 내용을 보여줄 수 있는 모달을 구현했다.
1. AdminLTE 모달 참조
모달 레이아웃은 아래와 같이 AdminLTE에서 제공하는 기본 모달 레이아웃을 참조했다.
그리고 다음과 같이 모달 구조를 설정했다.
layout-main-table-modal.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>공통 메인 세부 컨텐츠 (모달)</title>
</head>
<body>
<div class="modal fade" id="layout-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 id="modal-title" class="modal-title">제목</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<article class="modal-body">
<pre>
본문
</pre>
</article>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
<form>
<button type="submit" class="btn btn-danger">삭제</button>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>layout-main-table-modal.th.xml
<?xml version="1.0"?>
<thlogic>
<!-- 실제 url 주입은 javascript에 의해 동적으로 이루어져야 한다. th:action은 해당 form에 csrf 토큰을 자동으로 세팅하는데 사용됨. -->
<attr sel=".modal-footer/form" th:action="@{#}" th:method="post" />
</thlogic>
이렇게 설정된 모달을 article 페이지에 적용하여 게시글의 상세 내용을 모달로 표시하도록 구성했다.
article.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><a data-toggle="modal" data-target="#layout-modal">새 글</a></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><a data-toggle="modal" data-target="#layout-modal">아무글</a></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><a data-toggle="modal" data-target="#layout-modal">스프링 부트 블로그 정리</a></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 -->
<div class="modal fade" id="layout-modal"></div>
<!-- /.modal -->
<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)'); // main-table_wrapper ID는 플러그인에 의해 자동 생성됨
});
</script>
<script>
$(document).ready(() => {
$('#layout-modal').on('show.bs.modal', (event) => {
const id = $(event.relatedTarget).data('id');
fetch(`/management/articles/${id}`)
.then(response => response.json())
.then(data => {
$('.modal-title').text(data.title);
$('.modal-body pre').text(data.content);
$('.modal-footer form').attr('action', `/management/articles/${id}`);
})
.catch(error => {
console.error('게시글 로딩 실패: ', error);
});
});
});
</script>
</body>
</html>
article.th.xml
<?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-modal" th:replace="~{layouts/layout-main-table-modal :: .modal}" /> <!-- 모달 추가 -->
<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>
이번 포스팅에서는 AdminLTE의 모달 기능을 활용해 게시글 관리 페이지에서 게시글의 상세 내용을 표시하는 기능을 구현했다.
화면 확인과 최종 테스트는 이후 진행할 예정이며, 다음 포스팅에서는 게시글 관리 페이지를 실제로 구현하고 데이터를 연동하는 작업을 진행할 예정이다.
'BackEnd > Project' 카테고리의 다른 글
| [Admin] Ch03. 댓글 관리 페이지 구현 (0) | 2024.08.23 |
|---|---|
| [Admin] Ch03. 게시글 관리 페이지 구현(3) (0) | 2024.08.23 |
| [Admin] Ch03. 게시글 관리 페이지 구현(1) (0) | 2024.08.21 |
| [Admin] Ch03. 게시글 관리 페이지 구현(1) (0) | 2024.08.21 |
| [Admin] Ch03. 로그인 페이지 기능 테스트 정의 (0) | 2024.08.21 |
