화면
소개
여러 수강생들의 일정을 한곳에서 관리할 수 있는 기능입니다.
트레이너가 직접 일정을 등록하거나, 트레이니의 신청을 받아 예약할 수 있습니다.
1. 일정 열기 & 닫기
트레이너가 자신이 가능한 일정을 자유롭게 열고 닫을 수 있습니다.
1시간 단위로 오픈 일정을 만들 수 있습니다. 열려 있는 일정에 트레이니가 신청할 수 있습니다.
대량의 일정을 받아 한번에 열도록 할 수 있고, 기존의 일정과 겹치지 않게 검사 후 오픈합니다.
2. 일정 신청 & 수락 & 거절
트레이니가 원하는 일정을 신청하고, 트레이너가 수락하거나 거절할 수 있습니다.
3. 일정 일괄 등록
예약하지 않고도, 트레이너가 직접 트레이니의 일정을 등록할 수도 있습니다.
예를 들어, 10회의 일정을 화, 목 저녁 7시와 같은 식으로 등록해놓을 수 있습니다.
중간에 일정이 변경되면 트레이니는 하루전까지 취소할 수 있고, 다른 일정을 신청할 수 있습니다.
PT 시간이 하루 미만으로 남은 상태에서는 트레이너가 직접 취소할 수 있습니다.
4. 일정 조회
트레이너와 트레이니는 각자의 일정을 확인할 수 있습니다.
트레이너 입장에서는 자신이 열어놓은 일정들과 다른 트레이니들의 일정을 확인합니다.
트레이니 입장에서는 트레이너의 열어놓은 일정들과 자신의 일정을 확인합니다.
5. 알림 기능
트레이너와 트레이니의 일정에 변동이 생기면 서로에게 알림을 보냅니다.
일정 시작 1시간 전에 알림을 보냅니다.
구현한 기능
FE
달력이 넘어가거나 날짜가 선택될 때, 동일한 요청에 대해 서버에 반복적으로 데이터를 요청하지 않고 React Query의 캐싱 기능을 사용합니다. 네트워크 트래픽과 응답 시간을 줄입니다.
FullCalendar 라이브러리를 사용하여 월별 캘린더를 트다에 맞게 커스텀하고, Date click 이벤트와 다양한 상황의 인터랙션을 연동해서 사용자 경험을 향상시킵니다.
주별 캘린더에서 date-fns 라이브러리를 사용하여 가로 무한 스크롤을 구현했습니다. 달력의 양쪽 끝에 도달할 때 추가적인 날짜를 로드하여 확장하고, 유저는 스크롤과 드래그를 통해 연속적으로 날짜를 탐색합니다.
BE
일정 등록 및 신청, 수락, 거절
일정을 신청하거나 등록하면 PT 잔여횟수가 차감되고, 다른 트레이니가 같은 일정에 다시 신청할 수 없도록 일정의 상태를 변경합니다. 잔여횟수 차감과 일정 상태의 변경이 동시에 일어나도록 Transactional을 사용해 하나의 실행 단위로 묶었습니다.
일정 조회
여러 엔티티가 연관되어 있는 복잡한 쿼리를 위해 QueryDSL을 사용했습니다.
응답 형식도 날짜별로 묶인 시간으로 반환하여, 엔티티의 기본 구조에서 많이 가공된 형태여서, QueryDSL이 적합했다고 생각합니다. 빌드타임에 잘못 작성된 곳을 찾을 수 있어서, 개발과 유지보수 모두에 유리하다고 판단했습니다.
알림 기능
Firebase Cloud Messaging(FCM) 서비스를 사용해서, 서버에서 알림을 전송하고,
추가적으로 구현하고 싶은 기능
시간 단위이기 때문에 비교적 간단하게 기존 일정을 검사할 수 있었다고 생각합니다. 시간 단위가 아닌 10분이나 1분 단위로 시간 예약할 수 있게 하려면, 더 복잡한 시간 관련 로직을 경험해볼 수 있을 것 같습니다.