Til (2022.12.26)

상세페이지마다 댓글 분리

<ProductComment product_post_id={product_post?.id} />

const { product_comments } = useSelector((state) => {
    return state.product_comments;
  });

/*댓글 작성*/
const onSubmitHandler = (e) => {
    e.preventDefault();
    if (title == "") {
      return alert("제목을 입력해주세요");
    } else if (content == "") {
      return alert("내용을 입력해주세요");
    }

    let NewData = {
      id: uuid(),
      product_post_id: props.product_post_id,
			**/*아이디를 본문에서 받아옴*/**
      content,
      title,
      toggledisplay: false,
    };

    dispatch(__addproduct_comments(NewData));

    setContent("");
    setTitle("");
  };

/*댓글*/
  const product_comment = product_comments
    .filter((item) => {
      return item.product_post_id === props.product_post_id;
			**/*본문 아이디랑 같으면 표시*/**
    })
    .map((t) => {
      return (
        <div key={t.id} className="productCommentText">
          <form onSubmit={(e) => productCommentOnSubmit(e, t)}>
            <p>
              {t.toggledisplay ? (
                <input
                  type="text"
                  value={editTitle}
                  onChange={(e) => {
                    setEditTitle(e.target.value);
                  }}
                  maxLength={10}
                />
              ) : (
                t.title
              )}
            </p>
            <p>
              {t.toggledisplay ? (
                <input
                  type="text"
                  onChange={(e) => {
                    setEditContent(e.target.value);
                  }}
                  value={editContent}
                  maxLength={25}
                />
              ) : (
                t.content
              )}
            </p>
            {t.toggledisplay ? <button>완료</button> : ""}
          </form>

          <div>
            <button
              onClick={() => {
                ProductEdit(t);
              }}
            >
              {t.toggledisplay ? "취소" : "수정"}
            </button>
            <button onClick={DeletePost}>삭제</button>
          </div>
        </div>
      );
    });

각 상세페이지 마다 각 페이지의 댓글만 보이게 하기 위해 props로 받아 온 본문의 id를 댓글 작성 할 때 객체로 들어가게 한 다음 그것과 본문의 id가 일치 할때만 filter, map을 이용해 표시하게 했다.