re:tro 협업 프로젝트 개발 일지

프로젝트 명

re:tro (리:레트로)

프로젝트 설명

1980년대부터 2010년대까지의
당신의 추억 속 음악을 들려주는 웹 사이트

 

프로젝트 구성

• 메인 페이지
• 로그인 / 회원가입 페이지
• re:tro 소개 페이지
• 마이 페이지
• 노래 검색 페이지
• 레트로 뮤직 차트 페이지
• 시대별 분류 레트로 뮤직 모음집 페이지
• 음악 성향 테스트 페이지
• 노래 모음집 페이지

 

re:tro 페이지 별 기능

1. 메인 페이지
   • 개폐형 상단 팝업 슬라이드
   • 음악 플레이 바 
     • Youtube를 연동한 노래 재생
     • 버튼을 통해 음악 일시정지 및 재생
     • 로그인 시, 좋아요 기능을 통해 마이 플레이리스트에 추가
   • 1980~2010년대 시대 별 상위 6위 노래 차트
   • 로그인 시에만 마이페이지, 보관함 접속 가능
   • 각 사이트로 연결
   • 노래 검색창
   • 깔끔한 레이아웃 구성
2. 로그인 / 회원가입 페이지
   • 아이디 영어와 숫자만 사용 가능하게 설정
   • 비밀번호 10자 이상 제한
   • 비밀번호 재확인(일치 여부) 기능
3. re:tro 소개 페이지
   • 왼쪽 하단 메인 페이지로 돌아가는 버튼 
     • 버튼인걸 인식할 수 있도록 동적 효과 추가함
4. 마이 페이지
   • 내 정보 확인
   • 마이 플레이리스트
   • 음악 취향 테스트 결과를 마이 페이지에 반영 
     • 음악 취향 새로운 검사를 통해 계속해서 업데이트 가능
     • 음악 취향 결과에 따라 달라지는 텍스트
     • 음악 취향 결과에 따른 추천 음악 바로가기
   • 회원 탈퇴 기능
   • 노래 검색창
   • 음악 플레이 바
5. 노래 검색 페이지
   • 제목, 아티스트 명으로 노래 검색 가능 
     • "사랑" 검색 시 해당 단어가 포함된 모든 곡 나열
     • "아이유" 검색 시 가수 아이유가 부른 노래 및 피쳐링 참여 곡 모두 나열
   • 재생 및 좋아요 기능
   • 노래 검색창
   • 음악 플레이 바
6. 레트로 뮤직 차트 페이지
   • 1980년대, 1990년대, 2000년대, 2010년대로 나눠서 상위 100곡씩 나열
   • 재생 및 좋아요 기능
   • 노래 검색창
   • 음악 플레이 바
7. 시대별 분류 레트로 뮤직 모음집 페이지
   • 각 연대별, 세부 년도 별 상위 100곡 나열 카테고리 
     • 1990년대 곡으로 나열 가능
     • 1990년대 속에서도 1997년에 해당하는 곡들만 나열 가능
   • 전체 곡 나열 카테고리
   • 재생 및 좋아요 기능
   • 노래 검색창
   • 음악 플레이 바
8. 음악 성향 테스트 페이지
   • 총 4문제로 구성된 테스트
   • 선택한 답에 따라 달라지는 테스트 결과 (4개로 분류) 
     • 비주얼 타입: 노래 실력 + 비주얼 = 만족도 200%
     • 감성 타입: 꿀 음색 + 감성 촉촉한 팝 & 발라드
     • 그루브 타입: 나의 혈관에도 그루브와 소울이 흐르지!
     • 유니크 타입: 끝까지 나만 알고 싶은 소중한 아티스트
   • 테스트 결과 즉시 마이 페이지에 업데이트
   • 테스트 결과에 따른 음악 추천
   • 음악 성향 테스트 페이지 링크 공유 기능 (KakaoTalk meta tag Open Graph 사용)
9. 노래 모음집 페이지
   1. 추천 가수 모음집 페이지
      • 옛날 음악을 대표하는 가수인 이문세, 이선희 가수의 노래 15곡씩 추천
      • 재생 및 좋아요 기능
      • 노래 검색창
      • 음악 플레이 바
   2. 개발자's Pick 노래 모음집 페이지
      • 개발자 6명이 각자 주제를 선정하여, 해당 주제에 걸맞은 노래 모음집 형태로 추천 
        • 팬덤 문화 일으킨 1세대 아이돌 모실게요
        • 요즘 집콕! 나홀로 플레이리스트
        • 내 마음 가져간 90년대 발라드
        • 사랑하는 사람과 듣고 싶은 OST
        • 드라이브에 딱! 감성 돋는 시티팝 뮤직
        • 지친 나에게 힘이 되는 노래들
      • 재생 및 좋아요 기능
      • 노래 검색창
      • 음악 플레이 바

 

 

최종 영상

 

 

GitHub - 11th-CodingKingdom/retro_frontend