[Project] 리액트 프로젝트 기획
1차: 2023.06.19 작성
2차: 2023.06.24 작성
3차: 2023.06.29 작성
4차: 2023.07.10 작성 (js, css 파일과 id, class이름 전격 수정 > 중복된 이름 다수 발견)
5차: 2023.07.26 작성 (API 확정)
안녕하세요! 보라해바라기입니다 ㅎㅎ
저는 요즘 학교 + 자격증 공부 + 근로 + 창업 동아리 + 번역 봉사 등등... 아주 바쁘게 살아왔습니다.
최근 자격증 합격과 다음주 학교 종강이 다가와 조금 여유로워지기 시작하여 리액트 프로젝트를 진행하려합니다!
사실 시간이 남을 때 개발을 하는 것이 아니라, 없는 시간도 쪼개서 해야되는게 사실이지만...
이제라도 만들어봅니다 ㅠㅠ
사실 한창 리액트를 배울 때보다 시간이 훨씬 더 걸릴 수도 있습니다.
솔직히 말하면 리액트 개념도 많이 까먹었고 계속 구글링을 통해 채워나가야 할 듯 해요... ㅎㅎ
그래도 번듯한 프로젝트 하나는 완성해야되지 않겠습니까?!
이 공간에 기록한 것은 계속 수정될 것이고, 수정 횟수에 따라 날짜를 기록할 계획입니다.
<React 프로젝트 - 음악 추천 사이트> + 추천이 다 구현되면 코멘트 기능도 추가할 예정 !
1. 프로젝트 한 줄 소개
음악 추천 서비스
youtube music 형식 + 사운드클라우드 코멘트 기능 추가
2. 기능
(1) 메인 화면
- 헤더 ~ 로고 (고정)
~ 카테고리 (홈, 내 보관함)
~ 스크롤 시, 헤더 고정
- 검색창
- 인기 차트 (가로 목록으로 나오게)
- 추천 노래 (제목, 그에 해당하는 플리)
ex. 비가 추적추적 내리는 날 + 플리 나열
- 추천 가수 (가수 클릭 > 가수 설명과 노래 나오게)
- 장르 별 추천 노래 (힙합, R&B, 발라드, K-pop...)
- 하단 ^(위 화살표) 클릭 시, 현재 재생중인 것 뜨도록
(2) 검색
- 음악 검색 api로 DB 대체 (Spotify API > Web API 사용)
- 참고: https://developer.spotify.com/documentation/web-api
(3) 내 보관함
- 헤더
- 내 정보
- 좋아요 한 가수
- 좋아요 한 노래
(4) 노래 재생
- 카테고리: 가사, 코멘트, 홈화면
- 가사: 가사 보여주기
- 코멘트, 사람들 댓글 보여주기 + 댓글 다는 기능
- 홈화면: 배경에 앨범 커버, 밑에 노래 재생바
3. 컴포넌트
- App (페이지 연결을 위한 창)
- home (메인 페이지)
- header (헤더)
- recMusicList (추천 음악리스트 모음 > 4개의 요소)
- recMusicBox (추천 음악 리스트의 한 요소)
- allMusic (전체보기)
- myMusic (내 보관함)
- playMusic (재생 화면)
- playMusicLyric (재생 화면 > 가사 부분)
- playMusicPlaylist (재생 화면 > 재생목록 부분)
- playlistBox (재생 목록 컨텐츠 하나)
- playlistMusicBox ( 내 보관함 전용 재생목록 하나)
- myMusicPlaylistItem (재생 목록 썸네일 ~ 사진 4개 모여있는 곳)
- storedPlaylist(한 재생목록의 재생목록 정보 + 재생목록 컨텐츠 모음)
- playBar(노래 클릭 시, 재생바)
4. 깃페이지 링크
https://purple-sunflower.github.io/MIMS/
5. 레퍼런스 사진
