๐ฆ ํ๋ก์ฐ, ํ๋ก์ ๋ฆฌ์คํธ ๋ก์ง
- ๋ฆฌ์คํธ์์ ํ์ํ ๊ฒ
: 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
FROM follow F
INNER JOIN users U
ON F.follow_hisFollower=U.users_id
LEFT JOIN follow W
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
INNER JOIN users U
ON F.follow_him=U.users_id
LEFT JOIN follow W
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
<div id="mypageFeed">
</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