좋아요 응용문제

[최재성]

"use client";

import Link from "next/link";
import { useState } from "react";

export default function ListItem({ result, result2 }) {
  let [like, setLike] = useState("");
  return (
    <div>
      {result.map((a, i) => (
        <div className="list-item" key={i}>
          <Link href={"/detail/" + result[i]._id}>{result[i].title}</Link>
          <Link href={"/edit/" + result[i]._id} className="list-btn">
            ✏️
          </Link>
          <button
            className="list-btn"
            onClick={(e) => {
              fetch("/api/post/delete", {
                method: "POST",
                body: result[i]._id,
              }).then(() => {
                e.target.parentElement.style.opacity = 0;
                setTimeout(() => {
                  e.target.parentElement.style.display = "none";
                }, 1000);
              });
            }}
          >
            🗑️
          </button>
          <button
            className="list-btn"
            onClick={() => {
              fetch("api/like/new", {
                method: "POST",
                body: result[i]._id,
              }).then((r) => {
                r.json().then((data) => {
                  setLike(data.count);
                  console.log(data.count);
                });
              });
            }}
          >
            {like}
          </button>
          <p>1월 1일</p>
        </div>
      ))}
    </div>
  );
}

import { connectDB } from "@/util/database";
import { ObjectId } from "mongodb";
import { getServerSession } from "next-auth";
import { authOptions } from "../auth/[...nextauth]";
export default async function handler(요청, 응답) {
  let session = await getServerSession(요청, 응답, authOptions);
  if (요청.method == "POST") {
    console.log(session.user.email);
    console.log(요청.body);

    // 요청.body = JSON.parse(요청.body);
    let 저장할거 = {
      contentId: 요청.body,
      likeUserId: session.user.email,
    };
    let db = (await connectDB).db("forum");
    let result = await db.collection("like").insertOne(저장할거);
    let count = await db
      .collection("like")
      .countDocuments({ likeUserId: session.user.email });
    console.log(count);
    응답.status(200).json({ count: count });
    // console.log(요청.body);
  }
}

이렇게 코드를 짜서 유저의 id와 게시물id를 불러와서 좋아요 숫자가 올라가는거까지 구현하는데 까지했는데요, 문제는 좋아요버튼을 누르면 모든 게시물의 버튼이 좋아요가 눌러집니다.
제가 생각하는건 useState에 배열을 만들어서 좋아요를 기록하는게 맞는거같은데, 어떻게 구현할지 감히 안잡히네요..

[codingapple]

글 갯수만큼 좋아요 갯수 저장할 state도 필요할듯요 array에 저장해두는게 어떨까요

[최재성]

let arr = new Array(result.length).fill(like); 이런식으로 짜는게 맞을까요?? 도저히 감히 안 잡히네요... ㅠㅠ

[codingapple]

new Array(result.length).fill(0) 해서 state에 넣고써봅시다

[글쓴이]

글