Skip to content

Latest commit

 

History

History
236 lines (168 loc) · 7.28 KB

README.md

File metadata and controls

236 lines (168 loc) · 7.28 KB
Raw

Manlody

사용기술 : firebase react-router-dom styled-components axios react-query @reduxjs/toolkit react-redux shortid Typescript antd @ant-design/icons react-slick @types/react-slick slick-carousel react-icons/ai spotify-web-api-node react-spotify-web-playback

실행법

  1. yarn start로 클라이언트 실행

MANLODY 🎵🎶

🖥️ 프로젝트 개요

  • React.js TypeScript
  • Spotify Web API & Web Playback SDK를 사용하여 다양한 앨범 & 아티스트의 곡 등을 요청하여 음악을 플레이하는 페이지 구현

📍 사이트 주소

MANLODY

🕰️ 개발 기간

2023.08.07 ~ 2023.08.14


🖼 와이어프레임

Figma | 펼칠 시 스크린샷

manlody-wireframe


🏷 폴더 구조

펼칠 시 파일 상세 구조 
📦src
 ┣ 📂api
 ┃ ┣ 📜accesstoken.ts
 ┃ ┣ 📜comments.ts
 ┃ ┣ 📜likes.ts
 ┃ ┗ 📜spotify.ts
 ┣ 📂components
 ┃ ┣ 📂Dashboard
 ┃ ┃ ┣ 📜Dashboard.tsx
 ┃ ┃ ┣ 📜Player.tsx
 ┃ ┃ ┗ 📜TrackSearchResult.tsx
 ┃ ┣ 📂detail-album
 ┃ ┃ ┗ 📂review
 ┃ ┃ ┃ ┣ 📜AlbumReview.tsx
 ┃ ┃ ┃ ┣ 📜CreatedTime.tsx
 ┃ ┃ ┃ ┣ 📜Review.tsx
 ┃ ┃ ┃ ┗ 📜ReviewBox.tsx
 ┃ ┣ 📂GetAccessToken
 ┃ ┃ ┗ 📜GetAccessToken.tsx
 ┃ ┣ 📜Error.tsx
 ┃ ┣ 📜FormTag.tsx
 ┃ ┣ 📜Header.tsx
 ┃ ┣ 📜Loading.tsx
 ┃ ┣ 📜NavBar.tsx
 ┃ ┣ 📜NavLiFavoriteSong.tsx
 ┃ ┣ 📜Profile.tsx
 ┃ ┣ 📜PuaseSlider.tsx
 ┃ ┗ 📜Slider.tsx
 ┣ 📂hooks
 ┃ ┣ 📜useLikes.tsx
 ┃ ┣ 📜useReview.tsx
 ┃ ┗ 📜useUser.tsx
 ┣ 📂pages
 ┃ ┣ 📜DetailAlbum.tsx
 ┃ ┣ 📜FavoriteSongs.tsx
 ┃ ┣ 📜Home.tsx
 ┃ ┣ 📜index.ts
 ┃ ┣ 📜PlayList.tsx
 ┃ ┗ 📜SocialLogin.tsx
 ┣ 📂redux
 ┃ ┣ 📂config
 ┃ ┃ ┗ 📜configStore.tsx
 ┃ ┗ 📂modules
 ┃ ┃ ┣ 📜playUris.ts
 ┃ ┃ ┗ 📜rgb.ts
 ┣ 📂shared
 ┃ ┣ 📜Layout.tsx
 ┃ ┗ 📜Router.tsx
 ┣ 📂types
 ┃ ┣ 📜react-color-extractor.d.ts
 ┃ ┗ 📜react-spotify-web-playback.d.ts
 ┣ 📜App.css
 ┣ 📜App.test.tsx
 ┣ 📜App.tsx
 ┣ 📜firebase.tsx
 ┣ 📜GlobalStyle.tsx
 ┣ 📜index.css
 ┣ 📜index.tsx
 ┣ 📜react-app-env.d.ts
 ┣ 📜reportWebVitals.ts
 ┗ 📜setupTests.ts

🧑‍🤝‍🧑 팀원 소개

  • 팀명 : 파이브가이즈
  • 팀원 및 담당 구현 기능
역할 이름 담당 구현 기능 GitHub
팀장 서경모 앨범리뷰CRUD, 로그인 기능 https://github.com/CTDKSKM
팀원 김우리 모달, css 스타일링 https://github.com/wooriki
팀원 이동준 Spotify Web API 인증, Playback 재생, 검색 및 데이터 호출 https://github.com/podoDJ
팀원 조진명 좋아요 기능, 플레이리스트 추가기능 https://github.com/nbcnvc
팀원 황대성 유저정보 수정 기능 https://github.com/hwangdae

📌 주요 기능

Sopotify Web Api

  • 커스텀 음악플레이어 구성
  • 나만의 음악리스트 생성

SPOTIFY API

  • react query, axios 활용하여 SPOTIFY API 데이터 GET 요청한다
  • 검색창 필터링으로 공공데이터 필터기능을 구현한다


🎬 페이지 스크린샷

1. 로그인 화면

loginPage


2. 메인화면

mainPage


3. 검색기능 구현

search


4. 앨범 디테일 화면

albumPage


4. 앨범 디테일 화면 - 플레이리스트 추가 기능

addPlayList


5. 앨범 디테일 화면 - 플레잉나우 추가 기능

playingNow


6. 플레이 리스트

playList


⚙️ 기술 스택

  • React.js

⚙️ 사용한 라이브러리

  • styled-components
  • react-router-dom
  • react-redux
  • redux-devtools-extension
  • react-query
  • react-query-devtools
  • axios
  • react-spotify-web-playback
  • react-bootstrap
  • slick-carousel

⚙️ 버전 관리 시스템

  • Git/Github

⚙️ 협업툴

  • Visual Studio
  • Slack
  • Figma