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

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

• 지난번 E-R 다이어그램을 통해 데이터베이스를 소개한 데에 이어 이번에는 모든 기능이 구현된 각 페이지를 소개해드릴 예정입니다.
• 각 페이지별로 구현된 기능 코드와 html, css는 따로 포스팅되지 않을 예정이니 코드를 보고 싶으시다면 아래 깃허브 리포지터리를 방문 후 참고 부탁드립니다.
• 깃허브 리포지터리 주소 : https://github.com/psm817/Apollon

GitHub - psm817/Apollon

 

[메인페이지]

• 메인페이지는 서비스 접속 초기화면으로 화면 페이지의 기본 구조는 상단 메뉴를 나타내는 헤더, 중간 본문, 하단 플레이리스트로 구분되어 있습니다.
• 공통 layout.html이라는 템플릿을 사용하여 모든 페이지에서 상단 헤더와 하단 플레이리스트가 고정으로 보이도록 구현하였습니다.
• 상단 메뉴를 나타내는 헤더는 좌측에 차트 목록, 커뮤니티, 스튜디오와 우측에 검색바, 로그인 회원가입 메뉴로 구성되어 있습니다.
• 검색창을 통해 현재 Apollon 서비스에 등록된 모든 음악에 대해 제목을 기준으로 검색이 가능합니다.
• 메인페이지 중간 본문은 광고 및 홍보 배너와 최신&추천 음악, 자주찾는질문, 인기 스튜디오를 제공합니다.
• 자주 찾는 질문 TOP5의 경우 Apollon 서비스에 등록된 모든 공지사항 게시물 중 조회 수가 가장 많은 순서로 나열됩니다. 만일 조회 수가 동일하다면 동일한 게시물은 랜덤으로 나열되도록 하였습니다.
• 스튜디오 TOP5의 경우 Apollon 서비스의 등록된 모든 회원의 스튜디오 중 방문자 수가 가장 많은 순서로 나열됩니다. 만일 방문자 수가 동일하다면 동일한 스튜디오는 랜덤으로 나열되도록 하였습니다.
• 중간 본문에 요약된 모든 정보들은 마우스 클릭을 통해 각 세부정보 화면으로 이동할 수 있지만, 로그인이 되어있지 않은 경우에는 자주 찾는 질문을 제외한 나머지 세부 정보는 열람할 수 없습니다.
• 하단 플레이리스트에는 실제 회원이 차트목록을 통해 담은 노래를 확인하고 재생하는 기능이 포함되어 있습니다. 로그인되지 않은 회원은 해당 플레이리스트를 이용할 수 없습니다.
• 실제로 메인페이지를 기준하여 로그인이 되어있지 않을 경우, 이용할 수 없는 메뉴 서비스는 '스튜디오' 뿐입니다.

메인페이지 화면

 

[회원가입]

• 상단 헤더의 회원가입 메뉴 클릭과 동시에 이용약관 및 개인정보 수집과 저작권 안내에 대한 동의서 제출이 요구됩니다.
• 약관 동의 후 일반 회원가입을 진행하며 작성할 모든 정보에는 유효성 검사를 적용하여 하나라도 작성되지 않았을 시, 알림을 통해 작성을 요구합니다.
• ID는 중복확인을 필수로 진행하며, 비밀번호는 반드시 비밀번호 확인 절차를 걸치게 됩니다.
• 프로필 사진을 파일 내에서 선택하면 회원가입 폼 우측에 선택한 이미지 파일을 미리볼 수 있습니다.
• 회원가입이 완료되면 로그인 화면으로 바로 이동하게되며, 회원가입 시 입력한 이메일 주소로 환영 메일이 전송됩니다. 이 때 올바른 이메일 주소 형식을 작성하였지만, 도메인명이 정확하지 않을 경우 이메일 발송은 불발될 수도 있습니다.

회원가입 전 약관동의 및 저작권 법률 고지

 

회원가입 페이지

 

회원가입 완료 시 전송되는 환영 메일

 

[로그인]

• Apollon 서비스에 가입된 모든 회원들은 상단 헤더의 로그인 메뉴를 통해 서비스 이용을 위한 로그인이 가능합니다.
• 로그인은 ID와 PW를 통해 수행되며, 일반 회원 외에도 SNS 계정(카카오톡, 네이버, 구글)을 통한 소셜 로그인도 가능합니다.
• 만일 비밀번호를 분실했다면 비밀번호 찾기 버튼을 통해 임시 비밀번호 코드를 등록된 메일 계정으로 받을 수 있습니다.
• 임시 비밀번호를 발급받기 위해선 사용자는 본인의 ID와 이메일 주소는 기억하고 있어야합니다.
• 만일 ID와 이메일 주소도 잃어버린 경우라면 해당 Apollon 서비스에 직접 전화로 문의해야 되는 컨셉을 가지고 있습니다.
• 로그인에 성공한다면 메인페이지로 화면이 이동하게 됩니다.

로그인 화면

 

임시비밀번호 발급 페이지

 

임시비밀번호 발급 시 전송되는 메일

 

[마이페이지]

• 로그인이 완료된 회원은 상단 헤더의 회원가입 메뉴 자리에 마이페이지 메뉴가 위치된 것을 확인할 수 있다.
• 마이페이지는 회원이 가입했을 당시 작성한 회원의 ID, 닉네임, 이메일 주소, 프로필 사진 정보를 제공합니다.
• 하단의 프로필 수정 버튼을 통해 일반 회원은 ID를 제외한 모든 정보를 변경할 수 있고, 소셜 로그인의 경우는 닉네임과 프로필 사진만이 변경 가능합니다.
• 회원 가입때와 마찬가지로 작성된 모든 항목에 유효성 검사를 적용하였기 때문에 항목에 작성되지 않았다면 알림을 통해 작성을 요구합니다.
• 하단의 회원탈퇴 버튼을 통해 실제 회원 탈퇴와 함께 서비스 이용이 종료됩니다. 이 때 회원이 업로드한 모든 커뮤니티 게시물과 음악도 역시 모두 삭제됩니다.

마이페이지 페이지

 

프로필 수정 페이지