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

Yap! 기획안

 

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

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

기획 배경

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

기대 효과


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

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

주요 기능


🔒
사용자 인증
  • 회원 가입을 할 수 있습니다.
    • 로그인을 할 수 있습니다.
    • 로그아웃을 할 수 있습니다.

    • 📜
      포스트

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

    • 👍
      댓글 & 좋아요

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

    • 📢
      알림

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

    • 🔍
      검색

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

    • 💭
      내 정보

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

    • 👨‍💻
      사용자 정보

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

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

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

기술 스택

 🚀 Stacks


TypeScript
TypeScript
React.js
React.js
page icon
Zustand
styled-component
styled-component
TanStack Query
TanStack Query
React Router DOM
React Router DOM
 

 🛠  Tools


Git
Git
page icon
NPM
NPM
Vite
Vite
 
page icon
VSCode

 👥  Collaboration


GitHub - Main
GitHub - Main
Notion - Sub
Notion - Sub
page icon
Discord
Slack
Slack
Figma
Figma

 

User Story

유저 스토리
분류
사용자 분류
설명
Navbar
공용
서비스 로고 클릭을 통해 홈으로 이동 할 수 있다.
Navbar
공용
로그인 버튼을 통해 로그인 페이지로 이동할 수 있다.
Navbar
공용
검색 버튼을 통해 포스트와 유저를 검색 모달을 띄울 수 있다.
Navbar
로그인 사용자
프로필 사진을 클릭하여 My Page로 이동할 수 있다.
Navbar
로그인 사용자
로그아웃 버튼을 통해 로그아웃을 할 수 있다.
Navbar
로그인 사용자
알림 버튼을 통해 새로운 알림을 확인 할 수 있다.
Navbar
로그인 사용자
DM 버튼을 통해 DM Page로 이동할 수 있다.
Navbar
로그인 사용자
게시물 생성 버튼을 통해 게시물을 생성할 수 있다. ( URL Content Category )
Login Page
비 로그인 사용자
Email과 Password를 입력한후 로그인 버튼을 통해 로그인할 수 있다.
Login Page
비 로그인 사용자
회원 가입 버튼을 통해 회원 가입 Page로 이동할 수 있다.
Signup Page
비 로그인 사용자
회원 가입을 진행한 후 Home Page로 이동할 수 있다.
Home Page
공용
각 카테고리의 버튼을 통해 특정 카테고리의 게시물을 볼 수 있다.
Home Page
공용
(이전/다음)버튼을 통해 게시물을 넘겨가며 미디어를 재생 할 수 있다.
Home Page
로그인 사용자
좋아요 버튼을 통해 해당 게시물 ( 카드 ) 에 좋아요를 누를 수 있다.
Home Page
로그인 사용자
게시물( 카드 ) 를 클릭 하여 게시물( 카드 ) 상세 보기창을 열 수 있다.
Post Modal
로그인 사용자
게시물의 상세 정보(Like갯수, 댓글 )를 확인 할 수 있다.
Post Modal
로그인 사용자
사용자 본인의 게시물의 경우 수정 및 삭제를 진행 할 수 있다.
Post Modal
로그인 사용자
댓글을 볼 수 있고, 수정 및 삭제를 할 수 있다.
Post Modal
로그인 사용자
게시물에 업로드된 음악의 원문 링크로 이동할 수 있다.
Post Modal
로그인 사용자
게시물 작성자를 follow 할 수 있다.
Post Modal
로그인 사용자
게시물의 카테고리를 확인할 수 있다.
Post 수정 Modal
로그인 사용자
게시물을 수정 할 수 있다. ( URL Content Category )
User Page
공용
User 의 정보를 확인할 수 있다.
User Page
공용
User 의 작성 게시물을 확인 할 수 있다.
User Page
비 로그인 사용자
DM, 팔로우 버튼을 통해 로그인 권유 알림창을 확인 할 수 있다.
User Page
로그인 사용자
해당 User를 팔로우 및 언 팔로우를 할 수 있다.
User Page
로그인 사용자
DM 버튼을 통해 DM을 보낼 수 있다.
User Page
로그인 사용자
자신의 페이지일 경우 like를 누른 게시물을 확인 할 수 있다.
User Page
로그인 사용자
자신의 페이지일 경우 회원 정보를 수정할 수 있다.
회원 정보 수정 Page
로그인 사용자
User 본인의 닉네임, 패스워드, 프로필사진을 변경할 수 있다.
회원 정보 수정 Page
로그인 사용자
취소 버튼을 누르면 User Page로 돌아갈 수 있다.
DM Page
로그인 사용자
DM을 주고받은 사용자 목록을 확인 할 수 있다.
DM Page
로그인 사용자
DM을 보내고 받을 수 있다.
User Info Modal
공용
User 프로필을 Hover시 User의 정보(닉네임, 팔로워, 팔로잉)를 확인할 수 있다.
User Info Modal
공용
내부의 User프로필을 클릭시 해당 User Page로 이동 할 수 있다.
User Info Modal
비 로그인 사용자
팔로우 버튼, DM 버튼을 통해 로그인 권유 알림창을 받을 수 있다.
User Info Modal
로그인 사용자
팔로우 버튼을 통해 팔로우 또는 언 팔로우를 할 수 있다.
User Info Modal
로그인 사용자
DM 버튼을 통해 DM을 보낼 수 있다.

User Flow

와이어 프레임

 

개발 문화 & 컨벤션

🚸 Conventions

🚜 PR Conventions

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