artstroke 게시판(6)

오늘도 코딩중!·2023년 6월 28일

artstroke프로젝트

목록 보기

6/7

게시판 삽입
게시판 삭제
게시판 수정
4. 게시판 상세페이지
좋아요
팔로잉(작가에 대해서만)

게시판 상세페이지

전 시간까지 게시판 삽입, 삭제, 수정에 대해서 알아보았다. 이제 게시판의 상세페이지를 뜯어보면서 세세한 기능을 구현해보도록 하겠다.

이 프로젝트는 상업적인 활동을 하지 않습니다.

이것이 상세페이지다 로그인을 하지 않은 상태가 바로 이 이미지이고 아래의 이미지가 로그인을 한 후이다.

여러가지 모습이 나타난 것을 확인할 수 있다.

나는 JSTL태그를 통해서 세션에 저장된 loginMember의 여부에 따라 나타나게 하였다.

팔로우 맨 위부터 세분류 하여 기능을 알아보도록 하겠다.

4-1. 팔로우
4-2. 좋아요
4-3. 댓글

팔로우

트위터, 인스타그램을 보면 팔로우 기능을 통해 좋아하는 작가를 팔로우하여 마이페이지에서 볼 수 있는 기능이 있다. 이 게시물을 만든 사람의 경우 작가로 일반 사용자가 게시물을 등록하면 팔로우 기능을 볼 수 없게끔 설계되어 있다. 다음은 팔로우 버튼을 나타나게하는 코드이다.

 <c:if test = "${!empty loginMember}">
    <c:if test="${loginMember.memberId != detail.memberId}">
       <c:if test ="${detail.memberId == 1}"
         <div><button id = "follow-Btn" class = "follow-Btn"style = "cursor: pointer;">팔로우</button></div>
       </c:if>
    </c:if>
</c:if>

처음 로그인의 유무를 묻고 로그인한 사람과 게시물의 작성자의 아이디를 비교한 후, 그것까지 맞다면 이 게시물의 작성자가 작가인지 판단한다.

이렇게 하고 팔로우를 누르면 js가 실행된다.

const followBtn = document.getElementById("follow-Btn");
  var isMemberfollowed = "${isMemberfollowed}";
  if (isMemberfollowed == "true") {
    followBtn.classList.add("board_member_follow");
    followBtn.classList.remove("board_member_unfollow");
    followBtn.innerText = "팔로잉";
  }

여기서 isMemberfollowed는 대체 무엇일까. 이 것은 jsp에 선언된 팔로우한 사람들의 리스트에 로그인한 사람이 있는 지 여부이다.

<c:set var="isMemberfollowed" value="false" />
<c:forEach var="follow" items="${fList}">
  <c:if test="${follow.followerId == loginMember.memberId}">
    <c:set var="isMemberfollowed" value="true" />
  </c:if>
</c:forEach>

model.addAttribute를 통해 가져온 fList에 있는지 확인하는 것.

만약 follow가 되어있다면 팔로잉으로 바뀌어 있을 것이다.

그러면 follow를 수행하는 js코드를 살펴보자.

followBtn.addEventListener("click",function(){
    if(isMemberfollowed=="false"){
        insertFollow(writerId,writerNick,loginMemberId,loginMemberNick);
    }else{
        deleteFollow(writerId,writerNick,loginMemberId,loginMemberNick);
    }
});


function insertFollow(writerId,writerNick,loginMemberId,loginMemberNick){
    $.ajax({
        url: contextPath + "/member/insertFollow",
        data : {"writerId" : writerId,
                "followerId":loginMemberId,
                "writerNick":writerNick,
                "followerNick":loginMemberNick},
        type:"post",
        success: function(result){
            
            if(result > 0){
                followBtn.classList.add("board_member_follow");
                followBtn.classList.remove("board_member_unfollow");
                isMemberfollowed = "true";
                followBtn.innerText = "팔로잉";
            }
        }

    });
}
function deleteFollow(writerId,writerNick,loginMemberId,loginMemberNick){
    $.ajax({
        url: contextPath + "/member/deleteFollow",
        data : {"writerId" : writerId,
                "followerId":loginMemberId,
                "writerNick":writerNick,
                "followerNick":loginMemberNick},
        type:"post",
        success: function(result){
            if(result>0){
                //주겄도치~
                followBtn.classList.add("board_member_unfollow");
                followBtn.classList.remove("board_member_follow");
                isMemberfollowed = "false";
                followBtn.innerText = "팔로우";
            }  
        }

    });
}

팔로우를 진행하는 것은 ajax를 통해 구현하였다 팔로우는 form을 통해 동기적으로 구현하는 방식이 아닌 비동기적인 방식으로 구현한다.

follow가 안되어있으면 insert를 수행하며 보내 줄것은 게시글 작성자 아이디와, 로그인된 아이디만 있으면 충분하다. 필자는 닉네임까지 보내주었으나 데이터의 일치성과 떨어지므로 이렇게 하면 안된다는 것을 여러분들은 알아주었으면 한다.

이렇게 보내준 내용은