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

댓글 기능 창에서 input에 작성자 비밀번호 내용을 입력하고 등록하기 버튼을 클릭하면 댓글이 잘 생성이 되지만 input창이 비어지지 않습니다.

container와 presenter 코드입니다.

import CommentWriteUI from "./BoardComment.presenter";
import { FETCH_COMMENTS } from "../list/BoardCommentList.queries";
import { useRouter } from "next/router";
import { useState } from "react";
import type { ChangeEvent } from "react";
import type { IUpdateBoardCommentInput } from "../../../../../commons/types/generated/types";
import type { ICommentWriteProps } from "./BoardComment.types";
import {
  useMutationCreateComment,
  useMutationUpdateComment,
} from "../../../../commons/hooks/mutations/useMutationBoardComment";

export default function CommentWrite(props: ICommentWriteProps): JSX.Element {
  const [createBoardComment] = useMutationCreateComment();
  const [updateBoardComment] = useMutationUpdateComment();

  const [writer, setWriter] = useState("");
  const [password, setPassword] = useState("");
  const [contents, setContents] = useState("");
  const [star, setStar] = useState(0);

  const router = useRouter();

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

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

  function onChangeContents(event: ChangeEvent<HTMLTextAreaElement>): void {
    setContents(event.target.value);
  }

  const resetFields = () => {
    setWriter("");
    setPassword("");
    setContents("");
  };

  const onClickSubmit = async (): Promise<void> => {
    const result = await createBoardComment({
      variables: {
        createBoardCommentInput: {
          writer,
          password,
          contents,
          rating: star,
        },
        boardId: String(router.query.number),
      },
      refetchQueries: [
        {
          query: FETCH_COMMENTS,
          variables: { boardId: router.query.number },
        },
      ],
    });
    console.log(writer);
    resetFields();
  };

  const onClickEdit = async (): Promise<void> => {
    const updateBoardCommentInput: IUpdateBoardCommentInput = {};
    if (contents !== "") updateBoardCommentInput.contents = contents;
    if (star !== 0) updateBoardCommentInput.rating = star;

    if (typeof props.el?._id !== "string") {
      alert("시스템에 문제가 있습니다.");
      return;
    }
    try {
      const result = await updateBoardComment({
        variables: {
          updateBoardCommentInput,
          password,
          boardCommentId: props.el?._id,
        },
        refetchQueries: [
          {
            query: FETCH_COMMENTS,
            variables: { boardId: router.query.number },
          },
        ],
      });
      console.log(result);
      props.setIsEdit(false);
    } catch (error) {
      if (error instanceof Error) alert(error.message);
    }
  };

  return (
    <CommentWriteUI
      onClickSubmit={onClickSubmit}
      onChangeWriter={onChangeWriter}
      onChangePassword={onChangePassword}
      onChangeContents={onChangeContents}
      setStar={setStar}
      isEdit={props.isEdit}
      onClickEdit={onClickEdit}
      writer={writer}
      el={props.el}
      data={props.data}
    />
  );
}

import * as S from "./BoardComment.styles";
import type { ICommentWriteUIProps } from "./BoardComment.types";

export default function CommentWriteUI(
  props: ICommentWriteUIProps,
): JSX.Element {
  return (
    <>
      <S.Wrapper>
        <S.TitleBox>
          <span>댓글</span>
        </S.TitleBox>
        <S.BodyWrapper>
          <S.InfoWrapper>
            <S.Writer
              placeholder="작성자"
              readOnly={Boolean(props.el?.writer)}
              onChange={props.onChangeWriter}
              defaultValue={props.isEdit ? props.el?.writer : ""}
            />
            <S.Password
              placeholder="비밀번호"
              onChange={props.onChangePassword}
              type="password"
            />
            <S.Star
              onChange={props.setStar}
              defaultValue={props.isEdit ? props.el?.rating : 0}
            />
          </S.InfoWrapper>
          <S.ContentWrapper>
            <S.Content
              placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
              onChange={props.onChangeContents}
              defaultValue={props.isEdit ? props.el?.contents : ""}
            ></S.Content>
            <S.SubmitWrapper>
              <span>0/100</span>
              <S.SubBtn
                onClick={props.isEdit ? props.onClickEdit : props.onClickSubmit}
              >
                등록하기
              </S.SubBtn>
            </S.SubmitWrapper>
          </S.ContentWrapper>
        </S.BodyWrapper>
      </S.Wrapper>
    </>
  );
}

하지만 저 화면에서 등록하기를 누를 시 빈 값이 입력됩니다. 또한 console.log(writer)를 해보면 공란이 나옵니다. 즉, 데이터는 없는데 화면이 리렌더되지 않습니다.

해결 부탁드립니다!