Feat: PortfolioEditPage.tsx 유효성 검증을 구현한다

개요

PortfolioEditPage.tsx 페이지의 유효성 검증을 구현합니다.

react-hook-form의 validate 및 errors를 사용해 클라이언트 환경에서의 유효성 검증을 수행합니다.

Toast.tsx 컴포넌트 생성한다.
- type('error' | 'success'), id, message를 인자로 받는다.
- id는 최대한 겹치지 않도록 Date.now()를 사용한다.
- 동시에 발생하는 에러일 경우 Date.now() + 별도 구분자를 추가한다.
ToastContainer.tsx 컴포넌트 생성
- App.tsx에서 전역적으로 사용한다.
- toast가 발생할 경우 알람 목록을 화면에 그린다.
toastSlice.ts를 생성한다.
- toast 알람 목록을 전역적으로 관리한다.
- toastSlice의 toasts state를 ToastContainer에서 그린다.
usePortfolioForm.ts 훅을 생성한다.
- PortfolioEditPage.tsx에서 사용되는 useForm 관련 코드(onSubmit, 유효성 검증 알람) 등을 별도 분리한다.
- DefaultFormData 초기화, isSubmitting 마다 유효성 검증 toast 알람 등을 관리한다.
PortfolioEditPage.constants.ts 파일을 생성한다.
- react-hook-form의 register에 등록할 validate 객체를 별도로 관리한다.

Toast 알람 사용 방법
- 알람을 띄우고 싶은 컴포넌트 파일에서 dispatch(setToast({id, type, message})) 를 통해 전역 toasts 상태를 업데이트 합니다.