🎵songpin-frontend🎵

EFUB 4기 SWS 3팀 "SongPin" 프로젝트 프론트엔드 레포지토리입니다.

나의 음악지도, SongPin

💻 프로젝트 소개

장소에는 기억과 소리가 담깁니다. 여러분이 언젠가 여행을 떠났을 때 들었던 음악을 기억하나요? 여행지에서 많이 들은 음악은 곧, 그 장소의 분위기를 상징하고 기억할 수 있는 추억을 지닌 음악이 됩니다. 여행이 끝나도 사람들은 그 음악을 들으면서 행복했던 여행의 순간들을 생생하게 회상합니다. 이러한 아이디어에서 'SongPin' 프로젝트가 탄생했습니다.

⏰ 개발 기간

• 24.07.01 - 24.08.09

📍 주요 기능

🌟 팀원 소개

김민용	최영서	이가빈	최윤진
@Ravende	@youngseoChoi23	@billy0904	@yoonjin-C
[Publish] 노래&장소 핀 검색/상세, 마이페이지 [API] Spotify API 연결 검색 기능, 음악 핀 검색, 음악 상세정보 조회, 장소 검색, 장소 상세정보 조회, 회원가입/로그인 관련 인증 기능	[Publish] 메인, 소개, 통계 페이지, 모달창 컴포넌트, 스낵바 컴포넌트 [API] 서비스의 종합 통계/장르별 통계 정보 기능, 마이페이지, 내 핀 피드, 내 플레이리스트, 북마크 관련 기능, 팔로우/팔로잉 기능	[Publish] 홈 페이지, 핀 생성 페이지, 핀 수정 페이지 [API] 홈 - 최근 핀&장소, 핀 생성/수정/삭제 기능, 알림 목록 조회 기능, 알림 실시간 SSE 기능, 카카오 지도 관련 기능	[Publish] 플레이리스트, 유저 페이지 , 모달창 컴포넌트 [API] 타 유저 검색, 타 유저 플레이리스트 조회, 유저의 팔로잉/팔로워 목록 조회, 플레이리스트 관련 기능

🛠️ 기술 스택

Environment

Language

Development

Deploy

📁 프로젝트 구조

📂
├─.github
│  ├─PULL_REQUEST_TEMPLATE
│  └─workflows
├─public
│  ├─favicon.ico
│  ├─index.html
│  └─styles.css
└─src
    ├─assets
    |   ├─ common
    |   ├─ filter
    |   ├─ images
    |   ├─ introduce
    |   ├─ map
    |   ├─ notification
    |   ├─ sidebar
    ├─ components
    |   ├─ AuthPage
    |   ├─ common
    |   ├─ CreatePinPage
    |   ├─ HomePage
    |   ├─ IntroducePage
    |   ├─ MusicSearchPage
    |   ├─ MyPage
    |   ├─ PlaylistPage
    ├─ constants
    ├─ pages
    |   ├─ AuthPages
    |   ├─ CreatePinPage
    |   ├─ EditPinPage
    |   ├─ HomePage
    |   ├─ IntroducePage
    |   ├─ MusicSearchPage
    |   ├─ MyPage
    |   ├─ PlaylistPage
    |   └─UsersPage
    ├─ services
    |   └─ api
    |       └─ reactQuery
    ├─ App.js
    ├─ index.js
    └─ store

📝 규칙

커밋 컨벤션

• gitmoji를 사용하는 것을 원칙으로 함.
  • 깃모지 + 한글 커밋 메시지 형식으로 작성
  • Gitmoji 컨벤션 예시
    • 💄 UI : UI, 스타일 관련 파일 추가 및 수정
    • ✨ feat : 새로운 기능 추가, 기존의 기능을 요구 사항에 맞추어 수정
    • 🐛 fix : 기능에 대한 버그 수정
    • 🛠️ build : 빌드 관련 수정
    • 🔧 chore : 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore
    • 👷 ci : CI 관련 설정 수정
    • 📝 docs : 문서 파일 추가 및 수정
    • 🎨 style : 코드 스타일, 포맷팅에 대한 수정
    • ♻️ refactor : 기능의 변화가 아닌 코드 리팩터링 ex) 변수 이름 변경
    • ✅ test : 테스트 코드 추가/수정
    • 🔖 release : 버전 릴리즈

PR 템플릿

# 구현 기능
  - 구현한 기능을 요약하여 정리합니다.

# 구현 상태 (선택)
  - img, gif, video...
  - 혹은 내용 정리

# Resolve
  - 이슈 태그(ex: #7)

• PR 체크 리스트
  • PR 제목 형식 : [Type] PR 제목
    • ex. [Chore] 프로젝트 구조 설정
    • 타입은 대문자로
  • label 설정
  • Code Review 요청 / 작업자 Assign
  • PR 확인한 사람은 확인 코멘트 달기. 작성자 외 2명 확인 후 마지막 사람이 merge

issue 규칙

• 각 기능에 맞는 이슈 템플릿 작성 (작업 및 변경사항 확인용)
• to-do에 구현해야할 기능을 작성하고, 구현이 끝나면 체크표시

branch 규칙

• 브랜치 네이밍 규칙: feat/#{issue 번호}
• • 이슈 생성후, branch에서 추가할 내용(ex. feat, design, refactor, ...)과 이슈번호를 branch 이름으로 생성
  • 예시: feat/#12, design/#27
• feat -> develop -> main(master) 순으로 merge
• feat : 각 기능을 개발하는 브랜치
• develop : 각 기능의 개발을 완료하고 테스트 완료 후 병합하는 브랜치
• main : 배포 브랜치