인프런 커뮤니티 질문&답변

안녕하세요, 댓글 삭제 기능을 구현하던 도중 Modal에서 입력받은 비밀번호가 제가 댓글을 생성할 때 입력했던 비밀번호와 동일함에도 비밀번호가 틀렸다는 에러 메시지가 나옵니다.

제가 작성한 코드에서 어떠한 오류가 있는 건지 가르쳐주시면 감사하겠습니다...

BoardComment Container

import { useState } from "react";
import { useRouter } from "next/router";
import { useMutation, useQuery } from "@apollo/client";
import BoardCommentsUI from "./BoardComments.presenter";
import {
  FETCH_BOARD,
  CREATE_BOARD_COMMENT,
  FETCH_BOARD_COMMENTS,
  DELETE_BOARD_COMMENT,
} from "./BoardComments.queries";
import { MouseEvent, ChangeEvent, MouseEventHandler } from "react";
import {
  IMutation,
  IMutationCreateBoardCommentArgs,
  IMutationDeleteBoardCommentArgs,
  IQuery,
  IQueryFetchBoardArgs,
  IQueryFetchBoardCommentsArgs,
} from "../../../../commons/types/generated/types";

export default function BoardComments() {
  const [writer, setWriter] = useState("");
  const [password, setPassword] = useState("");
  const [contents, setContents] = useState("");
  const [rating, setRating] = useState(0);
  const [user, setUser] = useState("");
  const [boardCommentId, setBoardCommentId] = useState("");
  const [modalPassword, setModalPassword] = useState("");
  const [contentLength, setContentLength] = useState(0);

  const [isOpen, setIsOpen] = useState(false);

  const router = useRouter();

  if (typeof router.query.boardId !== "string") {
    router.query.boardId = Array.isArray(router.query.boardId)
      ? router.query.boardId[0] 
      : String(router.query.boardId);
  }

  const { data } = useQuery<Pick<IQuery, "fetchBoard">, IQueryFetchBoardArgs>(
    FETCH_BOARD,
    {
      variables: {
        boardId: router.query.boardId,
      },
    }
  );

  const { data: commentData, refetch } = useQuery<
    Pick<IQuery, "fetchBoardComments">,
    IQueryFetchBoardCommentsArgs
  >(FETCH_BOARD_COMMENTS, {
    variables: {
      boardId: router.query.boardId,
    },
  });

  const [createBoardComment] = useMutation<
    Pick<IMutation, "createBoardComment">,
    IMutationCreateBoardCommentArgs
  >(CREATE_BOARD_COMMENT);

  const [deleteBoardComment] = useMutation<
    Pick<IMutation, "deleteBoardComment">,
    IMutationDeleteBoardCommentArgs
  >(DELETE_BOARD_COMMENT);

  const onChangeWriter = (event: ChangeEvent<HTMLInputElement>) => {
    setWriter(event.target.value);
  };

  const onChangePassword = (event: ChangeEvent<HTMLInputElement>) => {
    setPassword(event.target.value);
  };

  const onChangeContents = (event: ChangeEvent<HTMLTextAreaElement>) => {
    setContents(event.target.value);
    setContentLength(event.target.value.length);
  };

  const onChangeRating = (value: number) => {
    setRating(value);
  };

  const onChangeUser = (event: ChangeEvent<HTMLInputElement>) => {
    setUser(event.target.value);
  };

  const onChangeModalPassword = (event: ChangeEvent<HTMLInputElement>) => {
    setModalPassword(event.target.value);
  };

  const showModal = (event: MouseEvent<HTMLImageElement>): void => {
    setBoardCommentId(event.currentTarget.id);
    setIsOpen(true);
    console.log(boardCommentId);
  };

  const handelOk = (): void => {
    setIsOpen(false);
  };

  const handelCancel = (): void => {
    setIsOpen(false);
  };

  const onClickSubmitComment: MouseEventHandler<
    HTMLButtonElement
  > = async () => {
    try {
      if (typeof router.query.boardId !== "string") {
        return;
      }
      await createBoardComment({
        variables: {
          boardId: router.query.boardId,
          createBoardCommentInput: {
            writer,
            password,
            contents,
            rating,
          },
        },
      });
      refetch();
    } catch (error) {
      console.log(error.message);
    }
    setRating(0);
    setWriter("");
    setPassword("");
    setContents("");
  };

  const onClickDeleteComment = async (
    event: MouseEvent<HTMLButtonElement>
  ): Promise<void> => {
    try {
      await deleteBoardComment({
        variables: {
          boardCommentId,
          password: modalPassword,
        },
      });
      refetch();
    } catch (error) {
      alert(error.message);
    }
    setIsOpen(false);
    setModalPassword("");
  };

  return (
    <BoardCommentsUI
      data={data}
      commentData={commentData}
      writer={writer}
      password={password}
      contents={contents}
      modalPassword={modalPassword}
      contentLength={contentLength}
      rating={rating}
      user={user}
      isOpen={isOpen}
      onChangeWriter={onChangeWriter}
      onChangePassword={onChangePassword}
      onChangeRating={onChangeRating}
      onChangeContents={onChangeContents}
      onChangeUser={onChangeUser}
      onChangeModalPassword={onChangeModalPassword}
      onClickSubmitComment={onClickSubmitComment}
      onClickDeleteComment={onClickDeleteComment}
      showModal={showModal}
      handelOk={handelOk}
      handelCancel={handelCancel}
    />
  );
}

BoardComment Presenter

import * as S from "./BoardComments.styles";
import { IBoardCommentsUIProps } from "./BoardComments.types";
import { Rate } from "antd";

export default function BoardCommentsUI(props: IBoardCommentsUIProps) {
  return (
    <S.Container>
      <S.PasswordCheck
        open={props.isOpen}
        onOk={props.onClickDeleteComment}
        onCancel={props.handelCancel}
      >
        비밀번호 입력:{" "}
        <input type="text" onChange={props.onChangeModalPassword} />
      </S.PasswordCheck>

      <S.CommentTitleWrapper>
        <S.CommentIcon src="/icon/rate_review.png" />
        댓글
      </S.CommentTitleWrapper>
      <S.CommentInputWrapper>
        <S.CommentInputWrapperHeader>
          <S.CommentWriter
            type="text"
            placeholder="작성자"
            onChange={props.onChangeWriter}
            value={props.writer}
          />
          <S.CommentPassword
            type="password"
            placeholder="비밀번호"
            onChange={props.onChangePassword}
            value={props.password}
          />
          <Rate onChange={props.onChangeRating} value={props.rating} />
        </S.CommentInputWrapperHeader>

        <S.CommentInputWrapperBody>
          <S.CommentInputWrapperBottom
            placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
            onChange={props.onChangeContents}
            maxLength={99}
            value={props.contents}
          />
          <S.CommentTextCount>{props.contentLength}/100</S.CommentTextCount>
          <S.CommentSubmitButton onClick={props.onClickSubmitComment}>
            등록하기
          </S.CommentSubmitButton>
        </S.CommentInputWrapperBody>
      </S.CommentInputWrapper>
      <S.CommentListWrapper>
        {props.commentData?.fetchBoardComments.map((el) => (
          <S.CommentListItemWrapper key={el._id}>
            <S.CommentListProfileWrapper>
              <S.CommentListProfileImage src="/icon/profile.png" />
            </S.CommentListProfileWrapper>
            <S.CommentListContentsWrapper>
              <S.CommentListContentsHeader>
                <S.CommentListWriter>{el.writer}</S.CommentListWriter>
                <Rate disabled defaultValue={el.rating} />
              </S.CommentListContentsHeader>
              <S.CommentListContents>{el.contents}</S.CommentListContents>
              <S.CommentListDate>2024-07-27</S.CommentListDate>
            </S.CommentListContentsWrapper>
            <S.CommentListItemButtonWrapper>
              <S.CommentListItemButton
                src="/icon/mode.png"
                //onClick={() => props.onClickDeleteComment(el._id)}
              />
              <S.CommentListItemButton
                src="/icon/clear.png"
                //onClick={() => props.onClickDeleteComment(el._id)}
                id={el._id}
                onClick={props.showModal}
              />
            </S.CommentListItemButtonWrapper>
          </S.CommentListItemWrapper>
        ))}
      </S.CommentListWrapper>
    </S.Container>
  );
}