구독 정보 뷰 랜더링
구독정보 클릭할때 구독자 정보가 뜨게 만들어준다.
profile.jsp에서
퍼블이 만든 함수가 profile.js에 있다
profile.js에서
// (2) 구독자 정보 모달 보기
function subscribeInfoModalOpen() {
$(".modal-subscribe").css("display", "flex");
}
Java
복사
modal-subscribe부분이 보여지는데 이 부분은 profile.jsp 하단쪽에
<!--프로필사진 바꾸기 모달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>
Java
복사
이렇게 있다.
여기서 프로필 이미지 등록은 아직 안했으니 제외하고 구독한 사람의 정보를 갖고와서 뿌려줘야한다.
그리고 구독여부도 같이 갖고와야하는데 dto폴더 안에 subscribe 폴더 생성 후
SubscirbeDto.java 생성
package com.cos.photogramstart.web.dto.subscribe;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
@Builder
@AllArgsConstructor
@NoArgsConstructor
@Data
public class SubscribeDto {
private int userId;
private String username;
private String profileImageUrl;
private Integer subscribeState; //구독한 상태인지
private Integer equalUserState; //구독한자가 로그인한자랑 동일인 인지
}
Java
복사
UserApiController에
//해당유저를 구독하는 모든 유저들을 갖고오는 api를 만들어준다
private final SubscribeService subscribeService;
//1번유저를 구독하는 모든 유저들을 갖고오는 api
@GetMapping("/api/user/{pageUserId}/subscribe")
public ResponseEntity<?> subscribeList(@PathVariable int pageUserId, @AuthenticationPrincipal PrincipalDetails principalDetails ){
List<SubscribeDto> subscribeDto = subscribeService.구독리스트(principalDetails.getUser().getId(), pageUserId);
return new ResponseEntity<>(new CMRespDto<>(1, "구독자 정보 리스트 불로오기 성공", subscribeDto), HttpStatus.OK);
}
Java
복사
아직은 서비스를 생성안했기 때문에 구독리스트를 만들어주러 간다.
SubscribeService
@Transactional(readOnly = true)
public List<SubscribeDto> 구독리스트(int principalId, int pageUserId){
return null;
}
Java
복사
데이터베이스를 셀렉트해서 받아오면 된다