사이먼's 코딩노트

[SpringBoot] 음악 커뮤니티 사이트 제작 (5) 본문

프로젝트/[SpringBoot] 음악 커뮤니티 사이트 제작

[SpringBoot] 음악 커뮤니티 사이트 제작 (5)

simonpark817 2024. 6. 26. 16:34

[음악 커뮤니티 사이트 제작]

  • 지난 포스팅에 이어 각 페이지별 기능 소개를 진행할 예정입니다.
  • 각 페이지별로 구현된 기능 코드와 html, css는 따로 포스팅되지 않을 예정이니 코드를 보고 싶으시다면 아래 깃허브 리포지터리를 방문 후 참고 부탁드립니다.
  • 깃허브 리포지터리 주소 : https://github.com/psm817/Apollon
 

GitHub - psm817/Apollon

Contribute to psm817/Apollon development by creating an account on GitHub.

github.com

 

[커뮤니티]

  • 사이트 상단 헤더 메뉴의 커뮤니티를 통해 모든 회원이 작성한 게시물을 열람할 수 있습니다.
  • 커뮤니티는 총 3가지 타입으로 공지, 자유, 친목 게시판으로 구분되어 있습니다.
  • 로그인 여부와 관계 없이 모든 게시물은 조회가 가능하며, 최초 커뮤니티 페이지 진입 시 모든 타입이 묶여있는 전체 게시판이 보여집니다.
  • 로그인이 되어 있지 않았다면 게시물 조회만 가능하며, 로그인과 함께 게시물 작성이 가능합니다.
  • 일반 회원은 자유, 친목 게시판만 게시글 작성이 가능하며, 모든 게시물에 대한 댓글도 작성 가능합니다.
  • 관리자 계정인 admin은 공지 게시판에도 게시글 작성이 가능하며, 모든 게시물에 대한 삭제 권한을 가집니다.
  • 커뮤니티 좌측에는 로그인이 되어있다면 개인 프로필을 간단하게 확인할 수 있으며, 프로필 버튼을 통해 본인이 커뮤니티에서 활동한 이력들을 모두 확인할 수 있습니다.
  • 커뮤니티 우측에는 서버 시간과, 오늘의 TOP10으로 조회 수 기준으로 가장 높은 순서대로 10개의 게시판을 보여줍니다.

커뮤니티 페이지

 

[스튜디오]

  • 사이트 상단 헤더 메뉴의 스튜디오를 통해 회원 본인의 개인 스튜디오를 방문할 수 있습니다.
  • 스튜디오는 로그인없이 이용이 불가능한 서비스로 회원 가입과 동시에 각 개인의 스튜디오를 부여받습니다.
  • 스튜디오는 해당 스튜디오 주인이 등록한 음악의 총 개수, 방문자 수, 스튜디오 좋아요 개수, 스튜디오 개설 날짜 정보를 기본적으로 제공합니다.
  • 본인 스튜디오를 제외한 타 스튜디오 방문을 원한다면 우측 상단의 검색창을 이용하여 방문이 가능합니다.
  • 각 회원의 음악 등록은 스튜디오의 좌측 하단에서 가능하며, 이미 기존에 등록된 음악이 있다면 음악 목록을 통해 등록된 모든 노래가 나열됩니다.
  • 등록된 노래의 곡 제목을 클릭하면 해당 음악의 상세 정보를 열람할 수 있습니다.
  • 음악 등록과 수정, 삭제는 각 스튜디오의 주인과 관리자 계정인 admin만 가능합니다.
  • 음악 삭제의 경우 체크박스를 통해 하나, 하나 이상 또는 전체 삭제가 가능합니다.
  • 각 회원의 방명록 관리는 스튜디오의 우측 하단에서 가능하며, 이미 기존에 등록된 방명록이 있다면 방명록 목록을 통해 등록된 모든 방명록이 나열됩니다.
  • 등록된 방명록의 제목을 클릭하면 해당 방명록의 상세 내용을 열람할 수 있습니다.
  • 방명록 작성은 회원 누구나 타 스튜디오를 방문하여 작성 가능하며, 삭제는 각 스튜디오 주인과 관리자 계정인 admin만 가능합니다.
  • 방명록 삭제의 경우 체크박스를 통해 하나, 하나 이상 또는 전체 삭제가 가능합니다.
  • 추가적으로 관리자 계정인 admin은 모든 스튜디오를 대상으로 차단과 활성화 기능이 부여됩니다.
  • 실제로 관리자에 의해 스튜디오가 차단된 사용자와 모든 회원은 로그인을 하여도 개인의 스튜디오를 열람할 수 없습니다.
  • 스튜디오의 차단을 해제하고 싶다면 커뮤니티를 통해 관리자에게 문의해야하며 관리자는 해당 게시글을 확인하고 활성화 버튼을 통해 스튜디오의 차단을 해제할 수 있습니다.

스튜디오 페이지

 

음악 등록 페이지

 

음악 상세 정보 페이지

 

방명록 작성 페이지

 

방명록 상세 정보 페이지

 

[트러블 슈팅]

  • 위의 내용까지 Apollon 서비스의 모든 페이지 설명을 마치고 팀 프로젝트를 진행하면서 제 기준에서 생긴 이슈와 해결방법을 작성해보려 합니다.
  • 먼저, 차트목록에서 담기 버튼을 통해 회원 개인의 플레이리스트에 음악을 추가하는 기능을 MusicController.java 라는 클래스에서 구현했지만 실제 HTML 프론트단에서는 해당 음악 목록이 담기를 실행해도 표출되지 않는 이슈가 있었습니다.
  • 일단 음악 담기 기능이 정확히 동작하는 지 파악하기 위해 엔티티 부분에서 DB SELECTE를 할 수 있도록 음악과 플레이리스트의 관계를 1대 N이 아닌 N대 N으로 변경하였고, DB를 통해 확인해본 결과 담기 기능은 제대로 동작한다는 것을 확인했습니다.
  • 문제가 되었던 부분은 회원 당 하나씩 플레이리스트를 가져오는 구조이기 때문에 MusicController.java 에서 플레이리스트를 가져올 때 List 타입이 아닌 PlayList 타입으로 가져와야 했었습니다.
  • 해당 타입을 변경해주고 HTML에서 타임리프 문법에 맞게 수정했더니 플레이리스트에 사용자가 담은 노래가 쌓이는 것을 확인했습니다.

 

[아쉬운 점 및 소감]

  • 마지막으로 이번 팀 프로젝트를 진행하면서 아쉬웠던 부분은 크게 2가지가 있습니다.
  • 먼저 차트목록에서 로그인된 회원이 듣기 버튼을 클릭하게 되면 1분 미리듣기가 아닌 전곡 재생과 함께 플레이리스트에 자동으로 담고 싶었는데, 시간이 조금 부족한 탓에 해당 기능을 기간 내에 마무리하지 못했습니다.
  • 추가적으로 데이터베이스 설계를 할 때 각 테이블별로 연관된 컬럼들이 굉장히 많기 때문에 마이페이지를 통해 회원 탈퇴 시 연관된 속성들이 DB에는 여전히 남아있어 회원 삭제가 원할하게 이루어지지 못했습니다.
  • 위 두 가지 문제점들은 추후 계속된 디버깅을 통해 잡아나갈 예정이며, 한 달 동안 생각 이상으로 많은 작업량을 수행할 수 있어서 팀원들에게 고맙다는 말을 전하고 싶습니다.

 

 

반응형