[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. 레퍼런스 사진

전반적인 레퍼런스

 

로고

 

재생화면 시안

내 보관함 시안

재생목록 클릭시 화면 (재생목록 정보 + 재생목록 컨텐츠 모음)

재생바 시안