타임리프 fragment에 리스트와 true/false 전달하기
<div th:replace="fragments.html::member-list (members=${study.managers},isManager=${true})"
class="row px-3 justify-content-center"></div>
타임리프 fragment
<div th:fragment="member-list (members, isManager)" class="row px-3 justify-content-center">
...
</div>
스터디 멤버를 조회하는 핸들러 구현
package me.weekbelt.studyolle.study;
@RequiredArgsConstructor
@Controller
public class StudyController {
// .......
@GetMapping("/study/{path}/members")
public String viewStudyMember(@CurrentAccount Account account,
@PathVariable String path, Model model) {
model.addAttribute(account);
model.addAttribute(studyRepository.findByPath(path));
return "study/members";
}
}
스터디 멤버 조회 페이지에 관련된 fragment를 fragments.html에 추가
<div th:fragment="member-list (members, isManager)" class="row px-3 justify-content-center">
<ul class="list-unstyled col-10">
<li class="media mt-3" th:each="member: ${members}">
<svg th:if="${#strings.isEmpty(member?.profileImage)}" th:data-jdenticon-value="${member.nickname}" width="64" height="64" class="rounded border bg-light mr-3"></svg>
<img th:if="${!#strings.isEmpty(member?.profileImage)}" th:src="${member?.profileImage}" width="64" height="64" class="rounded border mr-3"/>
<div class="media-body">
<h5 class="mt-0 mb-1"><span th:text="${member.nickname}"></span> <span th:if="${isManager}" class="badge badge-primary">관리자</span></h5>
<span th:text="${member.bio}"></span>
</div>
</li>
</ul>
</div>
study/member.html 생성
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments.html::head"></head>
<body class="bg-light">
<div th:replace="fragments.html::main-nav"></div>
<div th:replace="fragments.html::study-banner"></div>
<div class="container">
<div th:replace="fragments.html::study-info"></div>
<div th:replace="fragments.html::study-menu(studyMenu='members')"></div>
<div th:replace="fragments.html::member-list(members=${study.managers},isManager=${true})"></div>
<div th:replace="fragments.html::member-list(members=${study.members},isManager=${false})"></div>
<div th:replace="fragments.html::footer"></div>
</div>
<script type="application/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
참고: https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-JPA-%EC%9B%B9%EC%95%B1#
'스프링과 JPA 기반 웹 어플리케이션 개발 > 4부 스터디' 카테고리의 다른 글
52. 스터디 설정 - 소개 수정 (0) | 2020.04.24 |
---|---|
51. 스터디 폼 & 개설 & 멤버 조회 테스트 (0) | 2020.04.24 |
49. 스터디 조회 (0) | 2020.04.23 |
48. 스터디 개설 (0) | 2020.04.23 |
47. 스터디 도메인 (0) | 2020.04.23 |