---

"음악과 감정을 품은 이야기, Here Hear"

😄 멤버 소개

👑김주하	송찬환	함소명	김서영	설혜현	신승헌
BackEnd Infra	Backend WearOS	Backend	Frontend Design	Frontend Design	Frontend

🎵 프로젝트 소개

진행 기간

2023.10.09 ~ 2023.11.17

서비스 소개

음악과 함께 추억과 감정을 다른 사람들과 공유할 수 있는 플랫폼

기획 배경

[문제 제기]

• 내가 좋아하는 노래를 다른사람들도 들어 줬으면 좋겠다.
  • 나만 아는 노래가 많은 사람들에게 유명해졌으면 좋겠다.
• 노래에 대한 호불호는 없지만 막상 찾아 듣기는 귀찮다.
  • 아무 노래나 들어도 되지만 신선한 음악을 듣고 싶다.
• 새로운 노래를 듣고 싶지만 랭킹 별로 정렬 된 노래를 듣기에는 업데이트 주기도 느리고 흔하다.
  • 하지만 특정상황에 누군가가 추천해주는 랜덤한 노래를 들으면 막연히 아무거나 듣는 것 보다 경험적으로 좋다.

[솔루션]

내가 좋아하는 노래를 지금 이 시간, 이 상황에 맞는 태그나 코멘트와 함께 지금 이 장소에 음악을 뿌려보자!

🛠 개발 환경

협업 도구 :

운영 및 배포 :

버전 상세 정보

• AWS EC2
  
• Docker : 24.0.5
  
• Nginx : 1.18.0 (Ubuntu)
  
• Jenkins : 2.417
  
• Prometheus : 2.45.1
  
• grafana : 10.2.2
  

백엔드 :

버전 상세 정보

• Java 17
  
• IntelliJ IDEA Ultimate
  
• Spring Boot : 3.1.5
  
• MySQL : 8.0.33
  
• JPA : 3.1.5
  
• Spring Security : 6.1.x
  
• QueryDsl : 5.0.0
  
• MapStruct : 1.5.3
  

프론트엔드 :

버전 상세 정보

• Visual Studio Code
• React : 18.2.0
  
• Axios : 1.6.0
  
• TypeScript : 5.0.2
  
• Recoil : 0.7.7
  
• npm : 9.5.1
  
• Vite : 4.4.5
  
• PWA
• chart.js : 4.4.0
  
• styled-components : 6.1.0
  
• Node.js : 18.16.1
  

워치 :

버전 상세 정보

• Android Studio : 2022.3.1
  
• Kotlin : 1.9.0
  
• Jetpack Compose : 1.0.0
  
• Retrofit2 : 2.9.0
  
• Google Maps : 2.11.4
  
• coil-compose : 2.4.0
  

4. 주요 기능

지도(메인 화면)	음악 등록
1. 현재 시간으로부터 -3h, +3h 사이의 음악들을 볼 수 있습니다. 2. 물음표를 누르면 HereHear 사용 방법을 볼 수 있습니다. 3. 반경 2km 내의 음악만 볼 수 있습니다. 4. 오른쪽 상단 위치 모양을 누르면 내 위치로 돌아 갈 수 있습니다. 5. 음악 클릭 시, 화살표를 누르면 반경 내 음악들을 모두 볼 수 있습니다. 6. 실시간으로 다른 유저가 등록한 음악, 삭제한 음악이 지도에 반영 됩니다.	1. '+' 버튼 클릭시, 음악 검색 페이지로 이동합니다. 2. 가수, 제목 등 입력해 음악을 선택 할 수 있습니다. 3. 현재 상황에 맞는 태그를 선택 후 저장합니다. 4. 선택한 음악과 남기고 싶은 메시지를 작성하여 등록합니다. 5. 지도에 등록한 음악 앨범이 등록된 것을 볼 수 있습니다.
유튜브 음악 듣기	유튜브 재생목록 추가
1. 카카오 로그인시, 기본으로 제공되는 유튜브 링크창에서 음악을 들을 수 있습니다.	1. 기본으로 제공되는 유튜브 링크창에서 음악을 들을 수 있습니다. 2. 구글 로그인시, 유튜브 재생목록에 해당 음악을 추가하여 들을 수 있습니다.
Spotify 인앱 재생	전체 통계
1. 기본으로 제공되는 유튜브 링크창에서 음악을 들을 수 있습니다. 2. Spotify 로그인시, Here Hear 앱 안에서 바로 노래를 들을 수 있습니다.	1. 전 주 유저들이 좋아요한 인기 곡 Top 4를 볼 수 있습니다. 2. 전 주 유저들이 음악 등록시, 많이 등록한 상황 Top 5를 볼 수 있습니다. 3. 전 주 유저들이 가장 많이 들은 음악을 볼 수 있습니다.

e. 기타 기능

기타 기능 보기

온보딩페이지	팔로우
처음 사용하는 사용자를 위해 이미지와 함께 서비스 설명	팔로워/팔로잉 인원 목록 확인 가능, 토글 버튼으로 각 페이지에서 적용/해제 기능
좋아요한 노래	등록한 노래
음악 상세 페이지에 좋아요했던 노래 목록 출력	본인이 등록한 노래 출력
뱃지	음악 노트
사용자가 서비스를 이용하면서 특정 이벤트 조건을 달성하면 뱃지를 제공	사용자가 업로드한 노래의 좋아요 수, 들은 노래 데이터를를 기반으로 한 통계를 출력

안드로이드 WearOS App

• 스마트폰 앱의 기능을 워치 앱으로 구현하여 사용자가 보다 쉽게 서비스를 이용할 수 있는 플랫폼을 제공합니다.

WearOS 앱 화면 상세

인증 절차 (코드입력)	지도 (메인 화면)
1. 실행시 인증코드 입력 화면 표시 2. 앱 로그인 -> 설정 -> 핀 번호 발급 에서 출력된 코드 입력 3. 최초 로그인 후 입력코드를 파일로 저장하여 자동 로그인	4. 메인 화면 진입시 Google Maps에 등록된 음악을 마커로 표시 5. 하단 리스트, 마이페이지 버튼을 통해 이동 가능
음악 조회	음악 상세 정보
6. 메인화면 하단의 리스트 버튼을 클릭 7. 반경 2km 이내에 등록된 음악 리스트를 스와이프를 통해 넘길 수 있음	8. 음악 조회 페이지에서 하단으로 스크롤 9. 등록한 사용자의 정보와 코멘트가 표시 10. 음악 재생 버튼 클릭시 spotify 앱으로 이동
마이페이지	최근 들은 노래 목록
11. 메인화면 하단의 마이페이지 버튼 클릭 12. 개인 정보 및 기록에 대한 정보 열람 가능	13. 마이페이지 -> 최근 들은 노래 버튼 클릭 14. 최근 재생한 음악의 목록을 조회 가능
좋아요 노래 목록
15. 마이페이지 -> 좋아요 노래 목록 버튼 클릭 16. 좋아요 한 노래의 목록을 조회 및 좋아요 취소 가능

📚산출물

📗시스템 구성도

📘ER Diagram

📙API 명세

📒화면 정의서 & 와이어프레임

📕요구사항 정의서

🗂️ 프로젝트 파일 구조

Back

📦herehear
 ┣ 📂achievement
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┣ 📂mapper
 ┃ ┣ 📂observer
 ┃ ┃ ┣ 📂aop
 ┃ ┃ ┣ 📂events
 ┃ ┣ 📂repository
 ┃ ┗ 📂service
 ┣ 📂admin
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┣ 📂mapper
 ┃ ┣ 📂repository
 ┃ ┗ 📂service
 ┣ 📂entity
 ┃ ┗ 📂type
 ┣ 📂file
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┣ 📂repository
 ┃ ┣ 📂service
 ┃ ┗ ┗ 📂impl
 ┣ 📂global
 ┃ ┣ 📂config
 ┃ ┣ 📂exception
 ┃ ┣ 📂filter
 ┃ ┣ 📂oauth
 ┃ ┃ ┣ 📂converter
 ┃ ┃ ┣ 📂enums
 ┃ ┃ ┣ 📂handler
 ┃ ┃ ┣ 📂model
 ┃ ┃ ┃ ┗ 📂social
 ┃ ┃ ┗ 📂service
 ┃ ┣ 📂response
 ┃ ┗ 📂util
 ┣ 📂history
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┃ ┣ 📂request
 ┃ ┃ ┗ 📂response
 ┃ ┣ 📂mapper
 ┃ ┣ 📂repository
 ┃ ┗ 📂service
 ┣ 📂like
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┃ ┣ 📂request
 ┃ ┃ ┗ 📂response
 ┃ ┣ 📂mapper
 ┃ ┣ 📂repository
 ┃ ┗ 📂service
 ┣ 📂member
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┃ ┣ 📂request
 ┃ ┃ ┗ 📂response
 ┃ ┣ 📂mapper
 ┃ ┣ 📂repository
 ┃ ┗ 📂service
 ┣ 📂music
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┃ ┣ 📂request
 ┃ ┃ ┣ 📂response
 ┃ ┃ ┗ ┗ 📂spotify
 ┃ ┣ 📂mapper
 ┃ ┣ 📂repository
 ┃ ┃ ┗ 📂musicRepositoryImpl
 ┃ ┣ 📂service
 ┃ ┃ ┗ 📂musicServiceImpl
 ┃ ┗ 📂util
 ┣ 📂report
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┃ ┃ ┗ 📂request
 ┃ ┣ 📂mapper
 ┃ ┣ 📂repository
 ┃ ┗ 📂service
 ┣ 📂youtube
 ┃ ┣ 📂controller
 ┃ ┣ 📂dto
 ┗ ┗ 📂service

Front

📦FrontEnd/HereHear
 ┣ 📂node_modules
 ┣ 📂public
 ┃ ┣ 📂fonts
 ┃ ┣ 📂icons
 ┃ ┗ 📂images
 ┣ 📂src
 ┃ ┣ 📂apis
 ┃ ┃ ┣ 📂Login
 ┃ ┃ ┃ ┣ 📂Mutations
 ┃ ┃ ┃ ┗ 📂Quries
 ┃ ┃ ┣ 📂Map
 ┃ ┃ ┃ ┗ 📂Queries
 ┃ ┃ ┣ 📂Music
 ┃ ┃ ┃ ┣ 📂Mutations
 ┃ ┃ ┃ ┗ 📂Quries
 ┃ ┃ ┣ 📂Mypage
 ┃ ┃ ┃ ┣ 📂Mutations
 ┃ ┃ ┃ ┗ 📂Quries
 ┃ ┃ ┣ 📂Mystatistic
 ┃ ┃ ┃ ┗ 📂Quries
 ┃ ┃ ┣ 📂Statistics
 ┃ ┃ ┃ ┗ 📂Quries
 ┃ ┃ ┣ 📂YourPage
 ┃ ┃ ┃ ┗ 📂Quries
 ┃ ┣ 📂assets
 ┃ ┃ ┣ 📂Achievement
 ┃ ┃ ┣ 📂AlbumCover
 ┃ ┃ ┣ 📂CircleButton
 ┃ ┃ ┣ 📂ClockTest
 ┃ ┃ ┣ 📂Core
 ┃ ┃ ┣ 📂ItemBox
 ┃ ┃ ┣ 📂Landing
 ┃ ┃ ┣ 📂MusicBox
 ┃ ┃ ┣ 📂MusicItem
 ┃ ┃ ┣ 📂MyPage
 ┃ ┃ ┣ 📂Navbar
 ┃ ┃ ┗ 📂OnBoardingPage
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂atoms
 ┃ ┃ ┃ ┣ 📂AlbumCover
 ┃ ┃ ┃ ┣ 📂Button
 ┃ ┃ ┃ ┣ 📂CircleButton
 ┃ ┃ ┃ ┣ 📂Image
 ┃ ┃ ┃ ┣ 📂Input
 ┃ ┃ ┃ ┣ 📂Message
 ┃ ┃ ┃ ┣ 📂MessagePlus
 ┃ ┃ ┃ ┣ 📂Modal
 ┃ ┃ ┃ ┗ 📂Text
 ┃ ┃ ┣ 📂molcules
 ┃ ┃ ┃ ┣ 📂clocktest
 ┃ ┃ ┃ ┣ 📂Follow
 ┃ ┃ ┃ ┣ 📂ItemBox
 ┃ ┃ ┃ ┣ 📂MusicBox
 ┃ ┃ ┃ ┣ 📂MusicItem
 ┃ ┃ ┃ ┣ 📂Navbar
 ┃ ┃ ┃ ┣ 📂Play
 ┃ ┃ ┃ ┗ 📂TagSelect
 ┃ ┣ 📂Pages
 ┃ ┃ ┣ 📂AchievementPage
 ┃ ┃ ┣ 📂CharacterPage
 ┃ ┃ ┣ 📂FollowerPage
 ┃ ┃ ┣ 📂FollowingPage
 ┃ ┃ ┣ 📂LandingPage
 ┃ ┃ ┣ 📂LikePage
 ┃ ┃ ┣ 📂ListenedMusicPage
 ┃ ┃ ┣ 📂MusicPlayPage
 ┃ ┃ ┣ 📂MyPage
 ┃ ┃ ┣ 📂MyRegistPage
 ┃ ┃ ┣ 📂MyStatisticsPage
 ┃ ┃ ┣ 📂NicknamePage
 ┃ ┃ ┣ 📂OnBoardingPage
 ┃ ┃ ┣ 📂RegistMusicMentPage
 ┃ ┃ ┣ 📂SearchRegistMusicPage
 ┃ ┃ ┣ 📂StatisticPage
 ┃ ┃ ┗ 📂YourPage
 ┃ ┣ 📂states
 ┃ ┣ 📂styles
 ┗ ┗ 📂types

 

🤝협업

🔑Commit Convention

태그	설명	예시
feat	새로운 기능 추가	FEAT: 회원 로그인 기능 추가
fix	버그 수정	FIX: 회원 탈퇴 불가 수정
docs	문서 추가/수정/삭제	docs: README 추가
modify	코드 단순 수정	modify: 반환값 변경
refactor	코드 리팩토링	refactor: 피커 비즈니스 로직 리팩토링
chore	코드 외 패키지 매니저 수정사항	chore: 공백 제거

🔑Branch

• develop-be: 백엔드 프로젝트 dev 서버 배포
  
• develop-fe: 프론트엔드 프로젝트 dev 서버 배포
  
• prod-be: 백엔드 프로젝트 prod 서버 배포
  
• prod-fe: 프론트엔드 프로젝트 prod 서버 배포
  
• feature-be/[기능명]: 백엔드 기능 개발
• feature-fe/[기능명]: 프론트엔드 기능 개발