좋아요 구현
댓글은 나중에 진행할거고 클릭하면 좋아요가 실행이 되도록 할거다
클릭하는 이벤트가
story.js에서 toggleLike() 함수 부분이다
// (3) 좋아요, 안좋아요
function toggleLike(imageId) {
let likeIcon = $(`#storyLikeIcon-${imageId}`);
if (likeIcon.hasClass("far")) { //좋아요 하겠
$.ajax({
type: "post",
url : `/api/image/${imageId}/likes`,
dataType: "json"
}).done(res=>{
likeIcon.addClass("fas");
likeIcon.addClass("active");
likeIcon.removeClass("far");
}).fail(error=>{
console.log("오류", error)
});
} else { //좋아요 취소 하겠다
$.ajax({
type: "delete",
url : `/api/image/${imageId}/likes`,
dataType: "json"
}).done(res=>{
likeIcon.removeClass("fas");
likeIcon.removeClass("active");
likeIcon.addClass("far");
}).fail(error=>{
console.log("오류", error)
});
}
}
JavaScript
복사
likes 테이블에는 데이터가 한개있고
ssar 1번 유저로 로그인하고
하트를 누르면
잘 등록되고 해제된다
문제는 밑에 likes 숫자가 하트를 눌러도 0으로 유지되고 변경되지 않는다는건데
f5하면 변경되고 동적으로 처리가 되고 있지 않다.
그래서 하트를 누를때 변경되도록 추가해주자
story.js 에서 toggleLike 함수에다가 성공했을때
$.ajax 성공 시
let likeCountStr = $(`#storyLikeCount-${imageId}`).text();
console.log("좋아요 카운", likeCountStr);
JavaScript
복사
콘솔에 현재 좋아요 카운트 0을 갖고온다
let likeCountStr = $(`#storyLikeCount-${imageId}`).text();
let likeCount = Number(likeCountStr) + 1;
console.log("좋아요 카운 증가", likeCount);
JavaScript
복사
증가된 값 1로 잘 찍힌다
이제 화면에 뿌려지게 셋팅해주자
let likeCountStr = $(`#storyLikeCount-${imageId}`).text();
let likeCount = Number(likeCountStr) + 1;
console.log("좋아요 카운 증가", likeCount);
$(`#storyLikeCount-${imageId}`).text(likeCount);
JavaScript
복사
근데 하트 취소 할때는 delete에도 -1 되도록 추가해주자
let likeCountStr = $(`#storyLikeCount-${imageId}`).text();
let likeCount = Number(likeCountStr) - 1;
$(`#storyLikeCount-${imageId}`).text(likeCount);
JavaScript
복사
하트를 누르면
바로 1로 변경된다. 취소도 바로바로 적용됨
그러면 이제 3번 유저인 love로 로그인해보자
이거는 다른유저가 누른 하트가 있는 이미지탐라다.
이제 love 유저가 누르면 하트가 2로 변경