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 | 펼칠 시 스크린샷

🏷 폴더 구조

펼칠 시 파일 상세 구조

📦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. 로그인 화면

2. 메인화면

3. 검색기능 구현

4. 앨범 디테일 화면

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

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

6. 플레이 리스트

⚙️ 기술 스택

• 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