Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] refactor: 리뷰 작성 페이지에 form 태그 도입 및 submit 버튼 변경 #374

Merged
merged 43 commits into from
Aug 16, 2024

Conversation

BadaHertz52
Copy link
Contributor


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

  • 리뷰 작성 페이지에 form 태그 도입 및 submit 버튼 변경했어요.
  • ConfirmModal에서 버튼관련 props를 변경했어요.

🔥 어떻게 해결했나요 ?

  • 리뷰 작성 페이지에 form 태그 도입
  • submit 타입 버튼을 변경
  • 기존의 리뷰 작성 페이지의 제출버튼은 confirmModalOpen 버튼으로 변경
  • 제출 확인 모달에서 확인 버튼의 type을 submit으로 변경

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

  • ConfrimModal의 props 변경 부분을 모두 확인해주세요.

📚 참고 자료, 할 말

  • form 태그, submit 버튼 적용을 확인하기 위해서 fe/refactor/368-review_writing_state을 pull받아왔어요. 그래서 변경 사항이 많아보여요. 해당 브랜치가 머지되면 괜찮아 질지도?
  • 히이이잉

- 오류 : handleChange로 props명이 변경되면서 구조분해할당으로 input에 onChange 이벤트가 들어가지 않게 됨
- 오류 수정; onChange에 handleChange를 직접 넣어주는 방식으로 수정
- mutate 성공 시, 실행할 executeAfterMutateSuccess를 useMutateReview의 props로 추가
- 리뷰 제출 성공 시, 모달 닫고 페이지 이동하는 코드를 onSuccess 에서 실행하도록 수정
- mutate 성공 시, 실행할 executeAfterMutateSuccess를 useMutateReview의 props로 추가
- 리뷰 제출 성공 시, 모달 닫고 페이지 이동하는 코드를 onSuccess 에서 실행하도록 수정
- isDisabled -> disabled
- 컴포넌트간 props drilling을 줄이기 위해 recoil 상태관리를 사용
- 카테고리 선택 결과에 따라 리뷰 작성 질문지(questionList)가 동적으로 변할 수 있도록 atom, selector를 사용
<hook>
- 분리되어 생성된 훅 :useUpdateReviewerAnswer, useUpdateDefaultAnswers, useCheckStepAvailability

<components>
- QnABox: props 변경 및 useUpdateReviewerAnswer 사용
-  RevieWritingCard : props 변경 및 useCheckNextStepAvailability 사용
- questionList -> cardSectionList
- useAboveSelectionLimit , useUpdateMultipleChoiceAnswer로 분리
-  useCancelAnsweredCategory 추가
- 카테고리 질문에서 이미 답변을 작성한 카테고리 선택을 해제하는 지 판단
- 해제하려는 경우, answerMap, answerValidationMap의 상태 변경을 하지 않고 모달을 띄워줌
- 모달에서 확인 버튼 클릭하면, 해제되고 취소되면 기존의 선택이 유지
- 리뷰 작성 페이지의 다른 모달들과 같은 컴포넌트에 위치하면 좋겠으나,
확인 버튼 클릭 시 사용자가 해제하려했던 카테고리 선택이 해제되어야해서 컴포넌트 구조상 QnABox에 관련 모달이 있어야한다고 판단함
개수 제한 가이드 라인 표시 이전에 최대 개수를 넘는 선택 시, 체크박스 선택되는 오류 수정
- 답변의 기본값이 빈문자열 이나 빈 배열이여서 답변을 하지 않았음에도 모달이 띄워지는 오류가 있었음
- 모든 답변이 제출 가능한 상태여야 리뷰 작성 확인 버튼도 비활성화 됨
- 버튼의 text를 작성 내용 확인 버튼으로 수정
- 오류 : handleChange로 props명이 변경되면서 구조분해할당으로 input에 onChange 이벤트가 들어가지 않게 됨
- 오류 수정; onChange에 handleChange를 직접 넣어주는 방식으로 수정
- 오류 : handleChange로 props명이 변경되면서 구조분해할당으로 input에 onChange 이벤트가 들어가지 않게 됨
- 오류 수정; onChange에 handleChange를 직접 넣어주는 방식으로 수정
Copy link
Contributor

@ImxYJL ImxYJL left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good good good!

Copy link
Contributor

@chysis chysis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이전에 모달 만들 때 confirmModal에서는 styleType이 누락되었던 것 같네요. 코드 확인했습니다🔥

Copy link
Contributor

@soosoo22 soosoo22 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

바다! 수고했어요!!

@BadaHertz52 BadaHertz52 merged commit 69ba5a8 into develop Aug 16, 2024
4 checks passed
@BadaHertz52 BadaHertz52 deleted the fe/reactor/373-review_writing_semantic branch August 28, 2024 09:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

[FE] 리뷰 작성 페이지에 form 태그 도입 및 submit 버튼을 변경한다.
4 participants