음성과 음악을 기반으로 실시간으로 공감하고 소통할 수 있는 커뮤니티
| 구분 | 기능 설명 | 관련 함수/컴포넌트 |
|---|---|---|
| 🔊 음성 클립 공유 | 사용자가 오디오 클립을 업로드하고, 공유 및 피드백 | SubmitClipForm, RecordButton, ChannelFeedAudio, CustomAudioPlayer |
| 💬 채널 기반 소통 | 공식 채널과 생성 채널을 자유롭게 선택, 소통 가능 | Channel (Page), ChannelContext, channels.ts, SideNavigation, ChannelLink |
| 🔗 음악 플랫폼 링크 임베딩 | 음악 플랫폼 링크를 자동으로 iframe 임베딩 | getYoutube, isFeedHaveLink, ChannelFeedMessage |
| 💡 실시간 소통 | 클립/댓글/좋아요를 통한 유저 간 즉각적 상호작용 | feeds.ts, replies.ts |
| 🔐 로그인/회원가입 | 이메일 기반 인증 및 사용자 세션 관리 | LoginModal, RegisterModal, AuthProvider, auth.ts, LoginModalContext signIn, signUp |
| 🛠️ 채널 생성/삭제 | 사용자 채널 생성 및 삭제 (권한 기반) | ChannelCreateForm,deleteChannel |
| ✏️ 피드 작성/삭제 | 채널 내 텍스트+오디오 피드 작성 및 삭제 기능 | InputFeed, feeds.ts, convertFeedToFeedData |
| 💬 댓글 기능 | 피드에 댓글 작성, 삭제 기능 포함 | FeedReplies, FeedReply, InputReplies, replies.ts |
| ❤️ 좋아요 기능 | 피드에 좋아요/좋아요 취소 기능 | like_count handleLikeToggle, |
| 🔍 검색 기능 | 채널, 사용자 검색 및 필터링 | HeaderSearch, SearchResultItem, filterChannels |
| 🧑 마이페이지 수정 | 사용자 프로필 정보 수정 가능 | MyPage, GenreSelect, UserProfile |
| 👤 유저 프로필 페이지 | 다른 사용자의 프로필, 장르 확인 가능 | UserProfilePage,UserProfileReadOnly,GenreSelectReadOnly |
| 🧭 채널 내 유저 검색 | 채널 가입자 중 유저를 검색/조회 가능 | UserList handleSearch |
| 🎵 추천 플레이리스트 | 사용자의 선호 장르 기반 추천 리스트 제공 | PlaylistSwiper |
| 📈 인기 클립/게시글 | 좋아요 기반으로 인기 콘텐츠 제공 | FeedList, ChannelLink,ClipSwiper,UserProfileLink |
| 🔄 무한 스크롤 | 피드/댓글/채널 목록 무한 스크롤 구현 | FeedList, DetailFeeds |
| 🚫 404 페이지 처리 | 비회원 접근/존재하지 않는 채널 접근 시 처리 | NotFound |
| 분류 | 기술 |
|---|---|
| 언어 | TypeScript |
| 프론트엔드 | React, Vite |
| 백엔드 (BaaS) | Supabase (인증, DB, 스토리지, 리얼타임) |
| 스타일링 | CSS Modules, 커스텀 애니메이션, 상태 전환 클래스 |
| 배포 | Vercel |
| 버전 관리 | Git, GitHub |
| 브랜치 전략 | GitHub Flow (기능 단위 브랜치 → PR → main 병합) |
음악을 좋아하고 공유하고 싶은 사용자들이
직관적이고 감각적인 인터페이스 안에서
자신의 취향을 기반으로 실시간으로 교류할 수 있는
음악 중심 SNS의 필요성을 느껴 기획하게 되었습니다.
- 🎧 음악 스트리밍 플랫폼은 많으나, 취향이 맞는 사람과의 소통은 어렵다
- 📱 기존 SNS는 텍스트/이미지 중심이라 음악 중심 소통이 제한된다
- 🎸 마이너한 장르(밴드, 재즈 등)를 위한 커뮤니티와 UI가 부족하거나 구식이다
| 서비스 이름 | 주요기능 | 장점 | 단점 |
|---|---|---|---|
| Youtube Music | 음악재생, 좋아요, 댓글, 플레이리스트 | 유튜브와 연결된 커뮤니티 알고리즘 기반 음악 추천 | 요금제 결제 필수, 한정된 커뮤니티 |
| Mule | 자작곡, 악기 중고 판매 커뮤니티 등의 게시판 | 오래된 사이트라서 다양한 유저층 존재 | 오래된 디자인, 가독성이 부족함 |
| slack | 메세지피드, 알림, 다양한 이모티콘 제공, 연결프로그램 | 서버 내에서 채널구분, 다양한 연결 프로그램 | 업무 중심 기능, 영상/음원 업로드 불편 |
| discord | 실시간 음성소통, 메세지 피드, 다양한 이모티콘 제공 | 무료로 지원하는 다양한 기능 커스텀 채팅봇 | 음성채팅으로는 기록이 남지 않음 |
| 기능 | 설명 |
|---|---|
| 🔊 음성 클립 공유 | 사용자들은 음성 클립을 올리고, 다른 사용자의 클립에 반응할 수 있어 진입장벽을 낮춤 |
| 🎙️ 개인 녹음 기능 | 마이크 녹음을 통해 사용자가 직접 음성을 업로드함으로써 참여도 향상 |
| 💬 채널 기반 소통 | 사용자는 공식 채널 혹은 자신이 생성한 채널을 자유롭게 선택해 관심사 기반으로 소통 가능 |
| 🔗 음악 플랫폼 링크 임베딩 | YouTube, Apple Music 등 외부 음악 플랫폼의 링크를 올릴 경우 자동으로 iframe 임베딩 처리 |
| ⚡ 실시간 상호작용 | 피드, 댓글, 좋아요 등을 통해 사용자 간 실시간 공감 및 반응이 가능 |
- 🎧 음악 취향이 맞는 사람들과 감상을 나누고 싶은 사용자
- 🎷 재즈, 힙합 등 마이너 장르 커뮤니티에 소속감을 느끼고 싶은 사용자
- 🧑🎤 음악 기반 커뮤니티 활동을 즐기는 10~30대 사용자층
- 프로젝트 진행 관리
- Vercel 배포
- Supabase 데이터베이스 관리
- 초기 레이아웃 설계
- 검색 기능
- 피드 전송 기능
- 피드 로드 기능
- 무한 스크롤 기능 구현
- 오디오 레코더 및 플레이어 구현
- 마이페이지
- 커스텀 alert 제작
- 채널페이지
- 채널 가입/탈퇴/삭제 구현
- ChannelContext 제작
- 피드/댓글 삭제 구현
- 피드/댓글 페이지 컴포넌트 레이아웃 제작
- 404페이지 제작(채널, 피드, 회원전용페이지)
- 링크임베딩
- 로그인/로그아웃 기능 개발
- 회원가입 기능 개발
- 채널 카테고리 별 사용자 필터링
- 전체 디자인 컨셉 정리 및 스타일 가이드 적용
- 전반적인 페이지 UI/UX 개선, 반응형 구현
- 사이드네비게이션 채널 정렬
- 채널 생성 기능
- 메인페이지 추천플레이리스트
- 메인페이지 인기 게시글
- 메인페이지 인기 클립
- 유저프로필페이지