친구 리스트 UI 구현 및 인터셉터 적용

1. 친구 목록의 친구를 클릭하면 친구의 파티 상태를 볼 수 있게 한다.

느낀점 :

 

부트스트랩 기반으로 카드 디자인을 하나를 잘 만들어 놓고 모듈화시켰다.

필요한 곳에 그대로 활용할 수 있으니 좋다.

아래는 AJAX의 콜백함수에 들어갈 부분이다.

 <style>

img{
    width: fit-content;
 }
 .card.mb-3{
 cursor: pointer;
 text-align: left;
 }
 .endParty{
  color:red;
 }
 .img-fluid.rounded-start{
  height:100%;
 }

</style>



str +="<div class='card mb-3' style='max-width: 400px;'>";
str += "<div class='row g-0 detailBox' data-pnum='"+this.pnum+"' >";
str += "<div class='col-md-4'>";
str += "<img src='${path}/party/printImg?fileName="+this.partyImage1+"' class='img-fluid rounded-start' >";
str += "</div>";
str += "<div class='col-md-8'>";
str += "<div class='card-body'>";
str += "<h5 class='card-title'>"+this.pname+"</h5>";
str += "<p class='card-text'>"+this.sido+"</p>";
str += "<p class='card-text'><small class='text-body-secondary'>"+startDate+"~"+endDate+"</small></p>";
str += "</div>";
str += "</div>";
str += "</div>";
str +="</div>";

$("#previousView").append(str);

 

2. 친구신청을 보낸 후 보낸목록 버튼 클릭시 바로 확인이 가능하도록 수정한다.

지금은 list로 받아오는데 이걸 ajax 방식으로 바꾸어야함.

-> 보낸목록 버튼 클릭시 ajax처리하게 하려고 코드 새로 다 짜려고 했는데,

그냥 친구 신청 보내고 ajax 콜백함수에서 location.href 속성으로 친구페이지 다시 불러오게 만듬.

 

3. 친구리스트 진입시 로그인이 안되어있으면 로그인페이지로 이동

나중에 spring security 적용!

 

4.  본인 추가 막기 - 완료

5. 친구삭제 - 완료

6. 댓글 success : 얼러트 뜨지말기 - 완료

6. 댓글 수정했는데 댓글 다 사라짐  - 완료

7. 본인 신고 막기 - 완료

8. 이미 추가된 사람- 완료

9. 댓글 삭제 기능 추가- 완료