배포 URL: https://silk-music.herokuapp.com/

깃허브 URL: https://github.com/rigood/silk-music

🎀 Silk Music (실크 뮤직)

🎀 '실크 미성' 가수 진욱 님 Fan이 만든 특별한 뮤직 플랫폼

• 진욱 님의 노래를 Play 하면 포인트를 받을 수 있어요.

• 스트리밍 랭킹을 확인해 보세요.

🎀 블랙 or 핑크 모드

• 가수 진욱 님 팬덤 색상인 Pink를 활용한 테마 구현

• 상단 왼쪽 아이콘(☀)으로 테마를 바꿀 수 있어요.

🎀 유튜브 iframe API로 구현한 뮤직 플레이어

• 하단의 Mini Player로 음악만 들을 수도 있고,

• 플레이어를 열면 YouTube 영상도 함께 볼 수 있어요.

• 유튜브 영상 보기/ 숨기기 도 가능합니다.

🎀 갖출 건 다 갖춘 뮤직 플레이어

• 랜덤 재생 (ON/OFF)

• 반복 설정 (전체 / 1곡 / 반복X)

• 이전곡, 다음곡, 볼륨 조절, 시간 표시

• 플레이어에 곡 추가 , 삭제

▼ 플레이어에 곡 추가

▼ 플레이어에서 곡 삭제

🎀 유튜브 url 로 손쉽게 노래 등록하기

• 주소 입력 후 유튜브 영상을 미리보기로 확인할 수 있어요.

• 자동 입력된 곡 정보를 확인·업데이트 해주세요.

• 썸네일 이미지도 자동으로 생성됩니다.

🎀 인기 차트 & 검색 기능

• 조회수 기준 TOP 30 차트 + 실크뮤직 DB 검색

• 마음에 드는 곡은 재생, 플레이리스트에 담기, 좋아요를 누를 수 있어요.

🎀 취향 따라 만드는 플레이리스트

• 장르별, 가수별 다양한 플레이리스트를 만들어 보세요.

• 플레이리스트 이름, 커버 이미지를 바꿀 수 있어요.

▼ 내 플레이리스트에 곡 추가

▼ 전체재생, 플레이리스트 편집 및 삭제

🎀 귀여운 프로필 아바타는 덤

• 코코몽 + 진욱님 캐릭터 5종 세트

• 참고로 제가 그린건 아닙니다🤣 출처: 인스타(@silky_0721)

▼ 닉네임, 아바타, 비밀번호 변경

🎀 반응형 디자인

• 모바일에서도 (거의) 모든 기능이 지원됩니다!

• 뮤직 플레이어 유튜브 영상 지원 X (음원은 재생)

🎀 이상 Silk Music 소개였습니다 !!

중간에 기존 레파지토리를 갈아엎고 새로 만드느라 챌린지 마감시간이 다 되서야 부랴부랴 제출합니다. 멜론코딩 챌린지를 위해 헤로쿠 유료버전도 결제했답니다ㅠㅠ 예쁘게 봐주세요 ㅋ

🎧 뮤직플레이어는 Local Storage와 YouTube Iframe API를 이용했습니다.

Local Storage에 저장된 정보가 없으면 Dummy 데이터에 있는 초기 재생목록을 불러오고, 정보가 있으면 해당 데이터를 불러와 JavaScript를 이용해 화면에 렌더링 시켰습니다. 그 이후 사용자의 모든 액션(곡 추가, 삭제, 랜덤, 반복 설정, 볼륨 조절 등)은 실시간으로 Local Storage에 저장됩니다.

YouTube Iframe API에서 제공하는 인터페이스를 활용하여 뮤직플레이어의 조작 버튼을 구현하였습니다. 랜덤, 반복 설정 등은 API를 사용하지 않고 제가 직접 모든 경우의 수를 고려하여 코드로 만들어 보았습니다.

💼 DB 모델은 Song(노래), User(사용자), Playlist(플레이리스트), Like(좋아요) 총 4가지를 만들었습니다.

유튜브 챌린지와 캐럿마켓 챌린지에서 익혔던 CRUD 작업이 정말 많은 도움이 되었습니다!!

차트 목록, 검색, 조회수 증가, 회원가입, 로그인, 플레이리스트 생성, 곡 추가, 좋아요/취소 등등 모두 니꼬쌤에게 배운 코드를 기반으로 응용해서 구현하였습니다. GET, POST 요청, HTTP 상태 코드에 대해서도 굉장히 익숙해졌고, 백엔드와 프론트엔드가 상호작용하는(?) 방식에 대해서도 이제 조금 알게 된 것 같습니다..ㅎㅎ

반응형 디자인과 다크/라이트 모드 구현도 시간 내에 완성해서 정말 뿌듯합니다.. 열심히 만들었으니 한번씩 꼭 눌러봐 주세요..^^;;

🎤 제가 좋아하는 가수와 코딩을 접목시켜 컨텐츠를 만들어 볼 수 있어 너무나 즐거운 시간이었습니다.

처음에는 단순히 음악 재생, 차트 구현만 하려고 했는데, 새로운 아이디어들이 중간 중간 떠올라서 혼자 벅차오르면서 작업했네요 ㅎㅎ;; 진욱 님 노래 1회 재생할 때마다 포인트 1점씩 얻을 수 있으니..(재생이 끝나는 시점에 포인트 적립) 다들 한번씩 들어봐주세요~:)

이상 긴 글 읽어주셔서 감사합니다 💖 👋