관리자 페이지를 만들고 싶은데 기본 틀 안에서 내용 페이지만 바꿔주고 싶다.
Thymeleaf에서는 Thymeleaf Layout Dialect를 사용하여 이 작업을 수행할 수 있다고 해서 관련 내용을 알아보자!
먼저 내가 만들고 싶은 구조를 그려보자
피그마라는 프로그램을 이용하면 그릴 수 있군. 아주아주 간단하게 .. 그려보았다!
크게는 header, content, footer 형식을 가지고 헤더에서 선택한 요소에 따라 content의 내용이 바뀌게 하고 싶다.
이 때 content는 적절한 사이드 바를 가지게 하고 싶다.
layout을 설정할 때 큰 구조는 이렇다!
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Admin</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/admin/admin-style.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div style="width: 100%; padding: 0">
<!-- 여기에 header 삽입 -->
<header th:replace="fragments/admin/admin-header :: admin-fragment-header"></header>
<!-- 여기에 본문 삽입 -->
<div layout:fragment="admin-content" ></div>
<!-- 여기에 footer 삽입 -->
<footer th:replace="fragments/admin/admin-footer :: admin-fragment-footer"></footer>
</div>
</body>
</html>
이렇게 만들어진 layout에 필요한 페이지들을 생성해주면 된다.
- admin-header.html
<header th:fragment="admin-fragment-header">
<div class="admin-profile">
<h1>사이트명</h1>
<nav>
<ul>
<li>이름 님</li>
<li><button>로그아웃</button></li>
</ul>
</nav>
</div>
<div class="admin-nav-bar">
<span><a th:href="@{/admin}">공통</a></span>
<span><a th:href="@{/admin/member}">회원</a></span>
<span><a th:href="@{/admin/leathers}">상품</a></span>
</div>
</header>- admin-footer.html
<footer th:fragment="admin-fragment-footer" id="admin-footer">
<div>
미완성
</div>
</footer>- 본문내용.html
<!DOCTYPE html>
<html lang="ko"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/admin-default}">
<!--여기가 공통업무 부분-->
<div layout:fragment="admin-content" id="layoutSidenav_content">
<div id="layoutSidenav">
<!-- sidebar -->
<div th:replace="fragments/admin/admin-leathers-sidebar :: admin-fragment-leathers-sidebar"></div>
<div class="container-fluid px-4">
<h1 class="mt-4">관리자 페이지</h1>
<ol class="breadcrumb mb-4">
<li class="breadcrumb-item active">이름 님의 관리자 페이지입니다.</li>
</ol>
</div>
</div>
</div>
</html>
이제 중복되는 디자인 요소를 무시하고 본문 내용만 추가하여 사용할 수 있다
'Spring' 카테고리의 다른 글
| [Spring] Spring Security 동작 원리 (1) | 2024.07.01 |
|---|---|
| [Spring] POJO, Java Bean, Spring Bean (0) | 2024.06.01 |
| 요청 DTO의 기본 설정과 이유 (4) | 2024.04.28 |
| AWS RDS(mySql) 프리티어 생성하기 (0) | 2024.04.22 |
| [dbcp2] connection pool 설정 (0) | 2024.04.18 |
