위플리 (WEPLi)
AIaaS 4기, 위플리
팀장, 풀스택 총괄 최용주 ｜ 백엔드, 프론트엔드 박재희 ｜ 백엔드, 프론트엔드 박성준
플레이리스트 랭킹페이지, 플레이리스트 검색페이지, 플레이리스트 내 플리 페이지, 플레이리스트 생성페이지,플레이리스트 수정페이지,플레이리스트 상세 페이지, 플레이리스트 관련 페이지 디자인 유찬민 ｜ 스테이지 리스트,스테이지 김석진 ｜ 프론트엔드팀장 메인페이지, 사이드바, 로그인, 회원가입, 마이페이지 이상혁
[역할 상세]
최용주 | 박재희 | 박성준 |
채팅 : 스테이지 내부에서 이루어지는 실시간 채팅 스테이지 내부 기능 : 소켓 타입별로 구분하여 싱크 및 각종 실시간 동작이 필요한 소켓 프로그래밍 네이버 SENS API 적용 유튜브 및 유튜브 IFRAME API 적용 깃 관리자, CI/CD 관리자 도메인, SSL | 백엔드 : JWT토큰, Spring security 구현, 이메일 인증, 플레이리스트 내부 기능, 스테이지 내부 기능, 네이버 소셜 로그인, 마이페이지 내부 기능 프론트엔드 : 마이페이지 디자인, 플레이리스트 및 마이페이지 내 에러 버그 처리 | 백엔드 : JWT토큰, Spring security 구현, 로그인, 마이페이지 내부 기능, 플레이리스트 내부 기능, 팔로우, 블랙리스트 기능 구현, 네이버 클라우드 버킷 이미지 추가 삭제 로직 구현 프론트엔드 : 타인 마이페이지 출력, 스테이지 검색기능 구현, 마이페이지, 소셜로그인, 플레이리스트 내 에러, 버그 처리 |
유찬민 | 김석진 | 이상혁 |
피그마를 이용한 아래 플레이리스트 관련 디자인 각 페이지별 로그인 상태 검사를 통한 페이지 이동 또는 사용 제한 플레이리스트 랭킹페이지 : 좋아요 순위, 팔로우 순위, 내가 좋아요 누른 플레이리스트, 내가 팔로우한 유저 플레이리스트 출력 플레이리스트 검색페이지 : 공개로 만들어진 플레이리스트 전체 출력, 각 항목별 검색 (제목,닉네임,장르,태그) 결과출력 내 플레이리스트 페이지 : 내가만든 플레이리스트 출력, 슬릭 라이브러리를 이용한 슬라이드 구현 플레이리스트 상세페이지 : 플레이리스트 (플레이리스트 정보 출력, 좋아요, 삭제, 곡 정보 출력, 댓글 출력 ), 댓글(작성,삭제) , 유튜브 API를 이용한 노래(검색, 추가), 추가된 곡(이미지 수정, 제목 수정, 업로더 수정, 노래 삭제) 플레이리스트 수정페이지 : 플레이리스트 정보 수정(제목, 이미지, 소개, 태그, 장르, 공개여부) | 피그마를 이용한 스테이지 리스트 및 스테이지 디자인. 스테이지 리스트 - 로그인 상태 및 인증/비인증 회원에 따른 페이징 처리 - React-intersection-observer를 사용 스테이지 리스트들을 최신순/인기순를 무한 스크롤로 출력 - 팔로우 스테이지들을 Alice-Crausel을 통하여 슬라이드 구현 - 스테이지 생성 스테이지 내부 - 스테이지 수정 기능 구현 - 스테이지 삭제 기능 구현 | 피그마를 이용하여 페이지 디자인 메인페이지 : gsap 라이브러리를 사용하여 페이지에 필요한 스크롤 인터렉션 기능 구현, 플레이리스트 좋아요순으로 출력 사이드바 : 로그인, 회원가입, 이메일찾기(전화번호인증),비밀번호찾기(전화번호 , 이메일인증), 소셜로그인, 비밀번호변경,비밀번호 확인 모달 직접만들어서 구현 마이페이지 : 회원정보수정(프로필사진, 이메일, 닉네임, 자기소개) 이메일인증, 전화번호인증, 블랙리스트옵션, 회원탈퇴,팔로우,팔로잉,블랙리스트,반응형 햄버거메뉴 구현 프론트엔드 에러 처리 프로젝트 영상편집 |
[프로젝트 설명]
음악을 공유하고 즐길 수 있는 소셜 DJ 사이트
위플리는 여러 사람들이 함께 노래를 듣거나 영상을 시청할 수 있는 서비스를 제공합니다. 여러 사람들과 플레이리스트를 공유하고, 함께 음악을 듣고 즐겨보세요.