[MOV 프로젝트] 4월 29일 react-hook-form의 setValue 및 Next.js에서 shaderMaterial 적용하기 showrooms page

react-hook-form의 setValue

contact page에서 type이 file인 input의 value가 FileList인 것을 S3 버켓의 등록된 주소로 변경하기 위해 react-hook-form useForm hook의 setValue 함수를 사용함으로 변경된 것을 콘솔에서는 확인완료하였으나

submit 이후 api에서 req와 database에서는 확인이 불가한 상황, 디버깅 필요

해결방안

const onValid = async (validForm) => {
    await setValue('url', imageUrl) // 이 함수가 실행된 이후 console.log(watch())의 결과는 의도한 바대로 보여짐
    console.log(validForm) // 하지만 여기서는 원래 그대로의 fileList가 url에 들어가 있었음
    await contact(validForm) // contact는 fetch함수
    await alert('전송완료!')
    await reset()
  }​

setValue로 값을 변경하였지만 validForm을 다시 fetch로 보내었기 때문에 이전 값을 전송하였던 것. 그러면 어떻게 변경된 값을 가져올 수 있을까? useForm hook의 getValues 함수를 사용하면 된다! 아래는 이후 코드이다. 

정답은 항상 공식문서에서...

  const { register, reset, handleSubmit, watch, setValue, getValues } =
    useForm()

const onValid = async (validForm) => {
    setValue('url', imageUrl)
    const newValues = getValues()
    contact(newValues)
    alert('전송완료!')
    reset()
    setImageUrl('')
  }

Next.js에서 shaderMaterial을 사용하기위해 어떻게 해야하는지 조사 필요

이전에 react에서 구현해본 경험을 바탕으로 재적용 필요

이전에 시도해본 링크 

DanielPark_dev on Twitter

showrooms page 구축

admin의 경우 새로운 showroom을 작성할 수 있어야함

showroom에는 제목 내용 링크 사용자들의 댓글을 볼 수 있어야하고(작성도 가능해야 한다.)

admin이 showroom을 작성 완료한 이후에는 관련자료가 db에 저장되고

showrooms에는 카드 형태로 상세페이지로 넘어갈 수 있어야함

showrooms/:id 에서는 작성한 내용 등을 확인할 수 있어야함

 

or glb파일로 object 삽입 후 클릭하면 scene으로 라우팅되게 설정할수 있어야함(+camera animation)