게시물 댓글 등록 기능 구현(createBoardComment)

게시물 댓글 등록하기 UI와 기능 구현 완료.

Container 코드(주석 참고)

import BoardCommentWriteUIPage from "./BoardCommentWrite.presenter";
import { CREATE_BOARD_COMMENT } from "./BoardCommentWrite.queries";
import { useState, ChangeEvent } from "react";
import { useRouter } from "next/router";
import { useMutation } from "@apollo/client";
import {
  IMutation,
  IMutationCreateBoardCommentArgs,
} from "../../../../commons/types/generated/types";
export default function BoardCommentWriteContainerPage() {
  const router = useRouter();
  const [writer, setWriter] = useState("");
  const [password, setPassword] = useState("");
  const [contents, setContents] = useState("");
  
  //graphql API 호출 함수 생성해준다.
  //해당 API가 어떤 값을 반환하고, 어떤 인자를 필요로 하는지 알려줘야한다.
  //type데이터에서, IMutation 타입의 createBoardComment 속성이 반환값임을 명시
  //IMutationCreateBoardArgs라는 인자를 필요로 하다는 것을 명시.
  const [createBoardComment] = useMutation<
    Pick<IMutation, "createBoardComment">,
    IMutationCreateBoardCommentArgs
  >(CREATE_BOARD_COMMENT);
  
  //Writer input이 변경되었을 때 발생하는 event의 타입 명시(react에서 제공하는 ChangeEvent 활용)
  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);
  };
  
  //댓글 등록 클릭시 발생!
  const onClickButton = async () => {
    try {
       
     //타입스크립트한테 string 타입이 아닌 boardId는 전달해주지 않을게 약속하는 것.
      if (typeof router.query.boardId !== "string") {
        alert("시스템에 문제가 있습니다.");
        return;
      }
      //API 호출 함수의 매개변수에 인자를 할당해준다.
      await createBoardComment({
        variables: {
          createBoardCommentInput: {
            //writer = writer와 같은 표현이다.
            writer,
            password,
            contents,
            rating: 0,
          },
      //상세페이지에서 댓글을 작성하기 때문에 주소창에서 boardId를 가져올 수 있다.
          boardId: router.query.boardId,
        },
      });
    } catch (error) {
      if (error instanceof Error) alert(error.message);
    }
  };
  return (
    <BoardCommentWriteUIPage
      contents={contents}
      onChangeWriter={onChangeWriter}
      onChangePassword={onChangePassword}
      onChangeContents={onChangeContents}
      onClickButton={onClickButton}
    />
  );
}

Presenter 코드 주석(참고)

import * as S from "./BoardCommentWrite.styles"
import { IBoardCommentWriteUIProps } from "./BoardCommentWrite.types";
//부모 컨테이너에서 받아올 props객체의 타입도 꼭 명시해줘야합니다.
//IBoardCommentWriteUIProps 인터페이스는 해당 props에서 받아와 사용할 모든 요소의 타입이 명시되어 있다.
export default function BoardCommentWrtieUIPage(props:IBoardCommentWriteUIProps) {
    return(
        <S.Wrapper>
            <>
                <S.Icon src="/images/boardComment/write/icon.png"/>
                <span>댓글</span>
            </>
            <S.InputWrapper>
                <S.Input placeholder="작성자" onChange={props.onChangeWriter}/>
                <S.Input placeholder="비밀번호" type="password" onChange={props.onChangePassword}/>
            </S.InputWrapper>
            <S.ContentsWrapper>
                <S.Contents maxLength={100} placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다. " onChange={props.onChangeContents}></S.Contents>
                <S.BottomWrapper>
                    <S.ContentsLength>0/100</S.ContentsLength>
                    <S.Button onClick={props.onClickButton}>등록하기</S.Button>
                </S.BottomWrapper>  
            </S.ContentsWrapper>
        </S.Wrapper>
    );  
}

types.ts

import { ChangeEvent } from "react";
export interface IBoardCommentWriteUIProps {
  onChangeWriter: (event: ChangeEvent<HTMLInputElement>) => void;
  onChangePassword: (event: ChangeEvent<HTMLInputElement>) => void;
  onChangeContents: (event: ChangeEvent<HTMLTextAreaElement>) => void;
  onClickButton: () => void;
  contents: string;
}