[FE] refactor: 리뷰 작성 페이지 상태 및 폴더 구조 리팩토링, 테스트 추가 #550
Merged
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
- unCheckTargetOption -> unCheckTargetCategoryOption - unCheckTargetOptionId -> unCheckTargetCategoryOptionId)
- 객관식에서 선택된 문항에 대한 관리 책임은 useOptionSelection에 부여
- 선택 해제하려는 강점 카테고리에 대한 관리 책임을 useUnCheckCategoryOption에 부여
- 선택,해제의 경우에 따른 액션을 함수로 나눔 - 객관식에서 사용하는 훅 리팩토링에 따른 결과 적용 - updateOptionChoice 생성
- LongReviewItem -> TextAnswer - useLongReviewItem 삭제 , useTextAnswer에서 useLongReviewItem에서 담당하던 change, blur에 따른 오류 메세지 관리하는 역할 맡음 - TextAnswer, useTextAnswer 의 위치를 ReviewWirtingCardFormPage 로 이동
- 리팩토링 이유: 작성 폼의 상태들(currentCardIndex, cardSectionList등)과 밀접한 관계가 있지만, 작성 폼 상태 관리하는 훅들 속에 프로그래스바 상태 변경 함수들이 같이 있어서 관리에 좋지 않다고 판단 - 리팩토링 방향: 프로그래스바 상태들은 프로그래스바안에서 관리하자 - 방법: visitedCardListAtom 삭제, useStepList 훅 생성
- 훅 네임 변경 : useCheckNextStepAvailability -> useMocinfStepAvailability - 관련 훅(useMocinfStepAvailability, useSlideWidthAndHeight)들 CardSlider hooks 폴더로 이동 및 캐러셀 공통 컴포넌트 사용 - ReviewWritingCard에 있는 CardSliderController를 CardSlider로 이동
- 작성 페이지의 기능 폴더를 두고 그 하위에 컴포넌트, 훅 폴더를 두는 방식으로 변경함 - 변경 이유: 페이지 안에 많은 기능이 있기 때문에, 기능별로 묶는것이 유지 보수에 좋을 거라고 판단
- CardForm에서 useLoadAndPrepareReview 훅 분리
- useSubmitAnswer-> useSubmitAnswers, submitAnswer-> submitAnswers
…State 훅 삭제 - 객관식,서술형, 강점 선택에 따른 질문지 테스트를 분리함에 따라 CardSlider 테스트에서 해당 테스트 코드 삭제
…eview-me into fe/refactor/539-writing_form_state
chysis
approved these changes
Sep 4, 2024
soosoo22
approved these changes
Sep 4, 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.
🚀 어떤 기능을 구현했나요 ?
🔥 어떻게 해결했나요 ?
피그잼
상태 흐름 파악을 위해서 순서도를 정리했어요.
리팩토링을 하면서 변경, 추가된 것들이 많아서 같이 피그잼에 정리했어요.
🎨pr내용 정리된 피그잼 보러가기
리팩토링
이유와 기준
리뷰 작성 페이지는 다양한 기능과 이를 구현하는 상태,훅들이 복잡하게 얽힌 페이지에요.
유저 테스트에서 예기치못한 사용자 플로우가 발견되어서 추가 기능을 넣은 점을 보았을때 지속적인 유지보수와 확장이 필요한 페이지라고 생각해요.
즉, 리뷰 작성 페이지는 여러 상태가 복잡하게 얽혀있지만 추가 기능,유지 보수가 지속적으로 있을 수 있는 페이지에요.
그래서 가독성,유지보수에 최대한 초점을 맞추어서 리팩토링 작업을 실행했어요.
방법
단일 책임의 원칙
이를 위해서 가장 신경 쓴 것은 '단일 책임의 원칙'이에요.
모든 상태(질문지,프로그레스바, 답변과 답변 유효성, 케러셀 버튼등)을 완전히 독립적으로 분리할 수는 없지만, 최대한 책임을 분리해 하나의 기능만을 책임지도록 했어요. 이를 통해서 하나의 기능에 대한 플로우가 잘 보이게끔 노력했어요.
✅프로그레스 바 상태 리팩토링
프로그레스 바의 경우, 리뷰 작성 시 답변 업데이트하는 훅과 카드 index를 변경하는 훅들 속에서 프로그레스 바 상태를 변경하고 있었어요. useStepList라는 훅을 두어서, 프로그레스 바를 변하게 하는 요소들 의 변경에 맞추어 프로그레스 바의 상태를 업데이트하도록 수정했어요.
기능에 따른 폴더 구조 변경
리뷰 작성 페이지는 많은 컴포넌트들과 훅을 사용하고 있어요.
기존의 컨벤션인 components, hooks 폴더를 리뷰 작성 페이지의 하위에 두는 것으로는 가독성(=기능의 플로우 파악)과 유지 보수 측면에서 한계가 있다고 생각했어요.
그래서 관련 기능끼리 묶었어요.
고민: 특정 컴포넌트에 종속되는 훅들을 해당 컴포넌트 아래에 두어야하는가?
이를 고민해봤는데, 고려해야하는 경우의 수가 다양하며 나누기 애매한 상황들이 있을 수 있다고 판단했습니다. 유지보수와 가독성을 위한 리팩토링인 만큼 팀원간에 혼란을 줄 수 있는 폴더 기준은 배제하기로 했어요.
고민: api 도 페이지 폴더 하위에 두어야하는가?
해당 페이지에서만 사용하는 api도 해당 페이지 밑에 두어야하는가 고민했어요. api 요청 성공, 실패 대응 방식을 일정하게 유지해야한다고 생각했어요. 여러명이 동시에 개발하는 상황이기에, api 핸들러끼리 있는 것이 api 요청이 일관된 방식으로 핸들링 되고 있는지 확인하기 쉽다 느꼈어요. 이에 대한 다른 프론트 크루의 의견이 궁금하네요? ㅎㅎ
테스트 추가
아래의 테스트가 추가되었어요.
강점 선택 여부에 따라 질문지 (cardSectionList) 변경 테스트
객관식 질문
주관식 질문
현재 카드의 답변 상태에 따른 캐러셀의 다음 버튼 활성화 여부
현재 카드의 index에 따른 캐러셀에서 보여지는 버튼
질문지, 답변 유효성, 카드 오픈 여부에 따른 프로그레스 바 변경 테스트
📝 어떤 부분에 집중해서 리뷰해야 할까요?
📚 참고 자료, 할 말