[개발] 금융 커뮤니티 - 리치에이블 개발일지 #4(좋아요)

 

 

후기

좋아요 기능을 구현하였다.

UI상의 표시와 백엔드의 좋아요 기능을 가진 것은 따로 분리하여 구현이 되어있다. 함께 서버 액션과 연동하니 시간도 오래걸리는 것을 알게 되었다. 그래서 사용자에게 즉각적인 반응을 주기로 했다.

표현할 Thread 객체를 불러와서 좋아요 현황을 렌더링한다.

 

import React, { useEffect, useState } from "react";
import { HeartIcon, MessageCircle, RepeatIcon, SendIcon } from "lucide-react";
import { threadLike } from "@/actions/thread/ThreadLike";
import { ThreadType } from "@/type/ThreadType";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";

interface ThreadFooterProps {
  thread: ThreadType;
}

const ThreadFooter = ({ thread }: ThreadFooterProps) => {
  const [likeNumber, setLikeNumber] = useState(thread?.likes | 0);
  const [iLike, setILike] = useState(thread?.iLike);

  const onClick = () => {
    const action = async () => {
      await threadLike(thread?.id);
    };
    action().then();

    if (iLike) {
      toast.error("좋아요 취소");
      setILike(false);
      setLikeNumber((thread.likes -= 1));
    }

    if (!iLike) {
      toast.success("좋아요");
      setILike(true);
      setLikeNumber((thread.likes += 1));
    }
  };

  useEffect(() => {
    if (thread) {
      setILike(thread?.iLike);
      setLikeNumber(thread?.likes);
    }
  }, [thread]);

  return (
    <div className={"flex select-none items-center"}>
      <Button
        variant={"ghost"}
        onClick={onClick}
        className={"flex items-center gap-2"}
      >
        <HeartIcon fill={iLike ? "red" : "none"} />
        <div>{likeNumber}</div>
      </Button>
      <Button variant={"ghost"} className={"flex items-center gap-2"}>
        <MessageCircle />
        <div>00</div>
      </Button>
      <Button variant={"ghost"} className={"flex items-center gap-2"}>
        <RepeatIcon />
      </Button>
      <Button variant={"ghost"} className={"flex items-center gap-2"}>
        <SendIcon />
      </Button>
    </div>
  );
};

export default ThreadFooter;

 

threadLike 함수의 작동 로직이다 하나안에 기존 내가 좋아요를 한 상태인지 체크를 한다.

"use server";

import db from "@/lib/db";
import { currentUser } from "@/lib/auth";

export const threadLike = async (threadId: string) => {
  const user = await currentUser();
  // 이미 좋아요를 눌렀는지 확인
  const existingLike = await db.threadLike.findFirst({
    where: {
      threadId: threadId,
      userId: user?.id,
    },
  });

  // 이미 좋아요를 눌렀다면, 좋아요 삭제 및 취소
  if (existingLike != null) {
    await db.threadLike.delete({
      where: {
        id: existingLike.id,
      },
    });
    await db.thread.update({
      where: {
        id: threadId,
      },
      data: {
        likes: {
          decrement: 1,
        },
      },
    });

    return { dislike: "좋아요 취소" };
  }

  // 좋아요 생성 및 증가
  if (existingLike == null) {
    await db.threadLike.create({
      data: {
        threadId: threadId,
        userId: user?.id as string,
      },
    });

    // 해당 스레드의 좋아요 수를 증가
    await db.thread.update({
      where: {
        id: threadId,
      },
      data: {
        likes: {
          increment: 1,
        },
      },
    });

    const activity = await db.activity.create({
      data: {
        title: "좋아요",
        content: "좋아요를 눌렀습니다.",
      },
    });

    await db.activityUser.create({
      data: {
        userId: user?.id as string,
        activityId: activity.id,
      },
    });

    return { like: "좋아요" };
  }
  return { error: "서버 에러" };
};

 

사이트

https://richable.cyber-luna.com

리치에이블 - 로그인

소스코드

https://github.com/TwoIceFIsh/richable-web-server

GitHub - TwoIceFIsh/richable-web-server: richable-web-server