좋아요 기능 구현한 것좀 봐주실수 있을까요?

[박건우]

제멋대로 만들어서 동작은 되는데 중복되는 코드도 많은 것 같고 fetch나 api를 이렇게 많이 써도 되는지 모르겠네요.
문제되는 부분이 없는지 한 번 봐주시면 감사 하겠습니다! 


<< 좋아요 컴포넌트 >>
'use client'

import { useEffect, useState } from "react"

export default function Like(props) {

    let [like, setLike] = useState(0);

    let [heart, setHeart] = useState('🤍')

    useEffect(() => {

        fetch(`/api/likeapi/b?id=${props._id}`)

        .then((r)=>{

            return r.json()

        })

        .then((result)=>{

            setLike(result);

        })

    },[like])

   useEffect(() => {

        fetch(`/api/likeapi/c?id=${props._id}`)

        .then((r)=>{

            return r.json()

        })

        .then((result)=>{

            setHeart(result);

        })

    },[heart])

    return (

        <div>

            <span onClick={()=>{

                fetch(`/api/likeapi/a?id=${props._id}`)

                setLike()

                setHeart()

            }}>{heart} </span>

            <span>{like}</span>

        </div>

    )

}

<< 서버 API a - DB저장 >>

import { getServerSession } from "next-auth";
import { connectDB } from "@/util/database";
import { ObjectId } from "mongodb";
import { authOptions } from "../auth/[...nextauth]";

export default async function handler(요청, 응답) {

    let session = await getServerSession(요청, 응답,authOptions);

    if (session) {

        let client = await connectDB;

        let db = client.db('forum');

        let 찾는거 = await db.collection('like').findOne({name:session.user.name, parent:new ObjectId(요청.query.id)});

        if (찾는거 == null) {

            await db.collection('like').insertOne({name:session.user.name, parent:new ObjectId(요청.query.id)});

            응답.status(200).json('좋아요');

        } else {

            await db.collection('like').deleteOne({name:session.user.name, parent:new ObjectId(요청.query.id)});

            응답.status(200).json('좋아요취소');

        }

    } else {

        응답.status(500).json('로그인이 필요합니다.')

    }

}

<< 서버 API b - 좋아요 개수 가져오기 >>
import { connectDB } from "@/util/database";
import { ObjectId } from "mongodb";

export default async function handler(요청, 응답) {

    let client = await connectDB;

    let db = client.db('forum');

    let like = await db.collection('like').find({parent:new ObjectId(요청.query.id)}).toArray();

    응답.status(200).json(like.length);

}

<< 서버 API c - 좋아요 이모티콘 변경>>
import { getServerSession } from "next-auth";
import { connectDB } from "@/util/database";
import { ObjectId } from "mongodb";
import { authOptions } from "../auth/[...nextauth]";

export default async function handler(요청, 응답) {

    let session = await getServerSession(요청, 응답,authOptions);

    if (session) {

        let client = await connectDB;

        let db = client.db('forum');

        let 찾는거 = await db.collection('like').findOne({name:session.user.name, parent:new ObjectId(요청.query.id)});

        if (찾는거 == null) {

            응답.status(200).json('🤍')

        } else {

            응답.status(200).json('❤️‍🔥')

        }

    } else {

        응답.status(500).json('🤍')

    }

}

[codingapple]

b랑 c 기능 따로 만들어놨는데 나중에 별개로 쓸 일이 없을거같으면 b랑 c는 합쳐놔도 될듯요 
좋아요기능과 좋아요취소기능 api는 별개로 만드는게 정확할거같긴합니다

[글쓴이]

글