▶️ 플레이리스트 공유 SNS 위플리(Weply)

🔐 테스트 계정

ID : test1234
PW : test1234

1. 프로젝트 소개

위플리(Weply)는 사용자들이 만든 자신만의 영상 링크 기반(유튜브, Vimeo, SoundCloud) 플레이 리스트를 공유하고, 구독하여 자신만의 타임 라인을 만들고 네트워킹 할 수 있는 SNS 서비스 입니다

2. 팀원 소개

권혜지	김대영	김성현	김수민	이동혁
@hyeppyy	@dev-meryoung	@kimisadev27	@ssuminii	@LfromTheE

3. 프로젝트 기간

📅 전체 개발 기간

설계 및 디자인, 프로젝트 세팅 : 2024. 08. 19. ~ 2024. 08. 25.
UI 및 컴포넌트 구현 : 2024. 08. 26. ~ 2024. 08. 30.
기능 구현 : 2024. 08. 31. ~ 2024. 09. 09.

4. 기술 스택 및 개발환경

기술 스택	도입 이유
	컴포넌트 기반 아키텍처로 재사용성과 유지보수성이 높고 가상 DOM을 사용하여 효율적인 렌더링 제공 가능
	정적 타입 검사로 코드 안정성을 향상시키고 개발 시 오류를 조기에 발견 가능
	애플리케이션의 전역 상태 관리를 단순하고 직관적으로 관리 및 처리
	비동기 데이터 요청 및 캐싱 기능으로 효율적인 서버 데이터 관리
	빠른 개발 서버 시작 및 빌드 시간 제공 가능
	서버리스 아키텍처로 백엔드 개발 시간 단축 가능
	CSS-in-JS 라이브러리로 컴포넌트 기반 스타일링 가능, 동적 스타일링 용이

5. 역할 분담

◼️ 권혜지

UI
- 공통 컴포넌트 : 댓글, 케밥 버튼, 모달, 로딩 스피너, 탭 버튼, 플레이리스트 카드
- 페이지 : 마이플리(홈, 저장된 플리, 좋아요), 404
기능 구현
- 무한 스크롤
- 플레이리스트 공개여부 변경
- 페이지별 필터링(공개여부, 정렬)
그 외
- 초기 스타일 세팅
- UI 디자인
- 로그인 테스트

◼️ 김대영

UI
- 공통 컴포넌트 : 버튼, 아이콘 버튼, 텍스트 필터, 팝업 필터, 로고, 네비게이션 바
- 페이지 : 홈(메인), 검색 결과
기능 구현
- 검색 키워드(제목, 해시태그)에 따른 검색 결과 출력
- 페이지별 필터링(정렬)
- 플레이리스트 좋아요 및 저장 기능 구현
그 외
- 프로젝트 초기 세팅
- 로고 디자인

◼️ 김성현

UI
- 공통 컴포넌트 : 토스트 메시지, 미니 플레이리스트, 토글, 개별 미리보기 영상
- 페이지 : 플레이리스트 상세, 플레이리스트 생성 및 수정
기능 구현
- 유튜브, 비메오, 사운드클라우드 링크 변환
- 플레이리스트 생성, 수정, 상세 조회
그 외
- 페이지별 헤더 조건부 렌더링 처리
- 기능정의서 작성
- DB 구조 설계

◼️ 김수민

UI
- 공통 컴포넌트 : 인풋박스, 프로필, 해시태그, 체크박스
- 페이지 : 로그인, 회원가입, 해시태그 선택, 마이페이지, 프로필 수정
기능 구현
- 로그인, 회원가입 시 유효성 및 중복 검사
- 해시태그 선택
- 내가 쓴 댓글 조회 및 삭제
그 외
- UI 디자인

◼️ 이동혁

UI
- 공통 컴포넌트 : 레이아웃(헤더, 네비게이션 바)
- 페이지 : 인기, 팔로잉, 팔로잉 및 팔로워 목록
기능 구현
- 선호 해시태그 기준 필터링
- 팔로잉 채널 기준 필터링
- 팔로잉 및 팔로워 조회 및 삭제
그 외
- DB 구조 설계
- 파이어베이스 데이터 관리
- 발표

6. 데이터베이스 구조

7. 기능 소개

회원가입 페이지

로그인 화면에서 회원가입하기를 클릭하면 회원가입 페이지로 이동합니다.
아이디와 채널 이름은 중복 검사를 통해 사용 가능 여부를 확인할 수 있습니다.
모든 입력 항목이 유효하고 중복 검사가 통과되면 회원가입 버튼이 활성화됩니다.
회원가입이 완료되면 자동으로 로그인 페이지로 리디렉션됩니다.

회원가입

로그인 페이지

비회원은 홈, 인기, 검색, 상세페이지에만 접근할 수 있으며 이 외의 페이지에 접근할 시 로그인 페이지로 이동됩니다.
사용자는 아이디 로그인이 가능하며 또는 구글로 로그인 버튼으로 구글 계정으로 로그인이 가능합니다.
사용자는 로그인 정보 기억하기 토글을 통해 재로그인시 아이디를 저장할 수 있습니다.
아이디 또는 비밀번호가 잘못되었을 경우 경고 메세지가 표시됩니다.
로그인 후 홈페이지로 리디렉션됩니다.

아이디 로그인	구글 로그인

해시태그 선택 페이지

회원가입 후 사용자가 처음 로그인하는 경우 해시태그 선택 페이지로 리디렉션 됩니다.
사용자가 관심 있는 해시태그를 선택하면 NEXT 버튼을 통해 홈페이지로 이동하게 됩니다. (해시태그 선택은 10개로 제한됩니다.)
해시태그를 고르지 않고 SKIP으로 넘어갈 수 있습니다.
고른 해시태그들은 인기 페이지에 반영됩니다.
추후 마이페이지에서 수정할 수 있습니다.

해시태그 선택

홈페이지

사용자는 우측 상단의 탭을 통해 최신순, 좋아요순, 댓글순으로 플레이리스트를 정렬할 수 있습니다.
무한 스크롤 기능으로 사용자가 페이지 하단에 도달하면 추가 데이터를 볼 수 있습니다.
플레이리스트 좋아요가 가능하며 플레이리스틀 누를 시 플레이리스트 상세페이지로 이동합니다.

홈페이지

영상 상세페이지

영상 상세페이지는 사용자가 영상을 시청하고, 평가하며, 댓글로 소통하고, 구독 및 공유할 수 있는 다양한 기능을 제공하는 페이지입니다.

좋아요	공유	저장	팔로우

[좋아요]

좋아요 버튼 클릭 시 해당 영상이 들어있는 플레이리스트의 좋아요 수가 올라갑니다. 마이플리 좋아요 탭에서 내가 좋아요한 플레이리스트 목록을 확인할 수 있습니다.

[공유]

공유 버튼 클릭 시 플레이리스트의 URL이 복사되고 '링크가 복사되었습니다'라는 토스트가 나타납니다.
복사된 URL을 공유하여 다른 사람들과 영상을 나눌 수 있습니다.

[저장]

사용자가 플레이리스트를 자신만의 재생목록(마이플리)에 저장하여 나중에 다시 볼 수 있도록 합니다.

[팔로우]

사용자는 해당 채널을 팔로우하여 팔로잉 페이지에서 팔로우한 채널의 새 콘텐츠를 더 쉽게 접할 수 있습니다.

댓글 추가 및 삭제	미니 플레이리스트 확인

[댓글 추가 및 삭제]

사람들이 해당 영상에 대해 의견을 남기거나 다른 사용자들과 소통할 수 있는 공간입니다. 내가 쓴 댓글은 삭제 버튼을 눌러 삭제할 수 있습니다.

[미니 플레이리스트 확인]

채널 정보에서 X 표시를 누르면 채널 정보가 하단에 작게 뜨게 하여 영상에 더욱 집중할 수 있도록 합니다.

마이플리 페이지

마이플리 페이지는 채널 정보를 확인하고, 내가 생성/저장/좋아요한 플레이리스트를 관리하는 페이지입니다. 채널 정보는 프로필 이미지, 채널명, 팔로워수, 팔로잉수를 확인할 수 있습니다.

마이플리 탭

마이플리 홈페이지에서는 내가 생성한 플레이리스트 목록을 확인, 수정, 삭제할 수 있습니다. 또한 플레이리스트의 공개여부를 변경할 수 있습니다.

필터링	공개여부 변경	수정	삭제

[필터링]

플레이리스트를 최신순, 좋아요순, 댓글순으로 정렬할 수 있습니다.
플레이리스트의 공개여부(전체/공개/비공개)를 필터링할 수 있습니다.

[공개여부 변경]

자물쇠 아이콘을 클릭하여 공개/비공개 여부를 쉽게 변경할 수 있습니다. 비공개로 전환된 플레이리스트는 홈이나, 인기 페이지에서 확인할 수 없습니다.

[수정]

점 세개 아이콘 클릭 후 수정 버튼을 누르면 해당 플레이리스트 수정 페이지로 이동합니다.

[삭제]

점 세개 아이콘 클릭 후 삭제 버튼을 누르면 삭제 모달이 나타납니다.
모달에서 취소 클릭 시 모달이 닫히고, 삭제 클릭 시 해당 플레이리스트가 삭제되고 '플레이리스트가 삭제되었습니다'라는 토스트가 나타납니다.

저장된 플리 탭

저장한 플리 페이지에서는 내가 저장(플러스 버튼을 누른)한 플레이리스트 목록을 확인할 수 있습니다.

필터링	저장 취소

[필터링]

플레이리스트를 최신순, 좋아요순, 댓글순으로 정렬할 수 있습니다.

[저장 취소]

리스트 모양 아이콘을 클릭하여 플레이리스트 저장을 취소할 수 있습니다.
실수로 저장을 취소할 수 있기 때문에 다른 페이지로 이동 시에만 저장 취소가 반영되도록 구현했습니다.

좋아요 탭

좋아요 페이지에서는 내가 좋아요(하트 버튼을 누른)한 플레이리스트 목록을 확인할 수 있습니다.
좋아요탭은 나에게한 보이며, 다른 사람의 페이지에서는 보이지 않아 자유롭게 목록을 관리할 수 있습니다.

필터링	좋아요 취소

[필터링]

플레이리스트를 최신순, 좋아요순, 댓글순으로 정렬할 수 있습니다.

[좋아요 취소]

하트 버튼을 클릭하여 좋아요를 취소할 수 있습니다.
실수로 좋아요를 취소할 수 있기 때문에 다른 페이지로 이동 시에만 좋아요 삭제가 반영되도록 구현했습니다.

플레이리스트 생성 페이지

마이플리 페이지에서 ‘플레이리스트 생성’ 버튼을 클릭하여 생성 페이지로 진입합니다.
공개여부 설정: 디폴트는 공개이며, 비공개로 설정 시 다른 사람에게 노출되지 않습니다.
플레이리스트 제목, 설명: 플레이리스트 제목과 설명을 작성합니다. 제목은 필수사항이고, 설명은 선택사항입니다.
영상 링크 추가: 유튜브, 비메오, 사운드 클라우드의 영상 링크를 복사, 붙여넣기 한 후 + 버튼을 눌러 추가합니다. X 버튼을 눌러 등록을 취소할 수 있습니다.
해시태그 입력: 해시태그는 최대 5개까지 입력 가능합니다.
썸네일 및 미리보기: 썸네일 이미지를 등록하지 않는 경우, 첫번째 영상의 썸네일으로 보여집니다. 미리보기를 통해 업로드 전 썸네일을 확인할 수 있습니다.
모든 정보를 입력한 후 ‘플레이리스트 생성’ 버튼을 클릭하면 영상이 등록됩니다.

플레이리스트 생성

팔로잉 페이지

모든 팔로워 목록

나를 팔로우한 모든 채널 목록을 확인할 수 있습니다.
사람 모양 아이콘을 클릭하여 나를 팔로우하고 있는 사람을 삭제할 수 있습니다.

모든 팔로워 목록 확인 및 팔로워 삭제

모든 팔로잉 목록

내가 팔로우한 모든 채널 목록을 확인할 수 있습니다.
사람 모양 아이콘을 클릭하여 팔로잉을 취소할 수 있습니다.

모든 팔로잉 목록 확인 및 언팔로우

검색 결과 페이지

사용자는 헤더 부분의 검색 입력창을 통해 검색이 가능합니다.
검색은 플레이리스트 제목과 해시태그 검색이 가능합니다.
플레이리스트 좋아요가 가능하며 플레이리스틀 누를 시 플레이리스트 상세페이지로 이동합니다.

검색 결과 페이지

마이페이지

사용자는 우측 상단의 헤더 부분에서 마이페이지로 이동할 수 있습니다.
사용자는 프로필 페이지에서 로그아웃 버튼을 통해 로그아웃이 가능합니다.
내가 쓴 댓글 목록을 확인할 수 있으며 전체 삭제 또는 개별 삭제가 가능합니다.
더보기버튼을 눌러 댓글 더보기가 가능합니다.
사용자는 프로필 수정 버튼을 눌러 프로필 수정 페이지로 이동할 수 있습니다.

댓글 삭제	로그아웃

프로필 수정 페이지

사용자는 마이페이지에서 프로필 수정 버튼을 눌러 프로필 수정 페이지로 이동할 수 있습니다.
사용자는 프로필 수정 페이지에서 프로필 이미지, 채널이름, 해시태그를 수정할 수 있습니다.
프로필 수정중 뒤로가기 버튼을 누를 시 프로필 수정 취소 모달창이 뜹니다.

프로필 수정 페이지

8. 설치 및 실행

npm install

클라이언트 실행

npm run dev

Files

README.md

Latest commit

History

README.md

File metadata and controls

▶️ 플레이리스트 공유 SNS 위플리(Weply)

🔐 테스트 계정

1. 프로젝트 소개

2. 팀원 소개

3. 프로젝트 기간

📅 전체 개발 기간

4. 기술 스택 및 개발환경

5. 역할 분담

◼️ 권혜지

◼️ 김대영

◼️ 김성현

◼️ 김수민

◼️ 이동혁

6. 데이터베이스 구조

7. 기능 소개

회원가입 페이지

로그인 페이지

해시태그 선택 페이지

홈페이지

영상 상세페이지

인기 페이지

마이플리 페이지

마이플리 탭

저장된 플리 탭

좋아요 탭

[필터링]

[좋아요 취소]

플레이리스트 생성 페이지

팔로잉 페이지

모든 팔로워 목록

모든 팔로잉 목록

검색 결과 페이지

마이페이지

프로필 수정 페이지

8. 설치 및 실행

클라이언트 실행