좋아요 구현
이제 타임라인에 있는 좋아요 부분을 진행할거다.
1이라 적혀있는부분을 이제 좋아요 눌렀을때 안눌렀을때 구분해서 던져줄 값으로 변경해준다.
story.js
<button>
<i class="fas fa-heart active" id="storyLikeIcon-${image.id}" onclick="toggleLike(${image.id})"></i>
</button>
JavaScript
복사
그리고 소스에 있는 toggleLike() 함수에 파라매터 값을 추가했기 때문에
// (3) 좋아요, 안좋아요
function toggleLike(imageId) {
let likeIcon = $(`#storyLikeIcon-${imageId}`);
if (likeIcon.hasClass("far")) {
likeIcon.addClass("fas");
likeIcon.addClass("active");
likeIcon.removeClass("far");
} else {
likeIcon.removeClass("fas");
likeIcon.removeClass("active");
likeIcon.addClass("far");
}
}
JavaScript
복사
눌렀다가 취소했다 할 수 있다. (연결 기능은 아직 안함)
1. 좋아요 모델 만들기
domain 폴더 안에 likes 폴더 생성 후 안에 Likes.java 생성
like가 아니라 likes인 이유는 마리아디비랑 마이에스큐엘에는 like가 키워드라서 테이블이 안만들어진다.
package com.cos.photogramstart.domain.likes;
import java.time.LocalDateTime;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.PrePersist;
import javax.persistence.Table;
import javax.persistence.UniqueConstraint;
import com.cos.photogramstart.domain.image.Image;
import com.cos.photogramstart.domain.subscribe.Subscribe;
import com.cos.photogramstart.domain.user.User;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
@Builder
@AllArgsConstructor
@NoArgsConstructor
@Data
@Entity
@Table(
uniqueConstraints = {
@UniqueConstraint(
name="likes_uk",
columnNames = {"imageId", "userId"}
)
}
)
public class Likes {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int id;
private Image image;
private User user;
private LocalDateTime createDate;
@PrePersist
public void createDate() {
this.createDate = LocalDateTime.now();
}
}
Java
복사
틀을 잡아두고
하나의 이미지는 N개의 좋아요를 얻을 수 있다.
한명의 유저는 N개의 좋아요를 할 수 있다.
@Builder
@AllArgsConstructor
@NoArgsConstructor
@Data
@Entity
@Table(
uniqueConstraints = {
@UniqueConstraint(
name="likes_uk",
columnNames = {"imageId", "userId"}
)
}
)
public class Likes { // N
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int id;
@JoinColumn(name="imageId")
@ManyToOne
private Image image; // 1
@JoinColumn(name="userId")
@ManyToOne
private User user; // 1
private LocalDateTime createDate;
@PrePersist
public void createDate() {
this.createDate = LocalDateTime.now();
}
}
Java
복사
2번 유저가 1번 유저를 좋아요 했는데 또 1번 유저를 좋아요 할 수는 없다.
그래서 그 두 개를(좋아요랑 이미지)
중복 유니크 키에 묶어둔거다. (두개가 중복될 수 없다)
좋아요 데이터를 가지고 올 때
유저 데이터를 갖고오게 되는데 유저데이터 안에는
이미지 데이터가 있다.
우리 이건 안갖고 와도 되기 때문에 잡아줘야한다.
근데 오류가 터지고 나서 잡아주기로 하자. (기억해두기)