2024. 10. 16. (팀프로젝트 - code404(5))

1.  문제점

- 디테일 페이지에서 새로고침을 했을 때 이미 좋아요를 한 경우임에도 숫자가 반영되지 않았고, 다시 좋아요를 눌렀을 때 -1로 표기되는 상황이 생겨버림.

2. 해결방안

좋아요를 추가하거나 취소한 직후 서버와의 동기화가 제대로 이루어지지 않아서 새로고침을 했을 때 좋아요 수가 정확하지 않을 수 있음을 알았다.

-> 좋아요 추가 또는 취소 이후 서버에서 최신 상태를 다시 조회하여 클라이언트의 상태를 항상 서버와 일치하도록 한다.

-> 좋아요 개수와 사용자가 좋아요를 눌렀는지 여부를 동기화하기 위해 fetchLikes() 함수를 호출하였다.

const handleLike = async () => {
    const {
        data: { user }
    } = await supabase.auth.getUser();

    if (!user) {
        alert("로그인 후 좋아요를 누를 수 있습니다.");
        return;
    }

    if (userLikesPost) {
        const { error } = await supabase.from("Like").delete().eq("board_id", postId).eq("user_id", user.id);

        if (error) {
            alert("좋아요 취소 중 에러가 발생했습니다.");
        } else {
            setLikes(likes - 1);
            setUserLikesPost(false);
        }
    } else {
        const { error } = await supabase.from("Like").insert([
            {
                board_id: postId,
                user_id: user.id
            }
        ]);

        if (error) {
            console.error("Error adding like:", error);
            alert("좋아요 중 에러가 발생했습니다.");
        } else {
            setLikes(likes + 1);
            setUserLikesPost(true);
        }
    }
};

 

 

3. 수정된 코드

const fetchLikes = async () => {
    try {
        const { data: userData } = await supabase.auth.getUser();
        const userId = userData?.user?.id;

        // 게시물에 대한 좋아요 수 조회
        const { data: likeData, error: likesError } = await supabase
            .from("Like")
            .select("*")
            .eq("board_id", postId);

        if (likesError) throw new Error("좋아요 정보를 가져오는 중 에러가 발생했습니다.");

        setLikes(likeData.length);

        // 사용자가 이 게시물을 좋아요했는지 확인
        if (userId) {
            const userLikesPost = likeData.some((like: { user_id: string }) => like.user_id === userId);
            setUserLikesPost(userLikesPost);
        }
    } catch (err) {
        console.error(err);
        setError("좋아요 정보를 가져오는 중 에러가 발생했습니다.");
    }
};

const handleLike = async () => {
    const {
        data: { user }
    } = await supabase.auth.getUser();

    if (!user) {
        alert("로그인 후 좋아요를 누를 수 있습니다.");
        return;
    }

    if (userLikesPost) {
        const { error } = await supabase.from("Like").delete().eq("board_id", postId).eq("user_id", user.id);

        if (error) {
            alert("좋아요 취소 중 에러가 발생했습니다.");
        } else {
            await fetchLikes(); // 좋아요 정보를 다시 가져와서 상태 동기화
        }
    } else {
        const { error } = await supabase.from("Like").insert([
            {
                board_id: postId,
                user_id: user.id
            }
        ]);

        if (error) {
            console.error("Error adding like:", error);
            alert("좋아요 중 에러가 발생했습니다.");
        } else {
            await fetchLikes(); // 좋아요 정보를 다시 가져와서 상태 동기화
        }
    }
};