🟦 classList.toggle()

✅ 클래스값이 있는지 체크하고 없으면 더하고 있으면 제거한다.

🟦 querySelectorAll()

✅ 해당 선택자에 해당하는 모든 요소.

✅ 반환객체는 nodeList. for문 또는 foreach 문을 사용.

🟦 MyConst

    public final String PROFILE = "profile";
    public final String PROFILE_LIST = "profileList";
    public final String RESULT = "result";
    public final String YOU_FOLLOW_ME = "youFollowMe";

🟦 commonHeader.html

<header th:fragment="header">
    <span id="globalConst" sec:authorize="isAuthenticated()" 
          th:with="auth=${#authentication.getPrincipal().getUser()}"
          th:attr="data-iuser=${auth.iuser}, data-writer=${auth.nm}, data-writer-profile=${auth.mainProfile}"></span>

                          ...


   <ul class="menus" sec:authorize="isAuthenticated()" th:with="auth=${#authentication.getPrincipal().getUser()}">
      <li>
          <a th:href="@{/user/profile}">
            <span class="span__profile">
               <img class="profile wh50" th:if="${auth.mainProfile != null}" 
                      th:src="@{/pic/profile/{iuser}/{img}(iuser=${auth.iuser}, img=${auth.mainProfile})}">
              <span th:text="${auth.nm}"></span>
            </span>
          </a>
      </li>
                               ...
  </ul>

• 로그인한 유저인 경우
  • auth에 정보가 담긴다
  • 사진 또는 이름을 누르면
    /user/profile 내 프로필로 이동한다

🟦 feed.js

function moveToProfile(iuser) {
  location.href = `/user/profile?iuser=${iuser}`;
}

• 피드에서 프로필사진을 누르면
  /user/profile?iuser=${iuser} 그 사람의 프로필로 이동한다.

🟦 UserController

@GetMapping("/profile")
public void profile(Model model, UserEntity param, @AuthenticationPrincipal CustomUserPrincipal userDetails) {
    System.out.println(param);

    UserDTO param2 = new UserDTO();
    param2.setYouIuser(param.getIuser());
    if(param2.getYouIuser() == 0) {
        param2.setYouIuser(userDetails.getUser().getIuser());
        param.setIuser(userDetails.getUser().getIuser());
    }
    model.addAttribute(myConst.PROFILE, service.selUserProfile(param2));
    model.addAttribute(myConst.PROFILE_LIST, service.selUserProfileList(param));
}

• 파라미터로 넘어온 UserEntity의 iuser값이 없다면
  • 즉, 나의 프로필로 이동하는 거라면
  • youIuser(UserDTO)와 iuser(UserEntity)는 나이다.
• html로 profile : UserDomain 객체 , profileList : List<UserProfileEntity> 객체 를 넘겨준다.

🟦 UserSerivce

@Autowired private IAuthenticationFacade auth;

public UserDomain selUserProfile(UserDTO param) {
    param.setMeIuser(auth.getLoginUserPk());
    return profileMapper.selUserProfile(param);
}

• UserDTO를 세팅해주고 mapper의 결과 UserDomain의 객체를 리턴한다.
  • 나의 프로필로 이동할 경우
    • YouIuser = 나 , MeIuser = 나
  • 다른 사람의 프로필로 이동할 경우
    • YouIuser = 그사람 , MeIuser = 나

🟦 UserProfileMapper

UserDomain selUserProfile(UserDTO param);

<select id="selUserProfile" resultType="UserDomain">
  SELECT
      A.iuser, A.email, A.nm, A.tel, A.mainProfile, A.regdt
      , (SELECT COUNT(ifeed) FROM t_feed WHERE iuser = ${youIuser}) AS cntFeed
      , (SELECT COUNT(iuserMe) FROM t_user_follow WHERE iuserMe = ${youIuser}) AS cntFollow
      , (SELECT COUNT(iuserYou) FROM t_user_follow WHERE iuserYou = ${youIuser}) AS cntFollower
      , (SELECT COUNT(iuserMe) FROM t_user_follow WHERE iuserMe = ${youIuser} AND iuserYou = ${meIuser}) AS isYouFollowMe
      , (SELECT COUNT(iuserMe) FROM t_user_follow WHERE iuserMe = ${meIuser} AND iuserYou = ${youIuser}) AS isMeFollowYou
  FROM t_user A
  WHERE A.iuser = ${youIuser}
</select>

• cntFeed

  • iuser = 내 프로필 : 나 , 다른사람 프로필 : 그사람 = ${youIuser}
  • 내 프로필을 들어갈 때는 [ 나 ]의.
  • 다른사람 프로필을 들어갈 때는 [ 그사람의 ] ifeed갯수를.

• cntFollow

  • iuserMe = 내 프로필 : 나 , 다른사람 프로필 : 그사람 = ${youIuser}
  • 내가 다른사람을 팔로우한(iuserMe) 갯수를 (iuserMe가 [ 나 ]의 입장에서 [ 다른사람 ]을 팔로우한 것이다.)
  • 내 프로필을 들어갈 때는 내가 [ 나 ] , (iuserMe = ${youIuser})
  • 다른 사람 프로필을 들어갈 때는 그사람이 [ 나 ]

• cntFollower

  • iuserYou = 내 프로필 : 나 , 다른사람 프로필 : 그사람 = ${youIuser}
  • 다른사람이 나를 팔로우한(iuserYou) 갯수를 (iuserYou가 [ 나 ]의 입장에서 다른 사람들이 나를 팔로우 한 것이다.)
  • 내 프로필을 들어갈 때는 내가 [ 나 ] (iuserYou = ${youIuser})
  • 다른사람 프로필을 들어갈 때는 그사람이 [ 나 ]

• isYouFollowMe

  • iuserMe = 내 프로필 : 나 , 다른사람 프로필 : 그사람 = ${youIuser}
  • iuserYou = 내 프로필 : 나 , 다른사람 프로필 : 나 = ${meIuser}
  • 내가 다른사람을 팔로우한(iuserMe)갯수를 (iuserMe가 [ 나 ]의 입장에서 [ 다른사람 ]들을 팔로우한 것이다.)
  • 내프로필을 들어갈 때는 내가 [ 나 ] , 내가 [ 다른사람 ]
  • 다른사람 프로필을 들어갈 때는 그사람이 [ 나 ] , 내가 [ 다른사람 ]
  • iuserMe = ${youIuser} , iuserYou = ${meIuser}
  • 그래서 내프로필을 들어갈 때는 무조건 isYouFollowMe는 0이 나오고,
  • 다른사람 프로필을 들어갈 때는 (그사람이 [ 나 ] , 내가 [ 다른사람 ]) 그사람이 나를 팔로우했을 때만 1이 나온다.

• isMeFollowYou

  • 내가 다른사람을 팔로우한(iuserMe) 갯수를 (iuserMe가 [ 나 ]의 입장에서 [ 다른사람 ]들을 팔로우한 것이다.)
  • 내 프로필을 들어갈 때는 내가 [ 나 ], 내가 [ 다른사람 ]
  • 다른사람 프로필을 들어갈 때는 내가 [ 나 ], 그사람이 [ 다른사람 ]
  • iuserMe = ${meIuser} , iuserYou = ${youIuser}
  • 그래서 내 프로필을 들어갈 때는 무조건 isYouFollowMe와 isMeFollowYou는 0이 나오고
  • 다른사람 프로필을 들어갈 때는 (내가 [ 나 ], 그사람이 [ 다른사람 ]) 내가 그사람을 팔로우했을 때만 1이 나온다.

• cntFollow : 내 프로필 - 내가 팔로우 , 다른사람 프로필 - 그사람이 팔로우 (iuserMe)

• cntFollower : 내프로필 - 나를 팔로우, 다른사람 프로필 - 그사람을 팔로우 (iuserYou)

• isYouFollowMe : 다른사람 프로필 - 그사람이 나를 팔로우 (iuserMe = ${youIuser} , iuserYou = ${meIuser})

• isMeFollowYou : 다른사람 프로필 - 내가 그사람을 팔로우 (iuserMe = ${meIuser} , iuserYou = ${youIuser})

---

🟦 table

CREATE TABLE t_user_follow (
   iuserMe INT UNSIGNED,
   iuserYou INT UNSIGNED,
   regdt DATETIME DEFAULT NOW(),
   PRIMARY KEY(iuserMe, iuserYou),
   FOREIGN KEY (iuserMe) REFERENCES t_user(iuser),
   FOREIGN KEY (iuserYou) REFERENCES t_user(iuser)
);

🟦 UserFollowEntity

public class UserFollowEntity {
    private int iuserMe;
    private int iuserYou;
    private String regdt;
}

🟦 UserEntity

    private int iuser;
    private String provider;
    private String email;
    private String pw;
    private String nm;
    private String tel;
    private String authCd;
    private String mainProfile;
    private String regdt;

🟦 UserDomain

public class UserDomain extends UserEntity {
    private int cntFeed; //피드 카운트
    private int cntFollower; //팔로워 카운트
    private int cntFollow; //팔로우 카운트
    private int isYouFollowMe; //너는 나를 팔로우 했니
    private int isMeFollowYou; //나는 너를 팔로우 했니
}

🟦 UserDTO

public class UserDTO {
    private int meIuser;
    private int youIuser;
}

---

🟦 profile.html

<div id="localConst" th:attr="data-iuser=${profile.iuser}"></div>

<td th:unless="${auth.iuser eq profile.iuser}">
    <th:block th:if="${profile.isMeFollowYou eq 1}">
        <input type="button" class="instaBtn instaBtnEnable" id="btnFollow" data-follow="1" value="팔로우 취소">
    </th:block>
    <th:block th:unless="${profile.isMeFollowYou eq 1}">
        <th:block th:if="${profile.isYouFollowMe eq 1}">
            <input type="button" class="instaBtn" id="btnFollow" data-follow="0" value="맞팔로우">
        </th:block>
        <th:block th:unless="${profile.isYouFollowMe eq 1}">
            <input type="button" class="instaBtn" id="btnFollow" data-follow="0" value="팔로우">
        </th:block>
    </th:block>
</td>

• 상대방의 페이지
  • 내가 이 사람을 팔로우 했으면
    • 팔로우 취소 버튼.
  • 내가 이 사람을 팔로우 하지 않았으면
    • 맞팔로우 버튼. 👈 근데 상대방은 나를 팔로우 했다면
    • 팔로우 버튼. 👈 상대방도 나를 팔로우 하지 않았다면

🟦 profile.js

const btnFollowElem = document.querySelector('#btnFollow'); //팔로우 버튼

//팔로우 처리
//type: 0 > 팔로우 처리
//type: 1 > 팔로우 취소
function followProc(type, iuserYou, btnElem) {
    const init = {};
    const param = { iuserYou };
    let queryString = '';
    switch (type) {
        case 0:
            init.method = 'POST';
            init.headers = { 'Content-Type': 'application/json' };
            init.body = JSON.stringify(param);
            break;
        case 1:
            init.method = 'DELETE';
            queryString = `?iuserYou=${iuserYou}`;
            break;
    }

    fetch('follow' + queryString, init)
        .then(res => res.json())
        .then(myJson => {

            if(myJson.result === 1) {
                let buttnNm = '팔로우 취소';
                if(btnElem.dataset.follow === '1') {
                    if(myJson.youFollowMe == null) { buttnNm = '팔로우'; }
                    else { buttnNm = '맞팔로우'; }
                }
                btnElem.classList.toggle('instaBtnEnable');
                btnElem.value = buttnNm;
                btnElem.dataset.follow = 1 - btnElem.dataset.follow;
            } else {
                alert('에러가 발생하였습니다.');
            }
        });
}

if(btnFollowElem) {
    btnFollowElem.addEventListener('click', () => {
        const follow = parseInt(btnFollowElem.dataset.follow);
        const iuser = localConstElem.dataset.iuser;

        followProc(follow, iuser, btnFollowElem);
    });
}

---

🟦 UserController

    @ResponseBody
    @PostMapping("/follow")
    public Map<String, Object> doFollow(@RequestBody UserFollowEntity param) {
        return service.insUserFollow(param);
    }

    @ResponseBody
    @DeleteMapping("/follow")
    public Map<String, Object> cancelFollow(UserFollowEntity param) {
        return service.delUserFollow(param);
    }

• UserFollowEntity , iuserYou : 다른 사람 프로필(그사람)

🟦 UserService

 //팔로우 하기
    public Map<String, Object> insUserFollow(UserFollowEntity param) {
        param.setIuserMe(auth.getLoginUserPk());
        Map<String, Object> res = new HashMap();
        res.put(myConst.RESULT, mapper.insUserFollow(param));
        return res;
    }

//팔로우 취소
    public Map<String, Object> delUserFollow(UserFollowEntity param) {
        param.setIuserMe(auth.getLoginUserPk());
        int result = mapper.delUserFollow(param);

        Map<String, Object> res = new HashMap();
        res.put(myConst.RESULT, result);
        if(result == 1) {
            UserFollowEntity param2 = new UserFollowEntity();
            param2.setIuserMe(param.getIuserYou());
            param2.setIuserYou(param.getIuserMe());

            UserFollowEntity result2 = mapper.selUserFollow(param2);
            res.put(myConst.YOU_FOLLOW_ME, result2);
        }
        return res;
    }

• insUserFollow :

  • UserFollowEntity , iuserYou : 다른 사람 프로필(그사람) , iuserMe : 나
  • 내가 그 사람을 팔로우 한다.
  • Map<String, Object> res : "result" , 0 또는 1

• delUserFollow :

  • UserFollowEntity , iuserYou : 다른 사람 프로필(그사람) , iuserMe : 나
  • 내가 그 사람을 팔로우 한다.
  • UserFollowEntity , iuserYou : 나 , iuserMe : 다른 사람 프로필(그사람)
  • 그 사람이 나를 팔로우 한다.
  • Map<String, Object> res :
    • "result" , 0 또는 1
    • "youFollowMe" , null 또는 UserFollowEntity(iuserYou : 나 , iuserMe : 다른 사람 프로필(그사람))

🟦 UserMapper

int insUserFollow(UserFollowEntity param);
UserFollowEntity selUserFollow(UserFollowEntity param);
int delUserFollow(UserFollowEntity param);

    <insert id="insUserFollow">
        INSERT INTO t_user_follow
        ( iuserMe, iuserYou )
        VALUES
        ( ${iuserMe}, ${iuserYou} )
    </insert>

    <delete id="delUserFollow">
        DELETE from t_user_follow
        WHERE iuserMe = ${iuserMe} AND iuserYou = ${iuserYou}
    </delete>

    <select id="selUserFollow" resultType="UserFollowEntity">
        SELECT iuserMe, iuserYou, regdt FROM t_user_follow
        WHERE iuserMe = ${iuserMe}
        AND iuserYou = ${iuserYou}
    </select>

• insUserFollow : ( ${iuserMe} : 나 , ${iuserYou} : 그사람 )
• delUserFollow : ( ${iuserMe} : 나 , ${iuserYou} : 그사람 )
• insUserFollow : ( ${iuserMe} : 그사람 , ${iuserYou} : 나 )

---

🟦 팔로우 기능 로직 (팔로우 버튼을 눌렀을 때)

• header에서 또는 feed에서 프로필가기를 누른다.

  • 내 프로필 : /user/profile
  • 다른사람 프로필 : /user/profile?iuser=${iuser}

  👇 @controller

• 내 프로필 : UserDTO.youIuser = 나

• 다른사람 프로필 : UserDTO.youIuser = 그사람

  👇 @service

• 내 프로필 : UserDTO.meIuser = 나 , youIuser = 나

• 다른사람 프로필 : UserDTO.meIuser = 나 , youIuser = 그사람

  👇 @mapper

• 내 프로필

  • UserDomain.나의
  • iuser , email , nm , tel , mainProfile , regdt , cntFeed , cntFollow , cntFollower
  • isYouFollowMe(0) , isMeFollowMe(0)

• 다른사람 프로필

  • UserDomain.그사람의
  • iuser , email , nm , tel , mainProfile , regdt , cntFeed , cntFollow , cntFollower
  • isYouFollowMe , isMeFollowMe

  👇 @controller

• "profile" , UserDomain

  👇 profile.html

  👇 profile.js - 내 프로필일경우 여기로 올 수 없다.

• btnFollowElem.dataset.follow : 0(팔로우) , 1(팔로우취소)

• localConstElem.dataset.iuser : profile.iuser(그사람)

• followProc( follow, iuser, btnFollowElem)

  • follow (0-@Post /user/follow | 1-@Delete /user/follow)
  • iuser (profile.iuser(그사람) = UserFollowEntity.iuserYou)

• 팔로우처리 : "result" , 1

  • btnNm = '팔로우취소'
  • classList = instaBtn instaBtnEnable
  • dataset.follow = 1
  • <input type="button" class="instaBtn" id="btnFollow" data-follow="0" value="(맞)팔로우">
    ↓
  • <input type="button" class="instaBtn instaBtnEnable" id="btnFollow" data-follow="1" value="팔로우 취소">

• 팔로우취소처리 : "result" , 1 | "youFollowMe" , null 또는 UserFollowEntity(iuserMe 그사람 , iuserYou 나)

  • btnNm = '팔로우취소' 👉 '팔로우' | '맞팔로우'
  • classList = instaBtn
  • dataset.follow = 0
  • <input type="button" class="instaBtn instaBtnEnable" id="btnFollow" data-follow="1" value="팔로우 취소">
    ↓
  • <input type="button" class="instaBtn" id="btnFollow" data-follow="0" value="(맞)팔로우">

  ---

🟦 profile.html

<header th:fragment="header">
    <span id="globalConst" sec:authorize="isAuthenticated()" th:with="auth=${#authentication.getPrincipal().getUser()}"
          th:attr="data-iuser=${auth.iuser}, data-writer=${auth.nm}, data-writer-profile=${auth.mainProfile}"></span>

<div id="localConst" th:attr="data-iuser=${profile.iuser}"></div>

    <td class="pointer follower">팔로워</td>
    <td class="pointer follower" th:text="${profile.cntFollower}"></td>
    <td class="pointer follow">팔로우</td>
    <td class="pointer follow" th:text="${profile.cntFollow}"></td>

<div class="modal-follow hide">
    <div>
        <div class="container">
            <div class="top">
                <div id="title">팔로우</div>
                <i id="modal-follow-close" class="moodal_clse fas fa-times"></i>
            </div>
            <div class="followCont"></div>
        </div>
    </div>
</div>

• 팔로우 , 팔로우 수 또는 팔로워 , 팔로워 수를 누르면 사용자리스트 모달창이 뜬다.

🟦 profile.js

const followerElemArr = document.querySelectorAll('.pointer.follower');
const followElemArr = document.querySelectorAll('.pointer.follow');
const modalFollowElem = document.querySelector('.modal-follow');
const modalFollowTitleElem = modalFollowElem.querySelector('#title');
const modalFollowCloseElem = document.querySelector('.modal-follow #modal-follow-close');
const modalFollowItemConElem = modalFollowElem.querySelector('.followCont');

if(followerElemArr) {
    followerElemArr.forEach(item => {
        item.addEventListener('click', () => {
            modalFollowTitleElem.innerText = '팔로워';
            modalFollowElem.classList.remove('hide');
            modalFollowItemConElem.innerHTML = '';

            //프로필 사용자를 팔로우한 사람들 리스트
            fetch(`getFollowerList?iuserYou=${localConstElem.dataset.iuser}`)
                .then(res => res.json())
                .then(myJson => {
                    if(myJson.length > 0) {
                        myJson.forEach(item => {
                            const cont = makeFollowItem(item);
                            modalFollowItemConElem.append(cont);
                        });
                    }
                });
        });
    });
}

if(followElemArr) {
    followElemArr.forEach(item => {
        item.addEventListener('click', () => {
            modalFollowTitleElem.innerText = '팔로우';
            modalFollowElem.classList.remove('hide');
            modalFollowItemConElem.innerHTML = '';

            //프로필 사용자가 팔로우한 사람들 리스트
            fetch(`getFollowList?iuserYou=${localConstElem.dataset.iuser}`)
                .then(res => res.json())
                .then(myJson => {
                    if(myJson.length > 0) {
                        myJson.forEach(item => {
                            const cont = makeFollowItem(item);
                            modalFollowItemConElem.append(cont);
                        });
                    }
                });
        });
    });
}

if(modalFollowCloseElem) {
    modalFollowCloseElem.addEventListener('click', () => {
        modalFollowElem.classList.add('hide');
    });
}

function makeFollowItem(item) {
    const globalContElem = document.querySelector('#globalConst');
    const loginIuser = globalContElem.dataset.iuser;

    const cont = document.createElement('div');
    cont.className = 'follow-item';
    const img = document.createElement('img');
    img.className = 'profile wh30 pointer';
    img.src = `/pic/profile/${item.iuser}/${item.mainProfile}`;
    img.onerror = () => { img.style.visibility = 'hidden'; }
    img.addEventListener('click', ()=> {
        moveToProfile(item.iuser); //feed.js 에 있는 메소드
    });

    const nm = document.createElement('div');
    const nmText = document.createElement('span');
    nmText.innerText = item.nm;
    nmText.className = 'pointer';
    nmText.addEventListener('click', ()=> {
        moveToProfile(item.iuser); //feed.js 에 있는 메소드
    });
    nm.append(nmText);

    const btn = document.createElement('input');
    btn.className = 'instaBtn pointer';
    btn.dataset.follow = '0';
    btn.addEventListener('click', () => {
        const follow = parseInt(btn.dataset.follow);
        followProc(follow, item.iuser, btn);
    });

    cont.append(img);
    cont.append(nm);
    if(parseInt(loginIuser) !== item.iuser) {
        btn.type = 'button';
        if(item.isMeFollowYou) {
            btn.dataset.follow = '1';
            btn.value = '팔로우 취소';
        } else {
            btn.classList.add('instaBtnEnable');
            btn.value = '팔로우';
        }
        cont.append(btn);
    }
    return cont;
}

• 

• followerElemArr : <td class="pointer follower">팔로워</td><td class="pointer follower" th:text="${profile.cntFollower}"></td>
• followElemArr : <td class="pointer follow">팔로우</td><td class="pointer follow" th:text="${profile.cntFollow}"></td>
• modalFollowElem :

•  <div class="modal-follow hide">
       <div>
           <div class="container">
               <div class="top">
                   <div id="title">팔로우</div>
                   <i id="modal-follow-close" class="moodal_clse fas fa-times"></i>
               </div>
               <div class="followCont"></div>
           </div>
       </div>
   </div>

• modalFollowTitleElem : <div id="title">팔로우</div>
• modalFollowCloseElem : <i id="modal-follow-close" class="moodal_clse fas fa-times"></i>
• modalFollowItemConElem : <div class="followCont"></div>

---

🟦 UserController

@ResponseBody
@GetMapping("/getFollowerList")
public List<UserDomain> getFollowerList(UserFollowEntity param) {
    return service.selUserFollowerList(param);
}

@ResponseBody
@GetMapping("/getFollowList")
public List<UserDomain> getFollowList(UserFollowEntity param) {
    return service.selUserFollowList(param);
}

🟦 UserService

public List<UserDomain> selUserFollowerList(UserFollowEntity param) {
    param.setIuserMe(auth.getLoginUserPk());
    return mapper.selUserFollowerList(param);
}

public List<UserDomain> selUserFollowList(UserFollowEntity param) {
    param.setIuserMe(auth.getLoginUserPk());
    return mapper.selUserFollowList(param);
}

🟦 UserMapper

List<UserDomain> selUserFollowerList(UserFollowEntity param);
List<UserDomain> selUserFollowList(UserFollowEntity param);

<select id="selUserFollowerList" resultType="UserDomain">
    SELECT B.iuser, B.nm, B.mainProfile
         , CASE WHEN C.iuserMe IS NULL THEN 0 ELSE 1 END AS isMeFollowYou
    FROM t_user_follow A
    INNER JOIN t_user B
    ON A.iuserMe = B.iuser
    LEFT JOIN t_user_follow C
    ON C.iuserMe = ${iuserMe} -- 로그인한 사람 pk
    AND C.iuserYou = A.iuserMe
    WHERE A.iuserYou = ${iuserYou} -- 프로필 주인장  pk
</select>

<select id="selUserFollowList" resultType="UserDomain">
    SELECT B.iuser, B.nm, B.mainProfile
    , CASE WHEN C.iuserMe IS NULL THEN 0 ELSE 1 END AS isMeFollowYou
    FROM t_user_follow A
    INNER JOIN t_user B
    ON A.iuserYou = B.iuser
    LEFT JOIN t_user_follow C
    ON C.iuserMe = ${iuserMe} -- 로그인한 사람 pk
    AND C.iuserYou = A.iuserYou
    WHERE A.iuserMe = ${iuserYou} -- 프로필 주인장  pk
</select>

---

🟦 팔로워 리스트 로직

profile.js followerElemArr.forEach(item => { item.addEventListener('click', () => {})});

• getFollowList?iuserYou=${localConstElem.dataset.iuser}
  • ${localConstElem.dataset.iuser} = ${profile.iuser} 👉 [ 나 ] 또는 [ 그사람 ]의 iuser

👇

UserController. getFollowerList()

@ResponseBody
@GetMapping("/getFollowerList")
public List<UserDomain> getFollowerList(UserFollowEntity param) {
    return service.selUserFollowerList(param);
}

• UserFollowEntity.iuserYou(그사람 또는 나)

👇

UserService.selUserFollowerList()

public List<UserDomain> selUserFollowerList(UserFollowEntity param) {
    param.setIuserMe(auth.getLoginUserPk());
    return mapper.selUserFollowerList(param);
}

• UserFollowEntity.iuserYou(그사람 또는 나) | iuserMe(나)

👇

UserMapper.selUserFollowerList()

<select id="selUserFollowerList" resultType="UserDomain">
    SELECT B.iuser, B.nm, B.mainProfile
         , CASE WHEN C.iuserMe IS NULL THEN 0 ELSE 1 END AS isMeFollowYou
    FROM t_user_follow A
    INNER JOIN t_user B
    ON A.iuserMe = B.iuser
    LEFT JOIN t_user_follow C
    ON C.iuserMe = ${iuserMe} -- 로그인한 사람 pk
    AND C.iuserYou = A.iuserMe
    WHERE A.iuserYou = ${iuserYou} -- 프로필 주인장  pk
</select>

• iuserMe가 [ 나 ]의 입장에서 [ 다른사람 ]을 팔로우 한 것이다.
• A.iuserMe = B.iuser는 A.iuserYou = ${iuserYou} : [그사람 또는 나]를 팔로우한 사람들이다.
• C.iuserMe = ${iuserMe} : [ 나 ]
• 즉, C.iuserMe = ${iuserMe} [ 나 ]인데, A.iuserYou = ${iuserYou} [ 그 사람 또는 나 ]를 팔로우하는 A.iuserMe = B.iuser = C.iuserYou를 팔로우하는 지 알아보는 것이다.

👇

profile.js makeFollowItem(item)

• item : [ 그사람 또는 나 ]를 팔로우하는 사람의 iuser, nm, mainprofile , iuserMe ([ 내 ] 가 [그사람 또는 나]를 팔로우하는 사람을 팔로우하는지)

    const globalContElem = document.querySelector('#globalConst');
    const loginIuser = globalContElem.dataset.iuser;

• globalContElem : <span id="globalConst" sec:authorize="isAuthenticated()" th:with="auth=${#authentication.getPrincipal().getUser()}" th:attr="data-iuser=${auth.iuser}, data-writer=${auth.nm}, data-writer-profile=${auth.mainProfile}"></span>
• loginIuser : [ 나 ]

    const cont = document.createElement('div');
    cont.className = 'follow-item';

• <div class="follow-item"></div>

    const img = document.createElement('img');
    img.className = 'profile wh30 pointer';
    img.src = `/pic/profile/${item.iuser}/${item.mainProfile}`;
    img.onerror = () => { img.style.visibility = 'hidden'; }
    img.addEventListener('click', ()=> {
        moveToProfile(item.iuser); //feed.js 에 있는 메소드
    });

• <img class="profile wh30 pointer" src="/pic/profile/${item.iuser}/${item.mainProfile}">

    const nm = document.createElement('div');
    const nmText = document.createElement('span');
    nmText.innerText = item.nm;
    nmText.className = 'pointer';
    nmText.addEventListener('click', ()=> {
        moveToProfile(item.iuser); //feed.js 에 있는 메소드
    });
    nm.append(nmText);

•     <div>
          <span class="pointer" onclick="moveToProfile(item.iuser)">item.nm</span>
      </div>

    const btn = document.createElement('input');
    btn.type = 'button';
    btn.className = 'instaBtn pointer';
    btn.dataset.follow = '0';
    btn.addEventListener('click', () => {
        const follow = parseInt(btn.dataset.follow);
        followProc(follow, item.iuser, btn);
    });

• <input type="button" class="instaBtn pointer" data-follow="0">

    cont.append(img);
    cont.append(nm);

• <div class="follow-item">
      <img class="profile wh30 pointer" src="/pic/profile/${item.iuser}/${item.mainProfile}" 
              onerror="" onclick="moveToProfile(item.iuser)">
      <div>
            <span class="pointer" onclick="moveToProfile(item.iuser)">item.nm</span>
      </div>
  </div>

    if(parseInt(loginIuser) !== item.iuser) {
        if(item.isMeFollowYou) {
            btn.classList.add('instaBtnEnable');
            btn.dataset.follow = '1';
            btn.value = '팔로우 취소';
        } else {
            
            btn.value = '팔로우';
        }
        cont.append(btn);
    }
    return cont;
}

• if(parseInt(loginIuser) !== item.iuser) : [ 나 ] 와 [ 나 또는 그사람 ]을 팔로우하는 사람이 겹친다면 ,
  즉, [ 그 사람 ]을 팔로우하는 사람 중에 [ 내 ]가 있다면 팔로우 버튼을 넣지 않겠다.

• <div class="follow-item">
      <img class="profile wh30 pointer" src="/pic/profile/${item.iuser}/${item.mainProfile}" 
              onerror="" onclick="moveToProfile(item.iuser)">
      <div>
            <span class="pointer" onclick="moveToProfile(item.iuser)">item.nm</span>
      </div>
      <input type="button" class="instaBtn pointer" data-follow="0"
               value="팔로우" onclick=" followProc(follow, item.iuser, btn);">
      <input type="button" class="instaBtn instaBtnEnable pointer" data-follow="1"
               value="팔로우 취소" onclick=" followProc(follow, item.iuser, btn);">
  </div>

👇

profile.js followerElemArr.forEach(item => { item.addEventListener('click', () => {})});

........

modalFollowTitleElem.innerText = '팔로워';
modalFollowElem.classList.remove('hide');
modalFollowItemConElem.innerHTML = '';

........

    .then(myJson => {
        if(myJson.length > 0) {
            myJson.forEach(item => {
                const cont = makeFollowItem(item);
                modalFollowItemConElem.append(cont);
            });
        }

👇 결과

 <div class="modal-follow">
     <div>
         <div class="container">
             <div class="top">
                 <div id="title">팔로워</div>
                 <i id="modal-follow-close" class="moodal_clse fas fa-times"></i>
             </div>
             <div class="followCont">
                <div class="follow-item">
                    <img class="profile wh30 pointer" src="/pic/profile/${item.iuser}/${item.mainProfile}" 
                            onerror="" onclick="moveToProfile(item.iuser)">
                    <div>
                          <span class="pointer" onclick="moveToProfile(item.iuser)">item.nm</span>
                    </div>
                    <input type="button" class="instaBtn pointer" data-follow="0"
                             value="팔로우" onclick=" followProc(follow, item.iuser, btn);">
                    <input type="button" class="instaBtn instaBtnEnable pointer" data-follow="1"
                             value="팔로우 취소" onclick=" followProc(follow, item.iuser, btn);">
              </div>
          </div>
         </div>
     </div>
 </div>