[FE] feat: 새로운 리뷰 작성 정보 API를 반영하기 위한 리뷰 작성 페이지의 카드 상태 처리 변경

[BadaHertz52]

• resolves [FE] 새로운 리뷰 작성 정보 API를 반영하기 위해 리뷰 작성 페이지의 카드 상태 처리를 변경한다. #291

---

🚀 어떤 기능을 구현했나요 ?

• 새로운 리뷰 작성 폼에 맞는 API 형식이 나왔어요. 새로운 API 형식에 맞게 기존에 작성한 리뷰 작성 폼(카드형태)를 개선했어요.
• msw로 목서버에서 api로 데이터를 받고 주는 기능은 구현전이에요. api 관련 기능을 추가하면 하나의 pr에 기능이 너무 많아질 것 같았어요.

🔥 어떻게 해결했나요 ?

• ReviewWritingFormPage 삭제

ReviewWritingCardFormPage 설명

구조도

컴포넌트 설명

1. ReviewWritingCardFromPage

• 카드 형식의 리뷰 작성 페이지
• ErrorSuspenseContainer로 CardForm 감싸서, error fallback, suspanse fallback 적용되게 함

2. CardForm

• 받아오는 정보 api의 Form과 관련됨
• 캐러셀이 작동하는 곳

3. CardSliderController

• 캐러셀의 작동을 담당하는 이전, 다음 버튼과 제출,미리보기 버튼등이 있는 합성 컴포넌트

4. QnABox

• 받아오는 정보 api 의question과 관련됨
• 하나의 질문과 그에 대한 답변(객관식/서술형)과 가이드라인, 객관식 문항 선택 안내문을 담고 있음

5. ReviewWritingCard

• 받아오는 정보 api 의 section과 관련됨

훅 설명

1.useCurrentCardIndex

• 캐러셀의 이동과 관련된 currentCardIndex를 관리
  2.useMultipleChoice
• 객관식 문항들의 선택 변경, 선택된 문항들 상태관리, 유효성 검사등을 진행
  3. useQuestionList
• 캐러셀에서 보여줄 질문 리스트 관리
• 첫번째 카테고리 질문에서 선택된 문항에 따라 질문 리스트를 변경하는 기능 수행
  4. useReviewerAnswer
• 리뷰어가 쓴 답변들을 Map객체로 상태 관리
• 지금까지 작성한 모든 답변들의 유효성 여부를 판단 (필수 답변인지도 확인)
• 답변들을 판단해, 다음 단계로 진행할 지 여부를 결정
  5. useSliderWidthAndHeight
• 캐러셀의 이동 폭과 동적인 높이를 계산하기 위한 훅
  6. useTextAnswer
• 서술형 답변을 위한 훅

4. 답변 관련 유의 사항
⚠️ 객관식과 서술형의 경우, 해당 형식에 대한 훅에서 유효성 검사를 진행하고 답변이 유효한 경우에만 answerMap에 업데이트 됨, 유효하지 않으면 해당 답변의 값이 null 로 변경돼요.

객관식, 서술형 답변 시 answerMap의 상태를 업데이트하면, 다음 버튼 활성화 등을 위해서 또 한번 답변의 유효성을 검증해야하는 상황이 반복돼요. 그래서 리뷰어가 작성한 답변들을 화면에 표시하되, 관련 훅 내에서 답이 유효한 답인 경우에만 answerMap에 그 값이 들어가고 유효하지 않으면 null로 변경해서, 다음 버튼 활성화를 판단하는 곳(useReviewerAnswer)에서는 해당 답변이 존재하는 지 여부만으로 판단할 수 있어요.

📝 어떤 부분에 집중해서 리뷰해야 할까요?

• 해당 브랜치를 pull 받아서 동작상 버그가 없는 지 확인해주세요.

📚 참고 자료, 할 말

• 휴... .

[soosoo22]

리뷰 작성 페이지 상태 처리 힘들었을텐데 고생했어요!!!

[ImxYJL]

주말동안 넘 고생 많았어요~~
나도 훅 분리 해야 하는데... 🙃

[chysis]

정말 고생 많았어요👍