[FE] refactor,fix : 리뷰 작성 페이지 디자인 버그 수정 및 상태 관리 리팩토링 #369
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 오류 : 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를 직접 넣어주는 방식으로 수정
…eview-me into fe/refactor/368-review_writing_state
2 tasks
ImxYJL
approved these changes
Aug 16, 2024
soosoo22
approved these changes
Aug 16, 2024
chysis
approved these changes
Aug 16, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚀 어떤 기능을 구현했나요 ?
🔥 어떻게 해결했나요 ?
디자인 버그 수정
상태 리팩토링
왜 recoil을 사용했나요?
props로 전달하는 단계는 3~4단계 이지만, 카드 폼 자체의 상태 관리가 원대로 간단하지 않았는데, 사용자의 다양한 엣지 케이스를 반영하다보니 더 복잡해졌어요.
hook으로 상태 관리의 역할을 분리하고 있지만, 카드 목록(=리뷰어가 작성하는 카드 목록)과 답변,답변들의 유효성 여부를 여러 hook에서 사용하다보니 여기에서도 props drilling과 hook간의 관계가 복잡하다고 느꼈어요.
만약 질문의 형태가 다양해 진다면 더 복잡해지겠죠?
비록 리뷰 작성 페이지라는 하나의 페이지에서 사용하지만, 전역상태를 사용해서 어디에서나 필요한 카드 목록, 답변, 답변의 유효성을 가져오고 업데이트 할 수 있다면 보다 관리하지 좋을거라 생각했어요.
그래서 한번 recoil로 관리하는 것을 도전했고, 여전히 복잡하지만 props drilling에서는 자유로워졌고 hook을 작은 역할로 독립되게 분리할 수 있었어요.
📝 어떤 부분에 집중해서 리뷰해야 할까요?
📚 참고 자료, 할 말
정신 차리고 보니 하나의 브랜치에서 하고 있었어요. cherry-pick으로 분리하는 것을 시도했지만 필요한 커밋 로그가 연속적이지 않고 커밋 수가 많아서 계속 오류가 났어요. 그래서 일단 하나의 브랜치/pr로 보내요 😥 ....
혹시 변경 사항이 많아서 리뷰가 힘드시다면, 언제든지 물어보세요!!