화면
소개
트레이너가 트레이니에게 제공할 수 있는 운동 종류를 관리합니다.
1. 운동 종류 생성
트레이너는 제공할 운동 종류를 생성합니다. 운동의 이름, 타깃 부위, 주의사항을 필수로 입력해야 하며 운동 종류에 따라 무게, 횟수, 세트 수, 속도, 시간 5가지 속성 중 해당하는 속성을 중복 선택합니다.
2. 운동 종류 수정
트레이너는 운동 종류를 수정할 수 있습니다. 5가지 속성값을 제외한 운동의 이름, 타깃 부위, 주의사항을 수정할 수 있으며 이때도 3개의 값들은 필수 입력 사항입니다.
3. 운동 종류 삭제
트레이너는 더 이상 트레이니에게 제공하지 않을 운동 종류를 삭제합니다.
4. 운동 종류 조회
트레이너는 자신이 생성한 운동 종류의 목록을 확인할 수 있습니다.
구현한 기능
FE
모달을 통한 CRUD 작업
useModals 훅을 사용하여 운동 항목을 추가 및 수정할 때 모달 창을 띄워 입력을 받을 수 있도록 구현하였습니다. 모달은 입력 및 수정 시 각 운동의 속성을 세부적으로 설정할 수 있는 UI를 제공합니다.
운동 데이터의 페칭 및 로딩 상태 관리
react-query의 useQuery를 사용하여 운동 데이터를 서버에서 가져오며, 로딩 상태를 관리하여 데이터를 가져오는 동안 사용자에게 로딩 중임을 알립니다. keepPreviousData 옵션을 통해 페이지가 전환될 때 데이터를 유지하여 사용자 경험을 향상시킵니다.
BE
다양한 어노테이션을 사용해 입력받은 값들에 대해 유효한 데이터들만 저장하도록 했습니다.
무게, 세트 수 등의 boolean 타입의 속성 값들은 수정할 수 없도록 정했기 때문에 수정이 필요한 필드의 값만 바꿀 수 있도록 @Builder의 toBuilder 속성을 사용했습니다.
해당 운동 종류를 관리하는 트레이너의 정보와 운동 종류의 식별 번호를 이용해 삭제하고 싶은 운동 종류를 삭제할 수 있도록 했습니다.
운동 종류는 항상 최근에 등록한 순서대로 정렬하기로 했기 때문에 데이터베이스에서 조회할 때부터 등록 최신순으로 조회하고 페이지 네이션을 통해 한 번에 특정 수의 데이터만 반환할 수 있도록 했습니다.
추가적으로 구현하고 싶은 기능
부족한 시간으로 인해 운동 종류 목록 데이터를 가져오는 방법을 useQuery만 사용했지만, 추가적으로 무한 스크롤 및 페이지 네이션을 도입 예정