/Atmospeer

Primary LanguageJavaScript

AtmosPEER

단순 음악 공유를 넘어, 음악이 전해주는 분위기를 함께 공유하는 새로운 경험. AtmosPEER와 함께.

logo

AtmosPEER는 분위기를 뜻하는 atmosphere와 친구를 뜻하는 peer를 합친 단어로, 가상의 공간에서 음악을 통해 느끼는 분위기를 친구와 함께 공유하는 경험을 제공하는 웹 페이지입니다.

팀원

  • 김선희

  • 전윤혁

개발 환경

  • Language: JavaScript, Java, CSS
  • Front-end: React
  • Back-end: Spring Boot, Node JS

프로젝트 설명

메인 화면

main1

main2

  • 로그인 및 회원 가입 버튼을 통해 해당 페이지로 이동할 수 있습니다.
  • 로그인 후 헤더에 있는 로고를 클릭하면 아래와 같은 메인 화면을 볼 수 있습니다.
    • 돌아가기 버튼을 누르면, User 메인 화면으로 이동할 수 있습니다.

로그인 및 회원가입 화면

login

signup

User 메인 화면

user main

user main2

  • User 메인 화면에서 기분, 하고 있는 일 등의 키워드를 검색하면 그와 어울리는 유튜브 플레이리스트를 추천합니다.
    • 해당 플레이리스트가 마음에 든다면, 아래 ‘새로운 AtmosPEER 만들기’를 통해 가상의 공유 공간 AtmosPEER로 만들어 친구들과 공유할 수 있습니다.
  • User 메인 화면에서는 참여 중인 AtmosPEER를 볼 수 있습니다.
    • AtmosPEER에 참여하는 형태는 두 가지가 있습니다.
      • 방장으로 참여하기
      • 참가자로 참여하기
  • 더 이상 즐기고 싶지 않은 AtmosPEER는 X 버튼을 통해 삭제할 수 있습니다.

AtmosPEER 화면

atmospeer

  • AtmosPEER 화면에서는 이전에 저장해 둔 플레이리스트와 그것의 분위기와 어울리는 그림을 볼 수 있습니다.
  • 해당 AtmosPEER를 공유하고 싶은 친구가 있다면, ‘새로운 멤버 초대하기’를 통해 초대할 수 있습니다.
  • ‘참여 중인 멤버’ 목록에서 해당 AtmosPEER를 같이 즐기고 있는 친구들을 확인할 수 있습니다.