화면
소개
트레이너는 PT 수업이 끝난 후 그날 진행했던 수업에 대한 기록을 남겨 이후 트레이니가 스스로 운동할 때 참고할 수 있습니다.
1. 운동 일지 생성
트레이너는 PT 수업이 끝나면 운동 일지를 작성합니다. PT 수업 일자와 회차, 수업의 특이사항, 그날 진행한 운동을 기록하게 됩니다. 운동 일지는 PT 수업의 회차별로 한 개만 작성할 수 있습니다.
2. 운동 일지 수정
회차별로 일지를 한 개만 작성할 수 있기 때문에 트레이너는 PT 수업 회차를 제외한 나머지 내용들을 수정할 수 있습니다.
3. 운동 일지 삭제
4. 운동 일지 이미지 업로드
트레이너는 해당 수업에서 촬영한 트레이니의 운동 자세에 대한 이미지를 업로드할 수 있습니다. 이미지는 한 번에 여러 장 업로드가 가능하고 각 일지별로 10장까지 업로드 할 수 있습니다.
5. 운동 일지 동영상 업로드
트레이너는 해당 수업에서 촬영한 트레이니의 운동 자세에 대한 동영상을 업로드할 수 있습니다. 동영상은 한 번에 하나씩만 업로드 가능하며 각 일지별로 5개까지 업로드할 수 있습니다.
6. 운동 일지 목록 조회
트레이너와 트레이니는 운동 일지의 목록을 확인할 수 있습니다. 이곳에서는 업로드했던 자세 사진들과 일지들의 목록을 확인할 수 있습니다. 일지는 가장 최근에 작성한 일지가 위로 정렬되며 목록에는 PT 수업 날짜와 회차가 표시됩니다.
7. 운동 일지 상세 조회
트레이니는 트레이너가 작성해 준 PT 수업에 대한 일지를 회차별로 상세하게 조회할 수 있습니다. 목록에서 원하는 일지를 선택하면 트레이너가 업로드한 특이사항, 운동 내용, 자세 사진, 영상 등을 확인할 수 있습니다.
구현한 기능
FE
세션 관리 및 목록 표시
•
트레이너와 사용자가 트레이니의 운동 세션 목록을 조회할 수 있으며, 각 세션은 운동 날짜와 회차 정보를 포함합니다.
•
useInfiniteQuery를 사용하여 무한 스크롤을 구현하여 사용자가 세션 목록을 탐색할 수 있습니다. 목록은 페이지 단위로 데이터가 로드됩니다.
세션 추가 기능
•
트레이너는 새로운 운동 세션을 추가할 수 있습니다.
•
추가된 세션은 목록에 즉시 반영되며, 사용자는 AddSessionModal을 통해 세션 정보를 입력하고 저장할 수 있습니다. 모달에서 자동으로 증가된 회차 번호를 제공합니다.
세션 상세 정보 및 편집
•
각 세션의 상세 정보를 확인하고 수정할 수 있습니다. 세션에는 특이 사항과 운동 기록이 포함됩니다.
•
EditSessionModal을 사용하여 세션 정보를 업데이트할 수 있습니다.
운동 사진 및 비디오 관리
•
각 세션에 첨부된 사진과 비디오를 관리할 수 있습니다.
•
사진과 비디오는 각각 최대 10장과 5개까지 업로드할 수 있으며, 업로드 된 미디어는 세션 상세 페이지에 표시됩니다.
•
사진과 비디오의 업로드는 PhotoUploadModal과 VideoUploadModal을 통해 이루어지며, 미디어는 가로 스크롤 가능한 컨테이너로 표시됩니다.
BE
사진과 동영상 같은 미디어 파일의 관리를 위해 AWS S3를 사용했습니다.
각 미디어 파일의 이름은 접두사(thumb_/original_)를 통해 어떤 종류인지
나누고 UUID를 이용하여 중복되지 않도록 하였습니다. 또한 원래 미디어 파일의 확장자를 다시 붙여주어 어떤 타입의 미디어인지 알 수 있도록 하였습니다.
일부 브라우저에서 .mov 확장자를 가진 미디어 파일은 다운로드 되도록 처리되어 있기 때문에 .mov 확장자는 보다 더 많이 지원되는 방식인 .mp4로 변환해 주었습니다.
미디어에 대한 저장 공간을 절약하고 전송 속도를 향상 시키기 위해 FFmpeg를 이용해 동영상의 화질을 조절하고 Imgscalr를 이용해 사진을 리사이징 했습니다.
추가적으로 구현하고 싶은 기능