프로필 페이지 9
사용자 2명을 만든다. hi, hello
현재 사용자를 hi 라고 한다.
그래서 만약 본인 프로필 화면이라면, 아래와 같이 사진등록 버튼이 뜨고, 구독하기 버튼은 안나오도록,
다른 사람(hello) 의 프로필 화면으로 이동했다면, 사진등록 버튼이 뜨지 않지만, 구독하기 버튼은 나오도록 할 것이다.
본인이 아니기 때문.
그러려면, 로그인한 사용자가 프로필 페이지의 주인인지 판단해야 한다.
즉, 한 명의 사용자는 다른 사람의 프로필 화면으로 이동 가능한데,
이 수 많은 프로필 화면 중 본인의 프로필 화면으로 이동한 것인지 알아야 한다.
그때만 사진등록 버튼이 나오도록.
그럴 때 다음과 같은 방법이 있다.
프로필 화면으로 이동 시
/user/id번호
로 주소 요청한다.
1번 사용자의 프로필 화면 이동 : /user/1 요청
그래서 만약 로그인 한 1번 사용자가 /user/2로 이동했다면
자신의 프로필 화면이 아니다.
방법 1 - jsp 파일에서 설정
그러면 profile.jsp 파일에서 간단하게 처리해볼 수 있다.
우리가, jsp 파일에서 로그인한 사용자의 정보를 사용하기 위해
principal 을 사용한 적이 있다.
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<sec:authorize access="isAuthenticated()">
<sec:authentication property="principal" var="principal"/>
</sec:authorize>이와 같이 등록해서 사용했었다.
때문에, 여기서도 principal(로그인한 사용자) 를 사용하여 코드를 완성하면 된다.
여기서(jsp) 사용된 principal은, 자바 파일에서 PrincipalDetails 를 의미함
<profile.jsp > 파일
<c:choose>
<c:when test = "${principal.user.id == user.id }">
<button class="cta" onclick="location.href='/image/upload'">사진등록</button>
</c:when>
<c:otherwise>
<button class="cta" onclick="toggleSubscribe(this)">구독하기</button>
</c:otherwise>
</c:choose>
principal.user.id : 로그인한 사용자 id
user.id : 현재 프로필 화면의 주인 id
이렇게 한 다음,
만약 1번 사용자(hi) 가 로그인 해서 자신의 프로필 화면으로 이동하면 (/user/1)
아래와 같이 사진등록 버튼만 나온다.
하지만 만약 /user/2 를 주소요청하여 hello 사용자의 프로필 화면으로 이동한다면
이와 같이 사진등록이 아니라 구독하기 버튼만 나오게 할 수 있다.
그런데, 강사님은 view 페이지(jsp)에 자바 코드 로직을 사용하는 것을 추천하지 않는다고 하심
아래와 같은 코드
"${principal.user.id == user.id }"
방법 2 - UserProfileDto.java 파일 사용하기
jsp 파일에서 연산을 하지않고,
자바 파일에서 연산한 뒤 jsp 파일에 데이터를 보내주는 방식을 사용하자.
<UserProfileDto.java> 파일
@Builder
@AllArgsConstructor
@NoArgsConstructor
@Data
public class UserProfileDto {
private boolean pageOwnerState;
private int imageCount;
private User user;
}<UserController.java> 파일
@GetMapping("/user/{pageUserId}")
public String profile(@PathVariable int pageUserId, Model model, @AuthenticationPrincipal PrincipalDetails principalDetails) {
UserProfileDto dto = userService.회원프로필(pageUserId, principalDetails.getUser().getId());
model.addAttribute("dto", dto);
return "user/profile";
}
UserController.java 에서 UserService.java 의 회원프로필 메서드에
매개변수 id를 넘겨줄 때 그 의미가 잘 드러나도록
pageUserId 즉, 로그인한 사용자(id)가 아니라 그 페이지의 주인 (id)
(물론 로그인한 사용자가 페이지 주인일 수도 있음)
<UserService.java> 파일
@Transactional(readOnly = true)
public UserProfileDto 회원프로필(int pageUserId, int principalId) {
UserProfileDto dto = new UserProfileDto();
User userEntity = userRepository.findById(pageUserId).orElseThrow(()-> {
throw new CustomException("해당 프로필 페이지는 없는 페이지입니다.");
});
dto.setUser(userEntity);
dto.setPageOwnerState(pageUserId == principalId);
dto.setImageCount(userEntity.getImages().size());
return dto;
}
UserService.java 의 회원프로필 메서드 매개변수
pageUserId : 현재 페이지 주인(id)
principalUserId : 현재 로그인한 사용자(id)
이렇게 service에서 값들을 리턴해주면, controller에서 받고, 또 profile.jsp 파일까지 그 데이터들이 리턴된다.
이때, profile.jsp 파일에서는 아래와 같이, dto라는 변수명으로 사용하면 된다.
UserController.java 파일에서 model 객체에 dto라는 변수명으로 profile.jsp 파일에 데이터를 넘겨주므로.
<h2>${dto.user.name}</h2>
그 결과 아래와 같이, 본인(user 1 : hi) 의 프로필 페이지일땐 (/user/1)
사진 등록 버튼이 잘 나오고
게시물 개수도 잘 표시된다.
위 화면의 profile.jsp 파일을 살펴보겠다.
1) 일단, hi라고 표시된 부분은 사용자의 name이다.
그래서 아래와 같이 사용했다.
<h2>${dto.user.name}</h2>
2) 그리고 본인 프로필 화면일 때는 사진등록 버튼이, 다른 사용자의 프로필 화면일 때는 구독하기 버튼이 나타나도록
아래와 같이 변경했다.
<c:choose>
<c:when test = "${dto.pageOwnerState}">
<button class="cta" onclick="location.href='/image/upload'">사진등록</button>
</c:when>
<c:otherwise>
<button class="cta" onclick="toggleSubscribe(this)">구독하기</button>
</c:otherwise>
</c:choose>
3) 게시물 개수도 원래는 jsp 화면에서 연산되도록 했다.
(view 페이지에서 연산되도록 하는 것은 좋지 않음)
프로필 페이지 8 글에 보면 아래와 같았음.
${user.images.size()}하지만 UserProfileDto.java 파일에
imageCount 변수를 추가해서 이를 자바 파일에서 연산되도록 수정했다.
그래서 profile.jsp 파일에서는 아래와 같이 사용
<li><a href=""> 게시물<span>${dto.imageCount}</span>
4) 업로드된 이미지가 화면에 표시되도록 하는 부분
<c:forEach var="image" items="${dto.user.images}">
<div class="img-box">
<a href=""> <img src="/upload/${image.postImageUrl}"/>
</a>
<div class="comment">
<a href="#" class=""> <i class="fas fa-heart"></i><span>0</span>
</a>
</div>
</div>
</c:forEach>
이제는 다른 사용자, 즉 hello 의 프로필 화면으로 이동해보자.
(/user/2)
아래와 같이 구독하기 버튼만 잘 나온다.
끝
참고 자료 : 이지업 강의 사이트 "스프링부트 SNS프로젝트 - 포토그램 만들기"