멜론 클론코딩 최종 과제 제출[🎉 HAPPY MUSIC 🎉]

🎉 자기소개

안녕하세요. 프론트엔드 개발자 윤 이라고 합니다.

🎉 참여하게 된 계기와 참여 후기

저는 한때 음악플레이어를 직접 만들어 보는 로망이 굉장히 많았습니다. 그러던 중 멜론 클론코딩 컨테스트를 개최한다는 소식을 듣고 즉시 참가를 결정하였습니다. 1기 때에 도전했던 음악플레이어 제작에 다시 한번 도전하게 되었는데, 이번에는 처음으로 백엔드를 다뤄보는 경험을 하게 되었습니다. 그 과정에서 많은 걱정이 있었지만, 반면에 백엔드에 대한 이해를 더욱 깊게 할 수 있었습니다. 마지막으로 회원가입, 로그인, 찜곡 리스트와 같은 기능의 구현에는 실패했지만, 반드시 배포까지 완료하겠다는 의지로 인해 늦게나마 배포에 성공하였습니다. 앞으로 시간이 여유로워지면, 로그인, 회원가입, 찜곡 리스트까지 완벽하게 구현해보고자 합니다.

🎉 피그마 디자인 작업공유

제가 레트로 스타일의 웹사이트들을 찾아보며, 이를 저의 퍼블리싱에 보다 쉽게 적용할 수 있는 방향으로 초점을 맞추었습니다. 또한 피그마를 이용해 디자인하며, 저의 역량 내에서 가능한 디자인을 탐색할 수 있어서 좋았습니다.

🎉 구현한 기능 소개 및 스크린샷

시티팝 음악을 좋아해서 레트로 느낌이 나는 뮤직 플레이어를 만들어봤습니다.

• 음원 : 유튜브 API를 통해 시티팝 음악을 추출했습니다.

• 컨셉 : 레트로 디자인이 주를 이룹니다.

(1) Home & Music Player

레트로 디자인 느낌의 메인 페이지와 뮤직 플레이어입니다.

(2) Music Chart

유튜브에서 '시티팝' 검색 결과를 조회수 순으로 나열했습니다.

(3) 로그인과 회원가입(수정중⚔️⚔️)

로컬 개발 환경에서는 로그인과 회원가입이 원활하게 이루어졌지만, 배포 환경에서는 MongoDB Atlas 설정에 문제가 있어서 지금 현재 수정중입니다.

(4) 창 드래그 기능

전체 화면 전환 대신 모달창을 활용했습니다.

(5) 반응형

화면 크기에 따라 적절하게 변하는 반응형 웹을 구현했습니다.

🎉 앞으로 더 구현하고 싶은 것들

• 로그인 및 회원가입 기능 완성

• 사용자가 '좋아요'를 누른 음악을 모아볼 수 있는 플레이리스트 구현

🎉 Happy Music 화면 기록

https://drive.google.com/file/d/1gLk5Ug-XHlnQL8FJM7uukAXDCyK1bQZ-/view?usp=sharing

🎉 깃허브 & 배포 링크

깃허브 링크 : https://github.com/seoyoonyi/nomadcoders-melon-clone

배포 링크 : https://happymusic.fly.dev/