스프링과 JPA 기반 웹 애플리케이션 개발 #26 프로필 뷰
해당 내용은 인프런, 스프링과 JPA 기반 웹 애플리케이션 개발의 강의 내용을 바탕으로 작성된 내용입니다.
강의를 학습하며 요약한 내용을 출처를 표기하고 블로깅 또는 문서로 공개하는 것을 허용합니다 라는 원칙 하에 요약 내용을 공개합니다. 출처는 위에 언급되어있듯, 인프런, 스프링과 JPA 기반 웹 애플리케이션 개발입니다.
제가 학습한 소스코드는 https://github.com/n00nietzsche/jakestudy_webapp 에 지속적으로 업로드 됩니다. 매 커밋 메세지에 강의의 어디 부분까지 진행됐는지 기록해놓겠습니다.
프로필 뷰
- 정보의 유/무에 따라 보여줄 메세지가 달라진다.
- 현재 유저가 프로필을 수정할 수 있는 권한이 있는지 판단해야 한다.
- 부트스트랩
- ListGroup
- Grid
AccountController 코드 수정
viewProfile 메소드 추가
@GetMapping("/profile/{nickname}")
public String viewProfile(@PathVariable String nickname, Model model, @CurrentUser Account account) {
Account byNickname = accountRepository.findByNickname(nickname);
if(byNickname == null) {
throw new IllegalArgumentException(nickname + "에 해당하는 사용자가 없습니다.");
}
// 뷰에 내려지는 이름은 생략했을 때, 타입의 이름(Account)의 camelCase 를 따른다.
model.addAttribute(byNickname);
model.addAttribute("isOwner", account.getNickname().equals(nickname));
return "account/profile";
}pathVariable로 nickname을 받아서 조회하고, 그에 따라 프로필 페이지 뷰를 보여주는 내용이다.
만일, 해당 페이지를 보는 사용자가 현재 로그인한 사용자라면, isOwner라는 값을 true로 뷰에 넘겨준다.
Profile.html 작성
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<title>회원가입</title>
<th:block th:replace="fragments :: headLibraryInjection"></th:block>
</head>
<body class="bg-light">
<th:block th:replace="fragments :: main-nav"></th:block>
<div class="alert alert-warning" role="alert" th:if="${account != null && !account?.emailVerified}">
스터디올래 가입을 완료하려면 <a href="#" th:href="@{/check-email}" class="alert-link">계정 인증 이메일을 확인</a>하세요
</div>
<div class="container">
<!-- row의 기본은 col-12만큼의 크기를 갖는다.-->
<div class="row mt-5 justify-content-center">
<div class="col-2">
<!-- Avatar-->
<svg th:if="${#strings.isEmpty(account.profileImage)}" class="img-fluid float-left rounded img-thumbnail"
th:data-jdenticon-value="${account.nickname}" width="125" height="125"></svg>
<img th:if="${!#strings.isEmpty(account.profileImage)}" class="img-fluid float-left rounded img-thumbnail"
th:src="${account.profileImage}" width="125" height="125"/>
</div>
<div class="col-8">
<h1 class="display-4" th:text="${account.nickname}">제이크</h1>
<p class="lead" th:if="${!#strings.isEmpty(account.bio)}" th:text="${account.bio}">자기 소개</p>
<p class="lead" th:if="${#strings.isEmpty(account.bio) && isOwner}">한 줄 소개를 추가하세요.</p>
</div>
</div>
<div class="row mt-3 justify-content-center">
<div class="col-2">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-intro-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
aria-controls="v-pills-profile" aria-selected="true">소개</a>
<a class="nav-link" id="v-pills-study-tab" data-toggle="pill" href="#v-pills-study" role="tab"
aria-controls="v-pills-study" aria-selected="false">스터디</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-profile" role="tabpanel"
aria-labelledby="v-pills-profile-tab">
<p th:if="${!#strings.isEmpty(account.url)}">
<span style="font-size: 20px;">
<i class="fa fa-link col-1"></i>
</span>
<span th:text="${account.url}" class="col-9"></span>
</p>
<p th:if="${!#strings.isEmpty(account.occupation)}">
<span style="font-size: 20px;">
<i class="fa fa-briefcase col-1"></i>
</span>
<span th:text="${account.occupation}" class="col-9"></span>
</p>
<p th:if="${!#strings.isEmpty(account.location)}">
<span style="font-size: 20px;">
<i class="fa fa-location-arrow col-1"></i>
</span>
<span th:text="${account.location}" class="col-9"></span>
</p>
<p th:if="${isOwner}">
<span style="font-size: 20px;">
<i class="fa fa-envelope-o col-1"></i>
</span>
<span th:text="${account.email}" class="col-9"></span>
</p>
<p th:if="${isOwner || account.emailVerified}">
<span style="font-size: 20px;">
<i class="fa fa-calendar-o col-1"></i>
</span>
<span th:if="${isOwner && !account.emailVerified}" class="col-9">
<a href="#" th:href="@{'/check-email?email=' + ${account.email}}">가입을 완료하려면 이메일을 확인하세요.</a>
</span>
<span th:text="${#temporals.format(account.joinedAt, 'yyyy년 M월 가입')}" class="col-9"></span>
</p>
<div th:if="${isOwner}">
<a class="btn btn-outline-primary" href="#" th:href="@{/setting/profile}">프로필 수정</a>
</div>
</div>
<div class="tab-pane fade show" id="v-pills-study" role="tabpanel"
aria-labelledby="v-pills-study-tab">
Study
</div>
</div>
</div>
</div>
<th:block th:replace="fragments :: footer"></th:block>
</div>
<script th:replace="fragments :: form-validation"></script>
</body>
</html>부트스트랩을 활용했다 딱히 특별한 건 없다.
풀스택 웹개발자로 일하고 있는 Jake Seo입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. 프론트엔드: Javascript, React 백엔드: Spring Framework에 관심이 있습니다.