TIL 23.08.24 좋아요 버튼 및 숫자 구현

[좋아요 버튼 구현하기]

 

좋아요 구현이 이렇게 어려운 일인줄 몰랐는데 시간이 꽤 걸렸다. 만들고 나서도 리팩토링이 필요한 코드라는 것을 절실하게 느꼈지만 일단 기능은 동작하니까.. 어떻게 굴러가게 만들었는지 정리해보려고 한다.

 

좋아요 로직

 

1. 유저가 로그인한다. [로그인 한 유저에게만 좋아요를 누를 수 있는 권한이 부여됨]

 

 // 현재 유저정보 fetch
  const fetchUser = async () => {
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser();

      if (!user) {
        setUser(false);
      } else {
        setUser(user);
        console.log(user);
        fetchUserLike(user); // 유저 정보를 가져온 후에 fetchUserLike 함수 호출
      }
    } catch (error) {
      console.error("Error fetching user:", error);
    }
  };

 

2. 로그인 이후 유저의 좋아요 목록을 스캔한다.

유저가 좋아요를 눌렀던 게시글에 좋아요 버튼이 빨간색이 되도록 반영하기 위함 -> 좋아요 데이터 테이블에서 유저의 id와 해당 제품의 id를 검색하고 해당 아이템의 버튼색을 active.

 

// 유저의 기존에 있던 좋아요 목록을 불러오는 로직 -> 로그인 이후에 실행되는 함수
  const fetchUserLike = async (user: any) => {
    const { data: existingLikeData, error: existingLikeError } = await supabase
      .from("like_product")
      .select()
      .eq("user_id", user.id);
    setLikedByUser(existingLikeData!);
    console.log(existingLikeData);
  };

 

3. 좋아요 버튼을 누른다. (좋아요를 취소/ 좋아요를 새로 누르는 동작)

여기서 로그인을 안한 상태 -> 로그인 후 이용해 주세요 하고 Alert 띄워주면 된다.

 

const userId = user.id;

    if (!user) {
      alert("로그인 후 이용 가능합니다.");
      return;
    } else {
      // 현재 유저가 해당 게시물에 대해 좋아요를 눌렀는지 안눌렀는지에 대한 데이터
      // => 빈값인경우 좋아요누르면 추가, 데이터가있을경우 좋아요누르면 삭제
      const { data: existingLikeData, error: existingLikeError } =
        await supabase
          .from("like_product")
          .select()
          .eq("product_uid", id)
          .eq("user_id", userId);

 

3-1. 기존에 좋아요를 눌렀다면 ? => 기존에 좋아요를 취소하는 로직

      // 좋아요 이미 눌렀으면 삭제하는 로직
      if (!existingLikeError && existingLikeData.length > 0) {
        await supabase
          .from("like_product")
          .delete()
          .eq("user_id", userId)
          .eq("product_uid", id);

 

좋아요를 취소함과 동시에 숫자도 -1 감소되게 만들어야한다.

 // 좋아요 count 내리는 로직
        const { error: likeCountError } = await supabase
          .from("product")
          .update({ like_count: currentLikeCount![0].like_count - 1 })
          .eq("id", id);

 

3-2. 기존에 좋아요를 안눌렀다면 ? => 좋아요를 추가하는 로직

 

 // 좋아요 구현하는 로직
        const { error: insertError } = await supabase
          .from("like_product")
          .insert({ product_uid: id, user_id: userId });

 

좋아요를 누름과 동시에 숫자도 +1 되게 만들어야함.

 

// 좋아요 count 올리는 로직
        const { error: likeCountError } = await supabase
          .from("product")
          .update({ like_count: currentLikeCount![0].like_count + 1 })
          .eq("id", id);

 

그리고 한번더 fetch 해서 업데이트 된 데이터 가져오기 .. 이 부분은 쿼리를 이용하던지 해서 다시 리팩토링 해보고싶다 ..