모각코 생성, 수정페이지 리팩토링 (main)

[Ryan-TheLion]

관련 이슈

close: #346

개요

모각코 수정, 생성 페이지 디자인 개선 및 리팩토링

상세 내용

• 폼 관리 로직 개선

  • 리액트 훅 폼 FormContext, Controller, FieldArray, rules 를 통해 관심사를 분리하여 코드 라인을 줄이고 가독성 및 유지보수성을 향상시키고자 함
  • 기존 전역 상태로 관리하던 폼 데이터 상태를 리액트 훅 폼에 위임하는 것을 통해, 불필요해진 리코일 atom 삭제(상태 업데이트 개선)
  • 리액트 훅 폼을 통해 폼 유효성 에러가 관리될 수 있도록 하였으며, 이로 인해 onInvalid 시 로직이 간소화 됨
  • field의 ref를 설정하여, 에러시 리액트 훅 폼이 해당 요소로 포커스되어 이동될 수 있도록 개선(요소를 직접 찾아서 조작하지 않아도 됨)

• 장소 검색

  • 자동 완성 구현
  • 자동 완성과 관련된 라이브러리 추가, 하이라이트 되야 되는 word를 추출하는 로직은 본인이 구현함

• 리다이렉트 fix

  • param 의 token을 파싱해서 처리하는 로직이 변경된 것에 맞춰서, 리다이렉트 주소 형식을 수정하여 정상적으로 리다이렉트 될 수 있도록 함

• Calendar

  • Base Calendar 에 tileDisabled prop 추가
  • 모각코 수정 시, 이전에 설정한 모임 시간이지만, 오늘 이전이라 설정할 수 없는 경우(disabled)에 대한 타일 css 적용

• TextCounter 의 text prop 기본값을 빈 문자열("")로 설정

• 타입

  • 함수 override 등을 통해 타입의 안전성을 확보하려고 함
    • (예. editMode가 update인 경우 coding_meeting_token을 입력하지 않으면 관련 타입에러 발생 등)

• 이 외에 작업하면서 발견한 부분에 대한 수정 작업을 진행 함