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

useForm 이용해서 하고있는데 update_board를 할때 계속 try에서 catch(error)로 넘어가네요 ㅠ

presenter.js

import * as S from "./BoardWriter.styles";

export default function BoardWriteUI(props) {
  return (
    <S.Wrapper onSubmit={props.isEdit? 
                        props.handleSubmit(props.onClickUpdate, props.onInValid) : 
                        props.handleSubmit(props.onValid, props.onInValid)}>
      <S.Title>{props.isEdit? "게시글 수정": "게시글 등록"}</S.Title>
      <S.WriterWrapper>
        <S.InputWrapper>
          <S.Label>작성자</S.Label>
          <S.Writer {...props.register("writer", {
            validate : (value) => value ? true:"작성자를 작성해주세요."}
          )} 
          onChange={e => props.onChangeWriter(e)}
          type="text" placeholder="이름을 적어주세요."/>
          <S.Error>{props.errors.writer?.message}</S.Error>
        </S.InputWrapper>
        <S.InputWrapper>
          <S.Label>비밀번호</S.Label>
          <S.Password {...props.register("password", {
            validate : (value) => value? true: "비밀번호를 작성해주세요."}
          )}
          onChange={e => props.onChangePassword(e)}
          type="password" placeholder="비밀번호를 작성해주세요." />
          <S.Error>{props.errors.password?.message}</S.Error>
        </S.InputWrapper>
      </S.WriterWrapper>
      <S.InputWrapper>
        <S.Label>제목</S.Label>
        <S.Subject {...props.register("title", {
          validate : (value) => value? true: "제목을 작성해주세요."}
          )} 
          onChange = {e => props.onChangeTitle(e)}
          type="text" placeholder="제목을 작성해주세요." />
          <S.Error>{props.errors.title?.message}</S.Error>
      </S.InputWrapper>
      <S.InputWrapper>
        <S.Label>내용</S.Label>
        <S.Contents {...props.register("contents", {
          validate : (value) => value? true: "내용을 작성해주세요."}
          )} 
          onChange={e => props.onChangeContents(e)}
          placeholder="내용을 작성해주세요." />
          <S.Error>{props.errors.contents?.message}</S.Error>
      </S.InputWrapper>
      <S.InputWrapper>
        <S.Label>주소</S.Label>
        <S.ZipcodeWrapper>
          <S.Zipcode {...props.register("boardAddress")} placeholder="07250" />
          <S.SearchButton>우편번호 검색</S.SearchButton>
        </S.ZipcodeWrapper>
        <S.Address />
        <S.Address />
      </S.InputWrapper>
      <S.InputWrapper>
        <S.Label>유튜브</S.Label>
        <S.Youtube {...props.register("youtubeUrl")} placeholder="링크를 복사해주세요." />
      </S.InputWrapper>
      <S.ImageWrapper>
        <S.Label>사진첨부</S.Label>
        <S.UploadButton>+</S.UploadButton>
        <S.UploadButton>+</S.UploadButton>
        <S.UploadButton>+</S.UploadButton>
      </S.ImageWrapper>
      <S.OptionWrapper>
        <S.Label>메인설정</S.Label>
        <S.RadioButton type="radio" id="youtube" name="radio-button" />
        <S.RadioLabel htmlFor="youtube">유튜브</S.RadioLabel>
        <S.RadioButton type="radio" id="image" name="radio-button" />
        <S.RadioLabel htmlFor="image">사진</S.RadioLabel>
      </S.OptionWrapper>
      <S.ButtonWrapper>
        <S.SubmitButton 
          isActive={props.isActive} 
          type="submit">{props.isEdit? "수정하기": "등록하기"}</S.SubmitButton>
      </S.ButtonWrapper>
    </S.Wrapper>
  );
}

quires.js

import { gql } from '@apollo/client' 

export const CREATE_BOARD = gql`
  mutation createBoard($createBoardInput: CreateBoardInput!) {
    createBoard(createBoardInput : $createBoardInput){
      _id
    }
  }
`

export const UPDATE_BOARD = gql`
  mutation updateBoard($updateBoardInput: updateBoardInput!, $password: String, $boardId: ID!) {
    updateBoard(updateBoardInput: $updateBoardInput, password: $password, boardId: $boardId) {
      _id
    }
  }
`

container.js

import { useState } from 'react'
import { useForm } from 'react-hook-form';
import { useRouter } from 'next/router';
import { useMutation } from '@apollo/client' 
import BoardWriteUI from './BoardWriter.presenter';
import { CREATE_BOARD, UPDATE_BOARD } from './BoardWriter.queries';

export default function BoardsWriteContainer(props) {
  const router = useRouter()
  const [isActive, setIsActive] = useState(true)

  const [createBoard] = useMutation(CREATE_BOARD)
  const [updateBoard] = useMutation(UPDATE_BOARD)

  const { 
    register,
    watch,
    handleSubmit,
    formState: { errors }
   } = useForm();

  const onChangeWriter = (e) => {
   e.target.value && watch("password") && watch("title") && watch("contents") ? setIsActive(false) : setIsActive(true)
  }
  const onChangePassword = (e) => {
   e.target.value && watch("writer") && watch("title") && watch("contents") ? setIsActive(false) : setIsActive(true)
  }
  const onChangeTitle = (e) => {
   e.target.value && watch("password") && watch("writer") && watch("contents") ? setIsActive(false) : setIsActive(true)
  }
  const onChangeContents = (e) => {
   e.target.value && watch("password") && watch("title") && watch("writer") ? setIsActive(false) : setIsActive(true)
  }

  const onValid = async (data) => {
    try {
      const result = await createBoard({
        variables: {
          createBoardInput: {
            writer: data.writer,
            title: data.title,
            password: data.password,
            contents: data.contents,
          }
        }
      })
      console.log(result.data.createBoard._id)
      alert("게시물이 정상적으로 등록되었습니다.")
      router.push(`/boards/${result.data.createBoard._id}`)
    } catch(error) {
    alert(error.message)
    }
  }
  const onInValid = (error) => {
    console.log("에러입니다", error)
  }

  const onClickUpdate = async (data) => {
    try {
      const result = await updateBoard({
        variables: {
          updateBoardInput : {
            title: data.title,
            contents: data.contents
          },
          password : data.password,
          boardId : router.query.boardid,
        }
      })
      console.log(result)
      // router.push(`/boards/${router.query.boadid}`)
    } catch(error) {
      console.log(error)
    }
  }
  return <BoardWriteUI 
    onValid = {onValid}
    oninValid = {onInValid}
    register = {register}
    handleSubmit = {handleSubmit}
    errors = {errors}
    onChangeContents = {onChangeContents}
    onChangeTitle = {onChangeTitle}
    onChangePassword = {onChangePassword}
    onChangeWriter = {onChangeWriter}
    onClickUpdate = {onClickUpdate}
    isActive={isActive}
    isEdit={props.isEdit}
  />
}