Hype-FE

잘 알려지지 않은 숨은 명곡을 공유하고 대결과 투표를 통해 더 좋은 곡을 알아가는 서비스

🎼 즐겨 듣는 명곡 추천

즐겨 듣는 노래를 검색하고 글을 작성하여 다른 사용자들에게 추천할 수 있습니다.

🆚 다른 추천 곡과의 대결

다른 사용자가 추천한 노래에 대결을 신청하고 투표를 받을 수 있습니다.

💎 대결 결과와 유저 랭킹 확인

대결 종료 후 승패를 확인하고 승리 포인트를 얻을 수 있습니다. 포인트 기준으로 산정되는 주간 랭킹을 확인할 수 있습니다.

👀 다른 사용자의 추천 음악 따라 듣기

다른 사용자가 추천한 노래들을 확인할 수 있습니다.

Hype 서비스 바로가기

💻 프로젝트 개요

내가 좋아하는 음악을 추천하고자 하는 욕구가 있는 사람들, 내가 아직 모르는 음악들을 추천받고 싶은 사람들을 대상으로 하는 음악 대결 서비스 입니다. 음악을 공유하는 사람들은 추천글을 쓰고 좋아요와 다른 노래와의 대결을 생성해 다른사람들의 반응을 확인할 수 있습니다. 노래를 추천받고 싶은 사람들은 다른사람이 제공하는 추천글, 이상형월드컵 형식으로 제공되는 음악 대결에 투표하는 것을 통해 게임처럼 자신이 모르던 장르의 노래를 새로 알게 될 수 있습니다.

🛠 Used Stacks

언어
프레임워크
라이브러리
상태관리
패키지
Formatter
배포
협업툴
IDE

👥 팀원

박민형	남주영	김성현	원다연
프론트엔드 개발	프론트엔드 개발	프론트엔드 개발	프론트엔드 개발

👓 멘토

오프

🌴 Commit Convention

태그 이름	설명
[CHORE]	패키지 매니저 설정, 모듈 설치 등
[FIX]	버그 수정
[FEAT]	새로운 기능 구현
[DOCS]	README 등의 문서 개정
[REFACTOR]	파일 이름 변경, 구조 변경 등의 전면 수정
[TEST]	테스트 코드 추가, 삭제, 변경 등

✨ Branch Strategy

git 전략 - git flow 전략

• main : 초기 프로젝트 설정 브랜치
• 이슈 단위로 브랜치 → main 브랜치
• 라벨/#이슈번호-내용(소문자) : 개인 작업 브랜치(ex) feature/#4-add-login-ui)

🗂 프로젝트 폴더 구조

📁 public
|_ 📁 fonts
|_ 📁 images
📁 src
|_ 📁 api
|_ 📁 components
|_ |_ 📁 battle
|_ |_ 📁 common
|_ |_ 📁 login
|_ |_ 📁 main
|_ |_ 📁 post
|_ |_ 📁 profile
|_ |_ 📁 ranking
|_ 📁 constants
|_ 📁 hooks
|_ 📁 pages
|_ |_ 📁 auth
|_ |_ 📁 battle
|_ |_ 📁 post
|_ |_ 📁 profile
|_ |_ 📁 ranking
|_ 📁 styles
|_ 📁 utils
|_ .env.local
|_ .eslintrc.json
|_ .gitignore
|_ .prettierrc.json
|_ next.config.js
|_ package.json
|_ README.md
|_ tsconfig.json
|_ yarn.lock

☘ environment variables

.env.local

NEXT_PUBLIC_MUSIC_SEARCH_API_URL =
NEXT_PUBLIC_API_URL =
NEXT_PUBLIC_AUTH_API_URL =
NEXT_PUBLIC_ORIGIN =

🔑 Install

yarn or yarn install //package.json으로부터 의존성 모듈 설치

yarn dev //실행