[FE] 마이페이지 상세 페이지 (내 정보 수정, 내 거래 모아보기, 자산/카테고리 관리)

[MeganMagic]

작업 내용

• 내 정보 수정 페이지
  • FilterSelect와 BottomSheet, PopOver컴포넌트 작성
  • 추후에 @toss/use-overlay, framer 라이브러리 설치 후, 좀 더 읽기 편하게 리팩토링 할 계획입니다.
  • 페이지 view(index.tsx)와 controller(controller.ts) 분리
  • 페이지의 로직이 길어짐에 따라 페이지의 내용을 코드에서 한눈에 확인하기 어려워져, 로직부분과 화면 부분을 분리하여 작성했습니다.
• 내 거래 모아보기 페이지
  • react-hook-form의 Form Context를 활용
  • 따로 submit은 없지만 값변경에 따른 상태관리에 유용하여 react-hook-form을 이용했습니다!
  • 페이지 view(index.tsx)와 controller(controller.ts) 분리
• 자산/카테고리 관리 페이지
  • Alert 컴포넌트 작성
  • 삭제시 확인하는 절차를 아직 추가하지 않았습니다. 추후에 api 나온 후 작업하겠습니다
  • useMessage 수정
  • outlet context로 2 depth 이상 내려보낼 수 없어서, context api로 내려보내주도록 수정했습니다.

[MeganMagic]

해림님, 리뷰 감사합니다!

• 말씀하신대로 현재 자산 생성만 정삭적으로 동작하고, 자산 수정/삭제와 지출/수입 카테고리 생성/수정/삭제는 서버에 연결되어 있지 않습니다. 프론트 환경작업 변경 후에 서버 변경사항 반영하여 수정해두도록 하겠습니다.
• 프로필 수정의 경우 현재 이미지가 필수값으로 지정되어 있어 에러가 발생한 듯 합니다. 이 부분도 서버에서 작업이 완료되었다고 하니 변경사항 반영하여 수정해두도록 하겠습니다.
• 프로필 수정시 취소버튼에 navigate(-1) 적용해두었습니다!