🟦 팔로우, 팔로워 리스트 로직

• 리스트에서 필요한 것
  : users_id(그사람의 팔로워/팔로우), users_img(그사람의 팔로워/팔로우), users_name(그사람의 팔로워/팔로우), users_nickname(그사람의 팔로워/팔로우), isYourFollower(내가 팔로워/팔로우를)

• ProfileMapper
  • List<UserDomain> selFollowerList(FollowEntity param);
  • FollowEntity (hisFollower : 나, him : 그사람)
  • List<UserDomain> selFollowList(FollowEntity param);
  • FollowEntity(hisFollower : 그사람 , him : 나)

✅ FROM follow랑 INNER JOIN users의 결과를 LEFT JOIN follow하고 그 결과를 SELECT하는 것이다~!!!

• List<UserDomain> selFollowerList(FollowEntity param); , hisFollower : 나, him : 그사람
• 그 사람의 팔로워들과 그 팔로워들이 내가 팔로우 하는지 구한다.

SELECT U.users_id, U.users_img, U.users_name, U.users_nickname, 
-- 그사람을 팔로우하는 사람들 
CASE WHEN W.follow_hisFollower IS NULL THEN 0 ELSE 1 END AS isYourFollower 
-- 그사람을 팔로우한 사람을 내가 팔로우 하는가 👉 W.hisFollower = 나 , W.him = 그사람을 팔로우하는 사람들
FROM follow F
-- F.follow_him = 그 사람 , F.hisFollower = 그사람을 팔로우하는 사람들을 
-- 설정(WHERE)해주기 위해서 FROM은 follow에서
INNER JOIN  users U
-- 그사람을 팔로우하는 사람들을 구하기 위해 INNER JOIN
ON  F.follow_hisFollower=U.users_id 
-- F.follow_him = 그 사람 , F.hisFollower = 그사람을 팔로우하는 사람들 = U.users_id = W.him 
LEFT JOIN follow W 
-- 그사람을 팔로우하는 사람들을 내가 팔로우 하는지 구하기 위해 LEFT JOIN
ON W.follow_him = F.hisFollower AND W.follow_hisFollower=${나} 
WHERE  F.follow_him = ${그사람}

• List<UserDomain> selFollowList(FollowEntity param); , hisFollower : 그사람, him : 나
• 그 사람이 팔로우 하는 사람들과 그 팔로우들을 내가 팔로우 하는지 구한다.

SELECT U.users_id, U.users_img, U.users_name, U.users_nickname, 
CASE WHEN W.follow_hisFollower IS NULL THEN 0 ELSE 1 END AS isYourFollower 
FROM follow F
-- 그 사람이 팔로우 하는 사람들 = F.him , 그사람 = F.hisFollower 
-- 설정(WHERE)해주기 위해서 FROM은 follow에서
INNER JOIN users U
-- U.users_id = F.him = 그 사람이 팔로우하는 사람들
ON F.follow_him=U.users_id
LEFT JOIN follow W
-- 그 사람이 팔로우하는 사람들을 내가 팔로우 하는지  
-- 👉 W.him = F.him = U.users_id , W.hisFollower = 나
ON W.follow_him=F.follow_him AND W.follow_hisFollower=${나}
WHERE F.follow_hisFollower=${그사람}

• 로그인한 사람의 pk : mypageConstElem.dataset.uid
• 프로필 주인의 pk : mypageConstElem.dataset.pid
• 모달 리스트의 pk : item.users_id
• item에 들어있는 것 : users_id , users_img , users_name , users_nickname , isYourFollower

• 모달 리스트 구조

<tr> 
  <td> <img> 👈className(pointer, wh30, profileRadius) , src , ifnull , onerror , click </td>
  <td> <span>이름</span> ( <span> 닉네임 </span> ) </td> 👈pointer , click
  <td> <div> <i></i> </div> </td> 👈pointer , click(followProc)
</tr>

[profileTr] 
[profileImgTd] - [imgTg] 
[profileNmTd] - [nmSpn] , [nickNmSpn]  
[profileFollowTd] - [btnFollow] - [followIcn]

• <td> <button> <i></i> </button> </td>

btnFollow.id = 'btnFollow'

isYourFollower = 0 
btnFollow.dataset.follow = 'follow1';
followIcn.className = 'follow-icon bi bi-person';

isYourFollower = 1
btnFollow.dataset.follow = 'unfollow1';
followIcn.className = 'follow-icon bi bi-person-check';

🟦 마이페이지 리스트 구조

• 서버에서 가져와야 할 정보
• feed_id , contents_img[0], isFav, favCnt, CmtCnt, isCmt
• 서비스에서 userForFav , userForCmt 설정 필요

🔹 html

• bootstrap - grid , image , spinners

• mypage.html

<div id="mypageFeed">
  <!---
  <div id="mypageFeedContainer" th:attr="data-fid=${feed_id}"> 🔸 🔄* 반복 출력 
          <img src="/pic/feed/{feed_id}/{contents_img}" class="img-thumbnail" 
          onerror="this.src=/img/feed/error.png">
  </div>
  -->
</div>

<div class="hide m-5 d-flex justify-content-center" id="loading">
  <button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    Loading...
  </button>
</div>

• 이미지
  • th:attr , /pic/feed/{feed_id}/{contents_img} , onerror="this.src=/img/feed/error.png"

🔹 js

• mypageFeed.js
  • feedElem
  • loadingElem
  • mypage_id 👉🟦getFeedList🟦
  • limit 👉🟦getFeedList🟦
  • itemLength 👉🟦getFeedList , scrollInfinity🟦
  • getFeedList
  • makeFeedList
  • scrollInfinity
  • hideLoading
  • showLoading

FeedObj = {
feedElem : document.querySelector('#mypageFeed'),
loadingElem : document.querySelector('#loading'),
mypageList : mypageConstElem.dataset.pid,
limit : 12,
itemLength : 0,
getFeedList : function(page) {
  this.showLoading();
  fetch(`/profile/mypageList?mypage_id=${this.users_id}  👉🟦users_id , limit🟦
  &page=${page}&limit=${this.limit}`)
    .then(res => res.json())
    .then(myJson => {
      console.log(myJson);
      this.itemLength = myJson.length; 👉🟦itemLength (인피니티스크롤에서 쓰임)🟦
      this.makeFeedList(myJson);
    }).catch(err => {
      console.log(err);
      feedElem.innerHTML(`<img src="/img/feed/error.png" class="img-thumbnail wh400">`)
    }).then(() => {
      this.hideLoading();
    });
},
makeFeedList: function(data) {
        if(data.length == 0) { return; }

        for(let i=0; i<data.length; i++) {
            const item = data[i];
      }
},
setScrollInfinity: function(target) {
    target.addEventListener('scroll', () => {
        const {
            scrollTop,
            scrollHeight,
            clientHeight
        } = document.documentElement;

        if (scrollTop + clientHeight >= scrollHeight - 5 && this.itemLength === this.limit) {
            this.itemLength = 0;
            this.getFeedList(++this.currentPage);
        }
    }, { passive: true });
},
hideLoading: function() { this.loadingElem.classList.add('hide');},
showLoading: function() { this.loadingElem.classList.remove('hide'); }
}

🔹 java , sql

• FeedDTO
  • int mypage_id
  • int page
  • int limit
  • int user4FavCmt
  • public int getStartIdx( )

• FeedDomain
  • (int feed_id)
  • int isFav
  • int isCmt
  • int favCnt
  • int cmtCnt
  • ContentsEntity contents (contents_id , contents_img) - resultMap

• FeedMapper
  • feed테이블의 feed_id에 대해 특정한 게시물에 대한 정보(대표사진과 사진의 기본키, 좋아요 개수와 댓글 개수, 로그인 유저의 좋아요 여부와 댓글 여부)를 얻기 위한 SQL
  • List<FeedDomain> selMypageList(FeedDTO param)

🔹 hover

• https://github.com/WHYGRAM/DONELISTS-ERRORS/issues/48#issuecomment-894040980
• 리스트 중 특정한 게시물 위에 마우스를 올렸을 때,
  • 그 게시물의 좋아요 수와 댓글 수를 보여준다.
• 로그인유저가 게시물에 좋아요를 눌렀을 때는
  • <i class="bi bi-heart-fill"></i> 검정 하트
• 좋아요를 누르지 않았을 때는
  • <i class="bi bi-heart"></i> 빈 하트
• 댓글을 달았을 때는
  • <i class="bi bi-chat-left-quote-fill"></i> 검정 말풍선
• 댓글을 달지 않았을 때는
  • <i class="bi bi-chat-left-quote"></i> 빈 말풍선

const mementos = [];
mementos.push(feedElem.innerHTML);
mementos.push(`
<div class="wh70 blurImg"></div>
`);

🟦 마이페이지 디테일 구조

• mypage.html.id : mypageDetailModal
• mypageDetail.js : showMypageDetail(feed_id, mypage_id, isFav, isCmt)
  • ↳getMypageDetail(feed_id, mypage_id, isFav, isCmt)
  • /profile/mypageDetail?feed_id=${feed_id}&mypage_id=${mypageId}&isFav=${isFav}&isCmt=${isCmt}
    • ↳setMypageDetail(data)
      • ↳ set Profile - users_img, users_nickname, getDateTimeInfo(users_regdt)
      • setImgSlide - contents , bootstrap
      • setFav - feed_fav , isFav
      • setCmt - cmt , cmt_fav , isCmt
• FeedDTO
• FeedDomain
• ProfileController
  • @ResponseBody , @GetMapping(/mypageDetail)
  • FeedDomain mypageDetail(FeedDTO)
• ProfileService : FeedDomain selMypageDetail(FeedDTO param)
• ProfileMapeer : FeedDomain selMypageDetail(FeedDTO param)

🟦 댓글리스트

🔹 getCmtList

🔹 CmtDomain 👉LIST

• getCmtList에서 구해야 하는 것
• users_img , users_nickname
• (CmtEntity) cmt : (cmt_id , feed_id , users_id , cmt_cmt , cmt_regdt)
• (CmtFavEntity) cmtFav : (users_id , feed_id , cmt_id)
• cmtFavCnt , isCmtFav