화면
소개
PT 수강이 시작되면 트레이너가 여기서 트레이니를 등록하고, 관리를 시작합니다.
1. 트레이니 목록 조회
트레이너에게 현재 등록되어 있는 트레이니 목록을 조회합니다.
2. 트레이니 등록
PT 수강을 시작하면, 트레이너가 트레이니를 등록하고, 그때부터 회원 관리를 시작할 수 있습니다.
구현한 기능
FE
트레이니 목록
트레이너가 등록하는 트레이니가 많아질 경우 많은 양의 데이터를 불러오는 것을 방지하기 위해 IntersectionObserver를 활용 viewport를 감지하여 useQuery useInfiniteQuery를 사용하여 다음 page를 받아오는 방식으로 무한 스크롤 구현하여 트레이니 목록을 확인합니다.
트레이니 관리
useModals 훅을 사용하여 트레이니 추가하고, 삭제 시 확인 모달을 통해 삭제 여부를 확인 후 삭제 가능하며, 목록은 정렬 옵션에 따라 이름순과 PT 등록 최신순으로 볼 수 있습니다.
유저 경험 향상을 위한 로딩 상태 관리 및 에러 처
트레이니 데이터를 불러오는 동안 로딩 상태를 관리하여 사용자가 현재 데이터를 로딩 중임을 인식할 수 있도록 합니다. 그리고, API 호출 중 발생할 수 있는 에러를 console에 출력하며 사용자에게 알림을 통해 에러 메시지를 전달합니다.
BE
트레이니 목록
트레이니가 많아질 경우를 대비해 페이지네이션을 사용해 데이터를 반환합니다.
추가적으로 구현하고 싶은 기능
제한 시간 내 개발을 마무리하기 위해 각 트레이니가 한명의 트레이너에게만 등록될 수 있는 걸 가정하여 개발했지만, 그 제한을 풀고 트레이너와 트레이니를 N:N으로 연결할 수 있는 구조를 생각해본다면, 생각할 것이 더 많아지겠지만, 좀 더 실제에 가까운 케이스들을 포괄할 수 있는 서비스가 될 것 같습니다.