구독하기 뷰 랜더링
1. 구독상태
2. 구독자수
구독자 수 값을 체크하기 위해 UserProfileDto 에
private boolean subscribeState; //구독한 상태인지
private int subscribeCount; //구독자수
Java
복사
포스트맨으로 사용해서 ssar 로그인하고
ssar이 cos 구독
ssar이 love 구독
이번에는 cos로 로그인한다
cos가 ssar 구독
cos가 love 구독
ssar로 로그인상태에서
코스로 들어가면 구독하기 버튼이 아니라 구독취소 버튼이 떠야한다.
구독자수 카운트를 위해 쿼리에서 돌리면
select * from Subscribe;
-- 구독수
select COUNT(*) from Subscribe where fromUserId = 3;
-- 구독여부 (ssar(1)로 로그인, cos(2)페이지로 감)
SELECT COUNT(*) from Subscribe where fromUserId = 1 and toUserId = 2;
SQL
복사
SubscribeRepository
@Query(value = "SELECT COUNT(*) FROM Subscribe WHERE fromUserId = :principalId AND toUserId = :pageUserId", nativeQuery = true)
int mSubscribeState(int principalId, int pageUserId);
@Query(value = "SELECT COUNT(*) FROM Subscribe WHERE fromUserId = :pageUserId", nativeQuery = true)
int mSubscribeCount(int pageUserId);
Java
복사
UserService
private final SubscribeRepository subscribeRepository;
@Transactional(readOnly = true)
public UserProfileDto 회원프로필(int pageUserId, int principalId) {
UserProfileDto dto = new UserProfileDto();
// SELECT * FROM image WHERE userId = :userId;
User userEntity = userRepository.findById(pageUserId).orElseThrow(()->{
throw new CustomException("해당 프로필 페이지는 없는 페이지입니다.");
});
dto.setUser(userEntity);
dto.setPageOwnerState(pageUserId == principalId);
dto.setImageCount(userEntity.getImages().size());
int subscribeState = subscribeRepository.mSubscribeState(principalId, pageUserId);
int subscribeCount = subscribeRepository.mSubscribeCount(pageUserId);
dto.setSubscribeCount(subscribeCount);
dto.setSubscribeState(subscribeState == 1);
return dto;
}
Java
복사
profile.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<!--프로필 섹션-->
<section class="profile">
<!--유저정보 컨테이너-->
<div class="profileContainer">
<!--유저이미지-->
<div class="profile-left">
<div class="profile-img-wrap story-border"
onclick="popup('.modal-image')">
<form id="userProfileImageForm">
<input type="file" name="profileImageFile" style="display: none;"
id="userProfileImageInput" />
</form>
<img class="profile-image" src="#"
onerror="this.src='/images/person.jpeg'" id="userProfileImage" />
</div>
</div>
<!--유저이미지end-->
<!--유저정보 및 사진등록 구독하기-->
<div class="profile-right">
<div class="name-group">
<h2>${dto.user.name}</h2>
<c:choose>
<c:when test="${dto.pageOwnerState}">
<button class="cta" onclick="location.href='/image/upload'">사진등록</button>
</c:when>
<c:otherwise>
<c:choose>
<c:when test="${dto.subscribeState}">
<button class="cta blue" onclick="toggleSubscribe(this)">구독하기</button>
</c:when>
<c:otherwise>
<button class="cta" onclick="toggleSubscribe(this)">구독하기</button>
</c:otherwise>
</c:choose>
</c:otherwise>
</c:choose>
<button class="modi" onclick="popup('.modal-info')">
<i class="fas fa-cog"></i>
</button>
</div>
<div class="subscribe">
<ul>
<li><a href=""> 게시물<span>${dto.imageCount}</span>
</a></li>
<li><a href="javascript:subscribeInfoModalOpen();"> 구독정보<span>${dto.subscribeCount}</span>
</a></li>
</ul>
</div>
<div class="state">
<h4>${dto.user.bio}</h4>
<h4>${dto.user.website}</h4>
</div>
</div>
<!--유저정보 및 사진등록 구독하기-->
</div>
</section>
<!--게시물컨섹션-->
<section id="tab-content">
<!--게시물컨컨테이너-->
<div class="profileContainer">
<!--그냥 감싸는 div (지우면이미지커짐)-->
<div id="tab-1-content" class="tab-content-item show">
<!--게시물컨 그리드배열-->
<div class="tab-1-content-inner">
<!--아이템들-->
<c:forEach var="image" items="${dto.user.images}"> <!--EL 표현식에서 변수명을 적으면 get함수가 자동 호출된다. -->
<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>
<!--아이템들end-->
</div>
</div>
</div>
</section>
<!--로그아웃, 회원정보변경 모달-->
<div class="modal-info" onclick="modalInfo()">
<div class="modal">
<button onclick="location.href='/user/1/update'">회원정보 변경</button>
<button onclick="location.href='/logout'">로그아웃</button>
<button onclick="closePopup('.modal-info')">취소</button>
</div>
</div>
<!--로그아웃, 회원정보변경 모달 end-->
<!--프로필사진 바꾸기 모달-->
<div class="modal-image" onclick="modalImage()">
<div class="modal">
<p>프로필 사진 바꾸기</p>
<button onclick="profileImageUpload()">사진 업로드</button>
<button onclick="closePopup('.modal-image')">취소</button>
</div>
</div>
<!--프로필사진 바꾸기 모달end-->
<div class="modal-subscribe">
<div class="subscribe">
<div class="subscribe-header">
<span>구독정보</span>
<button onclick="modalClose()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="subscribe-list" id="subscribeModalList">
<div class="subscribe__item" id="subscribeModalItem-1">
<div class="subscribe__img">
<img src="#" onerror="this.src='/images/person.jpeg'"/>
</div>
<div class="subscribe__text">
<h2>love</h2>
</div>
<div class="subscribe__btn">
<button class="cta blue" onclick="toggleSubscribeModal(this)">구독취소</button>
</div>
</div>
<div class="subscribe__item" id="subscribeModalItem-2">
<div class="subscribe__img">
<img src="#" onerror="this.src='/images/person.jpeg'"/>
</div>
<div class="subscribe__text">
<h2>ssar</h2>
</div>
<div class="subscribe__btn">
<button class="cta blue" onclick="toggleSubscribeModal(this)">구독취소</button>
</div>
</div>
</div>
</div>
</div>
<script src="/js/profile.js"></script>
<%@ include file="../layout/footer.jsp"%>
Java
복사
