[Sprint 1] 거래 내역을 추가 및 수정하는 모달에 대한 UI 구현 #5

[jhLim97]

PC 버전

모바일 버전(iPhone SE)

구현한 내용

• 모달 상태관리를 위한 recoil atom을 구현했습니다.
• 거래내역을 추가 및 수정할 수 있는 모달 UI를 구현했습니다.
• PC, 모바일 버전에 맞춰서 반응형 웹을 구현했습니다.
• 카테고리, 결제수단 Drop down은 미구현 상태입니다.

어려웠던 점 및 해결한 방향

1. 테스트코드 작성하기

• 많은 글들을 찾아보고 저의 생각을 합쳐보면서 프론트엔드에서의 testing-library를 사용해 테스트 하고자 하는 기준을 생각해 보았습니다.
• 계속 공부를 해봐야 겠지만, 가장 기본적인 컴포넌트의 요소들이 렌더링이 됐는지 부터 이벤트 같은 동적인 요소들에 대해서는 단위테스트 또는 통합테스트를 계속 진행할 예정입니다.
• Recoil, util 함수들에 대해서는 명확하게 단위테스트를 작성할 수 있기 때문에 해당부분에 대해서는 jest만으로 단위테스트를 계속해서 작성할 계획입니다.

추가상식

1. form의 경우 getByRole 하기위해서 aria-label 붙여줄 필요가 있습니다.

• button과 같은 요소들과 달리 form 태그의 경우 식별을 위한 name을 부여하지 않는 경우 getByRole 쿼리를 통해서 요소를 찾을 수 없습니다.
• 이 경우에는 form 태그에 권장되는 사항인 aria-label과 같은 식별자를 부여하면 조회가 가능합니다.
  
  (getByRole('form') should work without "name" attribute testing-library/dom-testing-library#937)

체크리스트

• 프론트엔드 Test Code 작성하기
• console.log 지우고 올리기(TODO 익스텐션 제외)
• .env파일, node_modules 올리지 않기
• IP, PORT, SECRET KEY 등 → .env파일에 넣기
• 주석 금지

[jhLim97]

거래내역 수정 및 삭제 API 연동 시 입력 값에 대한 검증로직 및 요구되는 input이 다 채워졌을 경우에만 수정 버튼이 활성화되도록 하고 그에 대한 테스트 코드 작성이 필요해 보입니다.