좋아요 구현
3. 좋아요 구현하기
현재는 모든 타임라인에 하트가 눌려져있어서 내가 하트를 누른 글에만 하트가 빨간색이게 해줘야한다
active가 있으면 빨갛게 하트가 되고 없으면 흰색 하트로 변경된다
이미지스토리를 갖고올때 거기에 좋아요 상태가 담겨져서 와야한다.
image.java에 이미지 좋아요 추후 업데이트 주석 밑에 이제 추가해주면 된다.
// 이미지 좋아요
@JsonIgnoreProperties({"image"})
@OneToMany(mappedBy = "image")
private List<Likes> likes;
Java
복사
@JsonIgnoreProperties은 무한참조가 안되기 위해서 추가
imageService.java
// 2 (cos)유저 로그인 시
//images에 좋아요 상태담기
images.forEach((image)->{
});
Java
복사
cos로 로그인시 cos가 구독하고 있는 이미지들을 들고 온다
그 이미지를 for문 돌려서 하나씩 뽑아내고
// 2 (cos)유저 로그인 시
//images에 좋아요 상태담기
images.forEach((image)->{
image.getLikes().forEach((like)->{
});
});
Java
복사
그러고 갖고온 이미지 하나씩 좋아요를 하고 있는 값들을 갖고와서 cos가 좋아요를 하고 있는지 확인하면된다
//images에 좋아요 상태담기
images.forEach((image)->{
image.getLikes().forEach((like)->{
if(like.getUser().getId() == principalId) { //해당 이미지에 좋아요한 사람들을 찾아서 현재 로그인한 사람이 좋아요 한것인지 비
}
});
});
Java
복사
근데 좋아요를 한 상태를 담을 변수가 없기 때문에
image.java 에 좋아요 상태값 추가
근데 DB에는 컬럼 추가를 안하고 진행할거라서 @Transient를 추가해주면 DB에 컬럼 추가가 안된다
//images에 좋아요 상태담기
images.forEach((image)->{
image.getLikes().forEach((like)->{
if(like.getUser().getId() == principalId) { //해당 이미지에 좋아요한 사람들을 찾아서 현재 로그인한 사람이 좋아요 한것인지 비
image.setLikeState(true);
}
});
});
Plain Text
복사
@Transient //DB에 컬럼이 만들어지지 않는다.
private boolean likeState;
Java
복사
요걸로 import 해줘야한다
imageService.java
//images에 좋아요 상태담기
images.forEach((image)->{
image.getLikes().forEach((like)->{
if(like.getUser().getId() == principalId) { //해당 이미지에 좋아요한 사람들을 찾아서 현재 로그인한 사람이 좋아요 한것인지 비
image.setLikeState(true);
}
});
});
Java
복사
이제 story.js에서
<button>
${image.likeState}
<i class="fas fa-heart active" id="storyLikeIcon-${image.id}" onclick="toggleLike(${image.id})"></i>
</button>
Java
복사
스크롤 내려서 확인할려고 보니까 나머지 사진들을 못갖고 오길래
story.js에서 1 , -1 로 줬던걸 10, -10 으로 넉넉하게준다
if(checkNum < 10 && checkNum >-10){
page++;
storyLoad();
}
JavaScript
복사
그랬더니
오류나서 나머지 사진들을 못갖고온다..
Likes.java
@JoinColumn(name="imageId") //무한참조되서 추가
@ManyToOne
private Image image; // 1
Java
복사
무한참조되서 @JoinColumn 부분 추가
Image.java
@JsonIgnoreProperties({"image"})
@OneToMany(mappedBy = "image")
private List<Likes> likes;
Java
복사
무한참조되니까 @JsonIgnoreProperties 추가
근데 이상하게 image만 잡아주면 계속 무한참조 오류떠서 image랑 user를 같이 잡아줬다.
// 이미지 좋아요
@JsonIgnoreProperties({"image","user"})
@OneToMany(mappedBy = "image")
private List<Likes> likes;
JavaScript
복사
이제 안나오던 사진 2개 나오고 좋아요 누른 친구 이미지도 나온다.
이제 stroy.js 에서 getStoryItem함수 안에
<button>`;
if(image.likeState){
item += `<i class="fas fa-heart active" id="storyLikeIcon-${image.id}" onclick="toggleLike(${image.id})"></i>`;
}else{
item += `<i class="far fa-heart active" id="storyLikeIcon-${image.id}" onclick="toggleLike(${image.id})"></i>`;
}
item += `
</button>
</div>
JavaScript
복사
중간 부분에 if문으로 빨간하트 빈하트를 제어해준다
비어져있고
좋아요 누른 이미지는 빨간하트로 잘나온다!!