👻 [WHYGRAM] | [JS] | 🎮팔로우기능 이모디콘이 안 바뀐다

🔹 에러

• 팔로우 이모디콘이 바뀌지 않음

🔹 원인

• <th:block th:if="${profile.isYourFollower eq 1}"> 이 부분이
• 서버에서 바뀐 profile이 오지 않으니까
• 이 안에 설정해놓은
  btn <div>와 <i>가 바뀌지 않는다.
• 그래서 클릭한 순간만 바뀌고 다시 돌아오는 것이다.

🔹 해결

• 서버에서 받아온 값을 btn <div>와 <i>에 넣어놓으면 클릭하면 아예 바뀔 것 같다
• 그리고 js 에서 btn <div>와 <i>를 아예 지워버리고 새로 만들어야 할 것 같다 👉 containerFollow<div>

✅ 로직

UserDomain

private String datasetFollow;
private String followIcon;

UserService

UserDomain profile;

if (isMyFollower == 1) {
   if (isYourFollower == 1) {
      profile.setDatasetFollow("unfollow2");
      profile.setFollowIcon("follow-icon bi bi-person-check-fill");
   } else {
      profile.setDatasetFollow("follow2");
      profile.setFollowIcon("follow-icon bi bi-person-fill"); 
   }
} else {
   if (isYourFollower == 1) {
      profile.setDatasetFollow("unfollow1");
      profile.setFollowIcon("follow-icon bi bi-person-check");
   } else {
      profile.setDatasetFollow("follow1");
      profile.setFollowIcon("follow-icon bi bi-person"); 
   }
}

🔹 에러

• 적용하니까 아예 click() over() out() proc() 작동안함

      btnFollowElem.remove();
      btnFollowElem = document.createElement("div");
      btnFollowElem.id = 'btnFollow';
      btnFollowElem.className = 'pointer';
      followClick(follow);
      followContainerElem.append(btnFollowElem);
      events();

🔹 해결

• btnFollow <div>을 지우고 이거랑 follow icon <i>를 새로 만들고
• followContainer <div> 에 append하고
• addEventListener을 다시 해줘야 한다.