HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🤎
프론트엔드 데브코스 5기 교육생
/
🐱
조윤호팀
/
🎹
팀 프로젝트
팀 프로젝트
🎹

팀 프로젝트

 🔍 Service

“ 내가 노래 추천해 줄게 ~ 얍! ”

☝
얍! (Yap!)은 누구에게나 열려있는 가벼운 분위기의 음악 공유 플랫폼입니다. 🙌 여기에서는 좋아하는 음악을 가볍게 추천하고, 다양한 음악을 손쉽게 알 수 있습니다. 누구나 자신의 음악 취향을 자유롭게 나누고, 음악의 새로운 세계를 함께 탐험할 수 있는 공간을 제공합니다.

기획 배경

 
“매일 반복되는 일상 속! 좋아하는 음악 만큼은 (내가 노래 추천해줄게 얍~! 🙋‍♂️)”
저희는 데브코스 슬랙의 노동요 나눔 채널에서 노동요를 공유하는 모습이 인상 깊었습니다.
음악은 우리가 서로를 더 알아갈 수 있는 다리라고 생각하며, 이 서비스는 그 다리의 역할을 할 수 있는 서비스라고 생각합니다.
이 서비스를 통해 모든 이들이 자신만의 소소하고 확실한 행복을 만들어 나가고, 서로의 다양한 음악적 취향을 경험하며 소통하는 기회를 가질 수 있으면 좋겠습니다. 👍
 

기대 효과


🧚
다양성과 새로운 발견
서비스를 통해 모든 이들은 자신만의 음악 취향을 공유하면서, 새로운 음악을 발견하는 기회를 얻습니다. 이는 다양한 음악 경험을 통해 개인의 취향을 더 풍부하게 만들어줄 것입니다.
 
 
😗
일상 속의 즐거움
서비스를 통해 모든 이들은 일상적인 활동에서도 음악을 가볍게 즐길 수 있습니다. 코딩, 운동, 휴식 중에도 자신의 음악을 발견하고 공유하면서, 일상이 더욱 즐거워질 것입니다.
🤝
소통과 연결
서비스는 음악을 중심으로 한 소통의 플랫폼으로, 사용자들은 음악을 통해 서로에게 더 가까이 다가갈 수 있습니다. 다양한 음악 취향을 나누고 의견을 나누며, 새로운 친구나 음악 동호회와 연결되는 기회를 제공합니다.
💎
새로운 아티스트와 음악 시장 지원
서비스는 대중적이지 않은 아티스트들과 새로운 음악을 소개함으로써 음악 시장의 다양성을 증진시키고, 숨은 보석을 찾아주는 역할을 합니다. 이는 아티스트들에게 더 많은 기회와 관심을 제공하며, 음악 시장 전반을 활성화시킬 것입니다.
 

💡
서비스를 통해 얻을 수 있는 이러한 다양한 효과들은 음악을 통해 모든 이들이 더욱 풍요로운 경험을 쌓을 수 있게 하며, 음악이 일상에서 더욱 중요한 역할을 수행할 수 있도록 지원합니다.
 

주요 기능


🔒
사용자 인증

  • 회원 가입을 할 수 있습니다.
  • 로그인을 할 수 있습니다.
  • 로그아웃을 할 수 있습니다.

📜
포스트

  • 특정 카테고리의 포스트 목록을 볼 수 있습니다.
  • 특정 사용자의 포스트 목록을 볼 수 있습니다.
  • 특정 카테고리에 포스트를 작성/수정/삭제를 할 수 있습니다.
  • 포스트의 상세 정보를 볼 수 있습니다.

👍
댓글 & 좋아요

  • 특정 포스트에 좋아요를 등록/취소 할 수 있습니다.
  • 특정 포스트에 댓글을 작성/삭제 할 수 있습니다.

📢
알림

  • 나의 알림 목록을 확인할 수 있습니다.

🔍
검색

  • 포스트 / 유저를 검색할 수 있습니다.

💭
내 정보

  • 자신의 닉네임, 프로필 이미지, 작성한 포스트 목록, 좋아요 한 포스트 목록을 볼 수 있습니다.
  • 자신의 정보를 수정할 수 있습니다.

👨‍💻
사용자 정보

  • 사용자의 닉네임, 프로필 이미지, 작성한 포스트 목록을 볼 수 있습니다.
  • 사용자를 팔로우 할 수 있다.
🗣
메시지

  • 상대방에게 메시지를 전송할 수 있다.
  • 상대방에게 메시지를 전달 받을 수 있다.
  • 목록을 통해 다른 유저들과 나눈 메시지를 확인할 수 있다.
🎶
뮤직 플레이어

  • 음악을 재생/일시정지 할 수 있다.
  • 음악의 볼륨을 조절할 수 있다.
  • 음악의 원하는 구간으로 이동할 수 있다.
 

Stack

 🚀 Stacks


TypeScript
TypeScript
React.js
React.js
Zustand
Zustand
styled-component
styled-component
TanStack Query
TanStack Query

 🛠  Tools


Git
Git
VSCode
VSCode
NPM
NPM
Vite
Vite
Node - v20.9.0
Node - v20.9.0

 👥  Collaboration


GitHub - Main
GitHub - Main
Notion - Sub
Notion - Sub
page icon
Discord
Slack
Slack
 
 
 
 
공식 문서
  • TanStack Query
  • Zustand
  • Styled-Components

🔏 API 명세서

API 명세서
API 명세서
docs.google.com

⚙️ 기술 명세

API 명세서
API 명세서
docs.google.com

 🚸 Conventions

 
 

🚜 PR Conventions

Issue
## ✏️ 구현 사항 - [] 할일 * ## 📝 구현 사항 설명 <!-- 구현되어야 할 기능이나 수정되어야 할 이슈를 적어주세요 -->
TASK - PR
## #️⃣연관된 이슈 > ex) #이슈번호, #이슈번호 ## 💡 핵심적으로 구현된 사항 <-- 문제를 해결하면서 주요하게 변경된 사항들을 "스크린샷"과 함께 적어 주세요 --> * ## ➕ 그 외에 추가적으로 구현된 사항 없음 <-- 없으면 "없음" 이라고 기재해 주세요 --> <-- 주 Task 이외의 작업한 변경 사항 --> * ## 🤔 테스트,검증 && 고민 사항 <-- 배포에서 체크해봐야 할 부분 --> <-- 궁금한 점, 팀원들의 의견이 필요한 부분, 크로스체크가 필요한 부분 등 --> * ### 📌 PR Comment 작성 시 Prefix for Reviewers * P1 : 꼭 반영해 주세요 (Request Changes) - 이슈가 발생하거나 취약점이 발견되는 케이스 등 * P2 : 반영을 적극적으로 고려해 주시면 좋을 것 같아요 (Comment) * P3 : 이런 방법도 있을 것 같아요~ 등의 사소한 의견입니다 (Chore)
 
💡
PR 에 대한 리뷰는 팀원 모두다 진행
PR 이 등록된 시간을 기준으로 모든 팀원 들은 24시간내에 리뷰를 작성합니다 👍 ( 12일 11시에 등록된다면 13일 내에 리뷰를 완료합니다! )
 
  • 만약 현재의 작업량이 많거나🤦 혹은 다른 문제🤒🤕로 24시간내에 리뷰를 할 수 없다면
    • 반드시 Slack 에 사전 공지를 통해 알립니다. 🙋‍♂️
 
  • 모든 리뷰는 서로를 배려하며! 이해가 안가는 부분은 반드시 작업자에게 질문!
참고 자료
  • PR 예시
 

 
 
 
 

 🙋 Members

👨‍💻
이재영
👩‍💻
안정은
👨‍💻
신종욱
👨‍💻
최훈오 좋다 좋아

 🙌 Ground Rule

1️⃣
최대 1 시간 ☝️ 고민하고 문제 공유하기
자세히…❓
  • 규칙 : 고민 중인 문제에 1시간 정도를 할애했지만 해결하지 못했을 경우, 즉시 팀원들과 문제를 공유합니다.
 
  • 이유 : 시간을 제한함으로써 문제 해결을 빠르게 도모하고, 팀원 간 지식 공유를 촉진합니다.
2️⃣
비 동기적 🤔 커뮤니케이션
자세히…❓
  • 규칙 : 실시간 대화가 필요할 때를 제외하고는 비동기적 커뮤니케이션을 합니다.
 
  • 이유 : 요청사항과 용건등을 정리해서 전달함으로써 상대방의 주의를 방해하지 않고 할 일에 집중할 수 있습니다.
 
  • 예외 상황 : 급한 이슈가 발생하여 해결이 필요할 때 → 실시간 대화로 해결합니다.
3️⃣
질문을 무서워 하지 않기 🙀
자세히…❓
  • 규칙 :
      1. 정리해서 질문하기 : 질문을 하기 전에 질문 내용을 한번 정리합니다.
      1. (질문자) 모르는 것이 있다면, 이해될 때 까지 질문합니다. (답변자) 같은 질문이 100 번이 되더라도, 착실히 답변합니다.
      1. 모르는 것은 모른다고 말합니다. 서로가 채워줄 수 있으므로 꼭 말합니다.
 
  • 이유 : 정리하면서 해결되는 경우가 있을 수 있고, 정리해서 물어보면 좋은 답변을 얻을 수 있습니다. 또한 물어보는 것이 쉬워야 의견 공유 및 더 풍성한 리소스를 바탕으로 팀 전체의 역량을 향상시킬 수 있습니다.
4️⃣
규칙적으로 스프린트 회고를 진행하기 🤷‍♂️
자세히…❓
  • 규칙 : 각 스프린트가 끝날 때마다 팀원들은 스프린트 회고를 진행합니다.
 
  • 이유 : 회고를 통해 팀의 강점과 약점을 파악하고, 계속해서 개선하는 기회를 제공합니다.
 
  • 회고 방법 : KPT, GBT 등이 있습니다.
 
  • 스프린트 기간 : 총 1달이므로 1주 단위로 진행합니다.
5️⃣
코드 리뷰는 착실하게 규칙을 지켜 진행하기
자세히…❓ 
  • 규칙: 코드 리뷰는 지속적으로 이루어져야 하며, 모든 팀원은 주기적으로 리뷰어 역할을 수행합니다.
 
  • 이유: 코드 리뷰는 품질 향상과 팀원 간 지식 공유를 위한 중요한 수단입니다.
 
  • 상세규칙:
    • 코드 리뷰는 push한 뒤 하루 내로 수행합니다. ( 시간 기준 )
    • dependency가 있는 작업이라면 1시간 내로 수행합니다
6️⃣
매주 함께 성장을 위해 페어 프로그래밍💻 을 진행하기
자세히…❓
  • 규칙
    • 1주일에 한번 씩 Sprint시간에 파트너를 정하여 진행합니다.
    • 파트너와 상의하여 페어 프로그래밍을 진행할 Task를 사전에 꼭 전달합니다.
 
  • 이유: 페어프로그래밍은 실시간으로 아이디어를 교환하고 피드백을 받을 수 있는 효과적인 방법입니다. 특히 새로운 기술이나 기능 구현 시 유용합니다.
 
  • 추가 규칙: 페어프로그래밍 시, 역할을 교대로 하거나 주기적으로 변경하여 모든 팀원이 참여할 수 있도록 합니다.
7️⃣
함께! 성장을 위해 정기적인 학습🧐 및 커피챗☕️ 세션
자세히…❓
  • 규칙:
    • 주기적으로 팀원들은 새로운 기술이나 도구에 대한 학습 세션을 진행합니다.
    • 학습과 관련된 내용은 사소한 내용이라도 공유합니다.
    • 커피챗을 자주 하며 꼭 학습과 관련된 내용이 아니여도 괜찮으므로 잡담도 좋습니다.
 
  • 이유: 프로젝트 기간 동안 새로운 기술의 도입이나 업그레이드가 필요할 수 있으며, 지속적인 학습을 통해 팀 전체의 역량을 향상시킬 수 있습니다. 그리고 학습 내용을 공유함으로써 개인의 도메인 지식이 팀의 지식이 될 수 있도록 합니다. 또한 잡담을 많이나누는 것이 곧 자유롭게 의견을 나눌 수 있는 환경을 조성하는 일이기에 경쟁력을 갖출 수 있습니다.
 

📝 회의록