회고 프로젝트 주제: 음악 사이트 구현

This project was bootstrapped with Create React App.

노래 검색 / 가수 검색 / 장르별 검색 / 즐겨찾기

페이지별 기능

다음은 페이지별 기능을 소개한다.

1. 첫 시작 화면 (Login 페이지)

Spotify는 로그인을 해야지만 서비스 이용한 점을 참고하여, 로그인 페이지를 만들었다. 해당 페이지는 단순히 로그인 기능을 간접적으로 모방한 페이지다.

2. 페이지 선택 화면

원하는 기능이 들어간 페이지를 고를 수 있다.

Artist Search / Music Search / Search keyword / Recommend / My Page

3. 아티스트 검색 페이지

아티스트 이름을 검색하면, 해당 아티스트가 발매한 앨범 커버가 제공된다. 흔히들 "명반"이라고 불리는 앨범들이 많기에, 명반을 따로 관리할 수 있게 하트 이모지를 누르면 즐겨찾기를 할 수 있게 했다.

4. 앨범 상세 페이지

아티스트 검색 페이지에서 나온 앨범을 누르면, 해당 앨범의 상세 정보가 들어있는 페이지로 넘어간다. 앨범 발매일, 아티스트의 팔로워 수, 앨범에 수록된 곡에 대한 정보가 나열된다.

5. 노래 검색 페이지

노래 검색 페이지다. 이 또한, 좋아하는 노래는 즐겨찾기를 할 수 있다.

6. 장르 기반 검색 페이지

Spotify api에서 제공하는 장르를 고르고, 세부 장르까지 고르면, 이에 해당되는 음악들이 나온다.

7. 추천 페이지

감정과 관련된 단어를 고르면, 해당 단어에 맞는 노래 추천 목록이 나온다.

8. My Page

내가 즐겨찾기 한 앨범과 노래가 보여진다. 좌측에는 노래 목록, 우측에는 앨범 목록이 보여진다.