독서 노트 작성 화면 개발

[2scent]

5단계의 Multi Step Form으로 구성

• 1단계 - 도서 기본 정보, 독서 상태, 독서 기간
  • *독서 상태는 읽고 싶은 책 / 읽는 중 / 읽음 / 보류 중
• 2단계 - 도서 추천 여부, 별점
• 3단계 - 독후감
• 4단계 - 인용구
• 5단계 - 공개 여부

유효성 검증

• 독서 상태 & 독서 기간
  • 읽고 싶은 책은 독서 기간이 입력되면 안 된다.
  • 읽는 중이면 독서 시작일만 입력돼야 한다. / 독서 종료일은 입력되면 안 된다.
  • 읽음이면 독서 시작일/종료일이 입력돼야 한다.
  • 보류 중이면 독서 시작일만 입력돼야 한다. / 독서 종료일은 입력되면 안 된다.
• 독서 기간
  • 독서 시작일은 독서 종료일보다 이후면 안 된다.
  • 독서 시작일은 도서 출판일 이후여야 한다.
• 별점 & 독후감
  • 별점이 1점 또는 5점의 경우, 의견을 뒷받침 하기 위해 최소 100자 이상을 작성해야 한다.
• 인용구 페이지 번호는 도서 전체 페이지 수보다 작아야 한다.

고민

• 유효성 검증을 각 단계에서 할까? vs 마지막 단계에서 할까?
• 유효성 검증 메세지는 어떻게 보여줄까?
• 각 단계에 대한 상태를 쿼리 파라미터로 관리할까?

[2scent]

multi step form 문제를 심화시키기

• 새로고침해도 폼 상태를 유지시키기
• 옆에 실시간으로 볼 수 있는 앱 화면 만들기
  • 500ms 기다렸다가 앱 화면 상태 업데이트
  • window size event 수신하고 있다가 앱 화면을 컨디셔널 렌더링
• 유효성 검사가 실패했을때 실패한 필드 중 순서상 가장 첫번째 필드로 focus 처리 + 실패한 모든 필드 인풋의 아웃라인을 붉은색으로 처리 + 인풋 하단에 에러 메세지 표시
• 인용구를 여러개 등록하고 지울 수 있다
  • useFieldArray 활용
• 인용구가 두개 이상일때는 모든 인용구 필드 하단에 페이지 번호를 입력하는 인풋이 추가된다
  • 유효성 검사는 페이지 번호는 문자가 오면 안되고, 책 페이지 수보다 작아야하고, 위 조건을 충족해야한다
  • 인용구가 두개 이상일때는 모든 페이지 번호 인풋은 required 이고, 한개 이하일때는 optional 이다

코드를 작성하는 패턴과 관련된 것

1. CommaSeparatedInput 같은 컴포넌트를 설계하고 이것을 RHF 로 매핑해서 export 해서 재활용
   1. 역할 DX) 유저는 숫자만 입력할 수 있고, 숫자를 연달아 입력했을때 자동으로 1000단위로 콤마를 삽입해주고, 그런데 컴포넌트를 사용하는 곳에서는 value를 number로 받을 수 있다
   2. RHF로 래핑했기 때문에 여러 곳에서 register를 따로 하지 않고도 재활용 할 수 있다 -> RHFCommaSeparatedInput
2. 내부적으로 Suspense를 일으키는 목록 api 의 응답 값으로 AutoComplete.tsx의 Option 목록을 구성하는 컴포넌트 만들기 + RHF 화
   1. api 가 resolve 되지 않았을때는 로딩바를 보여주고, 에러가 났을때는 rejectedFallback 컴포넌트와 서버의 에러 메세지를 함께 표시, 정상 케이스에서 resolve 됐을때  AutoComplete 노출