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

import BoardCommentWriteUI from "./boardCommentWrite.presenter";
import { ChangeEvent, useState } from "react";
import { useMutation } from "@apollo/client";
import {
  CREATE_BOARD_COMMENT,
  UPDATE_BOARD_COMMENT,
} from "./boardCommentWrite.queries";
import { useRouter } from "next/router";
import { FETCH_BOARD_COMMENTS } from "../list/boardCommentList.queries";

import {
  IMutation,
  IMutationCreateBoardCommentArgs,
  IMutationUpdateBoardCommentArgs,
} from "../../../../commons/types/generated/types";
import { IBoardCommentWriteProps } from "./boardCommentWrite.types";

export default function BoardComment(props: IBoardCommentWriteProps) {
  const [createBoardComment] = useMutation<
    Pick<IMutation, "createBoardComment">,
    IMutationCreateBoardCommentArgs
  >(CREATE_BOARD_COMMENT);

  const [updateBoardComment] = useMutation<
    Pick<IMutation, "updateBoardComment">,
    IMutationUpdateBoardCommentArgs
  >(UPDATE_BOARD_COMMENT);

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

  const router = useRouter();

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

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

  const handleChangeComment = (event: ChangeEvent<HTMLTextAreaElement>) => {
    setComment(event.target.value);
  };

  const updateComment = () => {
    alert("수정하기 입니다.");
  };

  const onClickSubmitComment = async () => {
    try {
      if (typeof router.query.boardId !== "string") {
        alert("시스템에 문제가 있습니다.");
        return;
      }

      const result = await createBoardComment({
        variables: {
          createBoardCommentInput: {
            writer,
            password,
            contents: comment,
            rating: star,
          },
          boardId: router.query.boardId,
        },
        refetchQueries: [
          {
            query: FETCH_BOARD_COMMENTS,
            variables: { boardId: router.query.boardId },
          },
        ],
      });
    } catch (error) {
      if (error instanceof Error) {
        alert(error.message);
      }
    }
    setWriter("");
    setComment("");
    setPassword("");
    setStar(0);
  };

  return (
    <BoardCommentWriteUI
      handleChangeWriter={handleChangeWriter}
      handleChangePassword={handleChangePassword}
      handleChangeComment={handleChangeComment}
      onClickSubmitComment={onClickSubmitComment}
      updateComment={updateComment}
      setStar={setStar}
      writer={writer}
      comment={comment}
      password={password}
      el={props.el}
    />
  );
}

boardCommentWriter.container.tsx 에서 updateComment 바인딩이 안된것인지

함수가 작동을 안하는 것인지

updateComment의 "수정하기 입니다. " 알림창이 안뜹니다.

수정/삭제 버튼 onClick 내부에서 해봐도 태그 바깥에서 삼항연산자를 써보아도 적용이.. 안됩니다. onClickSubmitComment 함수는 제대로 작동하는데 말이죠 ㅠㅠ 도저히 왜 안되는지 모르겠어요

import * as S from "../../board/commons/style/style";
import * as Own from "./boardCommentWrite.styles";
import { IBoardCommentWriteProps } from "./boardCommentWrite.types";

export default function BoardCommentWriteUI(props: IBoardCommentWriteProps) {
  console.log(props.el);
  return (
    <S.BoardWrapper>
      <S.Row>
        <Own.Writer
          placeholder="작성자"
          onChange={props.handleChangeWriter}
          value={props.editComment ? props.el?.writer : props.writer}
          readOnly={props.editComment}
        />
        <Own.Password
          placeholder="비밀번호"
          onChange={props.handleChangePassword}
          value={props.password}
        />
        <Own.RankWrapper>
          <Own.RateComment
            value={props.editComment && props.el.rating}
            onChange={props.setStar}
          />
        </Own.RankWrapper>
      </S.Row>
      <Own.Comment
        onChange={props.handleChangeComment}
        placeholder="댓글을 입력해주세요."
        value={props.editComment ? props.el.contents : props.comment}
      />
      <Own.BottomComments>
        <S.Row>
          <p>0</p>
          <div>/</div>
          <p>100</p>
        </S.Row>
        {/* <Own.SubmitButton
          onClick={
            props.editComment ? props.updateComment : props.onClickSubmitComment
          }
        >
          {props.editComment ? "수정하기" : "등록하기"}
        </Own.SubmitButton> */}

        {props.editComment ? (
          <Own.SubmitButton onClick={props.updateComment}>
            수정하기
          </Own.SubmitButton>
        ) : (
          <Own.SubmitButton onClick={props.onClickSubmitComment}>
            등록하기
          </Own.SubmitButton>
        )}
      </Own.BottomComments>
    </S.BoardWrapper>
  );
}