[Springboot] 팔로우 정보 모달에 노출하기1 - dto 및 컨트롤러 설정

profile.html
- '팔로우 정보'를 클릭할때 subscribeInfoModalOpen(id) 함수가 실행되면서 해당 아이디의 팔로우 정보를 보이게할거다.

...
<li>
  <a href="javascript:subscribeInfoModalOpen(id);">
    팔로우정보<span th:text="${dto.followCount} ">2</span>
  </a>
</li>


....
<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>
  </div>
</div>

profile.js

// (2) 팔로우정보  모달 보기
function subscribeInfoModalOpen(pageUserId) {
//modal-subscribe라는 클래스를 찾아서 화면에 보여줌
   $(".modal-subscribe").css("display", "flex");

   $.ajax({
       url:`/api/user/${pageUserId}/follow`,
       dataType:"json"
   }).done(res=>{
       console.log(res.data);

        res.data.forEach((u) => {
            let item = getSubscribeModalItem(u);
            $("#subscribeModalList").append(item);

           });

   }).fail(error=>{
       console.log("구독정보 불러오기 오류", error);

   });
}

모달에는 팔로우 대상자의 사진과 username, 팔로우 여부, 혹은 본인 여부에 따른 버튼 노출 설정이 필요하다. 

 

이런 정보들을 다 포괄할수 있는 data transform object가 필요하다.

FollowDto
id: 만약 1이 로그인했는데, 1이  팔로우 정보 리스트에서 누군가를 팔로우, 혹은 언팔해야 하기 때문에 현재 로그인한 사용자의 아이디 뿐만 아니라 toUserId가 필요하다. 
username: 화면에 보일 username
followState: 팔로우 여부
equalUserState: 로그인한 유저와 팔로우 중인 유저정보가 동일인인지, false면 구독하기 버튼 보여주고 true면 아무 버튼 노출되면 안된다.

//follow정보를 보는 dto
@Builder
@AllArgsConstructor
@NoArgsConstructor
@Data
public class FollowDto {

    //팔로우(언팔)할 대상의 아이디
    private int id;
    private String username;
    private String profileImageUrl;
    private Integer followState; //팔로우 여부
    private Integer equalUserState; //로그인한 유저와 팔로우중인 유저가 같은지

}

 

UserApiController

- followList() 메소드:
 특정 페이지 주인이 팔로우 하고 있는 모든 정보를 get하는 api
 현재 페이지의 id정보 및 로그인 유저의 id를 매개변수로 넘겨준다. 

@RequiredArgsConstructor
@RestController
public class UserApiController {

    private final UserService userService;
    private final FollowService followService;

    @GetMapping("api/user/{pageUserId}/follow")
    public ResponseEntity<?>followList(@PathVariable int pageUserId,  
    @AuthenticationPrincipal PrincipalDetails principalDetails){

        List<FollowDto> followDto = 
        followService.followList(principalDetails.getUser().getId(), pageUserId);

        return new ResponseEntity<>(new CMRespDto<>(1, "팔로우 정보 리스트 가져오기 성공", followDto), HttpStatus.OK);
    }

...


}

 

FollowService
-DB에 셀랙해서 팔로우 정보 모달에 보일 내용을 FollowDto형태로 가져와야한다. 이부분은 복잡하므로 다음에 이어 작성한다. 

@RequiredArgsConstructor
@Service
public class FollowService {

    private final FollowRepositoy followRepositoy;   

    @Transactional(readOnly = true)
    public List<FollowDto> followList(int principalId, int pageUserId){
     
     ...

        return  followDtos;

    }

...
}