화면
소개
트레이니의 식단을 관리하는 페이지입니다.
트레이니의 식단 추가
1.
트레이니는 자신의 식단을 관리하기 위해 사진과 글을 업로드할 수 있습니다.
2.
사진은 식사한 음식의 이미지를 포함하고, 글은 해당 식사의 설명이나 메모를 작성합니다.
3.
이를 통해 트레이니는 자신의 식단을 시각적으로 기록하고 관리할 수 있습니다.
트레이니의 식단 목록 조회
1.
조회 가능 대상: 트레이니와 트레이너 모두가 트레이니의 식단 정보를 조회할 수 있습니다.
2.
트레이니: 자신이 올린 모든 식단을 날짜별로 썸네일 형태로 확인할 수 있으며, 이를 통해 자신의 식습관을 모니터링하고 개선할 수 있습니다.
3.
트레이너: 담당 트레이니의 식단을 조회하여 피드백을 제공하고, 트레이니의 목표 달성을 지원할 수 있습니다.
트레이니의 식단 상세조회
1.
조회 가능 대상: 트레이니와 트레이너 모두가 트레이니의 식단 정보를 조회할 수 있습니다.
2.
트레이니: 자신이 올린 모든 식단을 날짜별로 원본 크기의 이미지와 글, 트레이너의 댓글까지 포함하여 상세히 확인할 수 있습니다. 이를 통해 자신의 식습관을 모니터링하고 개선할 수 있습니다.
3.
트레이너: 담당 트레이니의 식단을 원본 크기의 이미지와 글, 그리고 트레이너의 피드백 댓글을 포함하여 조회하여 피드백을 제공하고, 트레이니의 목표 달성을 지원할 수 있습니다.
트레이니의 식단 삭제
1.
트레이니는 잘못 올리거나 더 이상 필요하지 않은 식단 정보를 삭제할 수 있습니다.
2.
삭제 기능을 통해 트레이니는 자신의 식단 기록을 관리하고 정리할 수 있습니다.
트레이니의 댓글 달기
1.
트레이너는 트레이니가 올린 식단에 대해 피드백이나 조언을 댓글로 달 수 있습니다.
2.
이를 통해 트레이너는 트레이니의 식습관을 개선하기 위한 조언을 제공하고, 트레이니의 동기 부여를 도울 수 있습니다.
3.
댓글 기능은 트레이너와 트레이니 간의 소통을 강화하고, 개인 맞춤형 지도를 가능하게 합니다.
구현한 기능
FE
IntersectionObserver와 useInfiniteQuery를 이용하여 무한스크롤을 구현하여 식단 사진 목록을 끊김없이 부드럽게 보여줍니다. 사용자 기기 크기에 따라 뷰포트가 변경되어도 유연하게 동작하고, react-query에서 필요한 데이터만 페칭하여 성능을 최적화합니다.
이미지가 사용되는 곳의 뷰포트 너비를 고려하여 다양한 크기의 이미지를 적절히 사용하고, loading: lazy 속성을 적용하여 이미지 최적화를 통해 렌더링 속도를 향상시킵니다.
createObjectURL을 사용하여 업로드한 이미지를 서버에 전송하지 않고 로컬에서 직접 URL을 생성하여 미리보기 이미지를 표시합니다. 서버 리소스를 절약하고 사용자 경험을 개선합니다.
BE
트레이니의 식단 추가
•
이미지 파일 올리기 - AWS S3 저장소에 이미지를 업로드합니다. JPEG 또는 PNG 형식의 파일만 허용되며, 원본 이미지와 썸네일 이미지를 모두 저장합니다. 잘못된 파일 형식을 업로드할 경우, 에러 코드가 반환됩니다. AWS S3을 사용하는 이유는 높은 가용성과 확장성, 데이터 내구성, 그리고 비용 효율성 때문입니다. 이를 통해 대량의 이미지를 안전하게 저장하고 관리할 수 있습니다.
◦
원본 이미지: 원본 이미지는 410px 크기로 저장하며, 1:1 비율을 유지합니다. 가로와 세로 중 짧은 쪽을 410px에 맞춰 리사이징합니다.
•
썸네일 생성 - 이미지 리사이징에 최적화된 라이브러리인 imgscalr을 사용하여 썸네일을 생성합니다. 썸네일의 크기는 150px로 1:1 비율로 조정하였으며, 파일 크기를 크게 줄일 수 있었습니다.
•
파일 이름 관리: 썸네일 미디어 파일의 이름은 접두사(thumb_/)를 통해 파일 종류를 구분하고, UUID를 이용하여 중복되지 않도록 하였습니다. 썸네일 파일은 ‘thumb_’ 접두사를 붙여 관리하며, 원본 이미지와 썸네일 모두 동일한 UUID를 사용합니다. 이로써 파일 이름의 중복을 방지하고, 파일 종류를 명확히 구분할 수 있습니다.
•
글 올리기: 식단 사진과 함께 해당 사진에 대한 설명을 String 형태로 업로드합니다. 이로 인해 사진과 관련된 정보를 함께 저장할 수 있습니다.
트레이니의 식단 목록 조회
•
식단 목록 조회: 식단 목록은 썸네일 형태로 나열되며, Pagination을 사용하여 날짜순으로 정렬됩니다. 나열된 이미지는 CloudFront를 통해 변환하여 이미지 최적화를 수행합니다.
•
트레이니 권한: 트레이니는 자신의 식단 목록을 조회할 수 있습니다.
•
트레이너 권한: 트레이너는 먼저 트레이니와의 계약 여부를 확인해야 하며, 계약된 트레이니의 식단 목록만 조회할 수 있습니다.
트레이니의 식단 상세 조회
•
조회 가능 대상: 트레이니와 트레이너 모두가 상세 조회를 할 수 있습니다. 식단 목록에서 이미지 썸네일을 클릭하면 상세 조회 페이지로 넘어갑니다.
•
원본 이미지 및 설명 보기: 상세 조회 페이지에서는 CloudFront를 통해 최적화된 원본 이미지와 함께 식단에 대한 설명을 볼 수 있습니다. 또한 트레이너의 댓글도 볼 수 있습니다.
트레이니의 식단 삭제
•
삭제 기능: 트레이니는 자신의 식단 정보를 삭제할 수 있습니다.
•
권한 확인: 삭제 요청 시, 삭제하려는 식단이 본인의 것인지 확인하는 절차를 거칩니다. 이를 통해 타인의 식단 정보가 삭제되지 않도록 보안성을 확보합니다.
•
데이터 관리: 삭제된 식단 정보는 AWS S3에서 원본 이미지와 썸네일 이미지를 포함하여 완전히 삭제됩니다. 데이터베이스에서도 해당 기록이 제거되어 일관성 있게 관리됩니다.
트레이너의 댓글 기능
•
댓글 달기: 트레이너는 트레이니의 식단에 댓글을 남길 수 있습니다.
•
댓글 수정: 트레이너는 자신이 남긴 댓글을 수정할 수 있습니다.
•
댓글 삭제: 트레이너는 자신이 남긴 댓글을 삭제할 수 있습니다.
•
권한 확인: 댓글 달기, 수정, 삭제는 트레이너만 할 수 있습니다.
추가적으로 구현하고 싶은 기능
커뮤니티 기능을 구현하고자 했습니다. 이를 통해 마이페이지에서 사용자가 자신의 프로필을 관리하고, 아바타나 프로필 사진을 업로드할 수 있게 하여 더 개인화된 사용자 경험을 제공하려 했습니다. 또한, 사용자 간의 소통을 위한 커뮤니티 기능을 도입하여 트레이니와 트레이너가 서로 대화를 나누고, 피드백을 주고받을 수 있도록 하고자 했습니다.
그러나 이러한 기능은 현재 프로젝트의 핵심 목표인 관리 플랫폼과는 다소 방향성이 달랐으며, 커뮤니티 기능을 포함하게 되면 프로젝트의 규모가 상당히 커질 것으로 예상되었습니다. 따라서 이번 프로젝트에서는 이러한 기능을 구현하지 않았지만, 추후 확장 가능성이 있는 기능으로 고려하고 있습니다.