멜론 클론 코딩 최종 제출

최종 배포 URL : https://cherry-music.fly.dev/

github URL : https://github.com/lhk3337/melon-clone

안녕하세요. 드디어 3주가 흐르고 완성하였습니다. 너무 감격스럽습니다.

[설명]

[로그인 화면]

• 아이디와 비밀번호를 통해 로그인을 할 수 있습니다.

• 아이디가 없거나 비밀번호가 틀릴 경우 에러 메시지가 나타납니다.

• 비밀번호는 db에 암호화하여 저장 하였습니다.

• 로그인을 하게 되면 홈으로 redirect되도록 설정하였습니다.

[회원 가입 화면]

• 이미 생성된 아이디가 있으면 메시지를 출력 합니다.

• 비밀번호 입력 시 확인 비밀번호와 일치 하지 않으면 메시지가 출력 합니다.

[홈 화면]

• 메인 화면은 인기곡과 유저의 플레이 리스트로 구성하였습니다

• 리스트 정보에서 앨범과 제목, 가수, 몇명이 들었는지 표시 하였습니다.

• ...을 클릭하면 해당 페이지로 이동합니다.

[모바일 페이지]

[Top 100 페이지]

• 리스트에서 오른쪽 음표를 클릭하면 음악이 재생 됩니다.

• 리스너 숫자가 많은것을 기준으로 정렬하였습니다.

• 해당 곡의 음표를 클릭하면 플레이어에 각각 앨범과 제목이 다르게 나타납니다.

• 플레이어 컨트롤을 할 수 있도록 설정하였습니다.(볼륨, 음악 위치, 시간)

• 폴더추가 버튼을 클릭하면 유저에 플레이리스트에 저장 됩니다.

• 중복된 곡은 추가 되지 않게 설정하였습니다.

[모바일 화면]

• etc 버튼을 클릭하면 모달창이 나타나고 해당 버튼을 클릭하면 모달창이 사라지게 설정하였습니다.

  

[Play list 페이지]

• top100에서 저장한 노래가 playlist 페이지에 나타납니다.

• playlist도 음표 버튼을 클릭하면 음악이 플레이됩니다.

• 플레이리스트에서 노래를 삭제 하고 싶다면 맨 오른쪽에 삭제 버튼을 누르면 플레이리스트에서 노래가 삭제 됩니다.

플레이 리스트 삭제

[후기]

이번 과제를 하면서 잘 할 수 있을까하는 의구심이 많았습니다. 그런데 막상 해보니 하나하나 해결하는 모습을 보면서 나 자신에게 고맙다고 칭잔 하고 싶어요. 감사합니다. 재미있는 경험이었어요.