▶️ 플레이리스트 공유 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 표시를 누르면 채널 정보가 하단에 작게 뜨게 하여 영상에 더욱 집중할 수 있도록 합니다.

인기 페이지

• 회원가입 시 선택한 해시태그를 바탕으로 관련 영상을 확인할 수 있습니다.

• 마이페이지에서 해시태그를 변경하면 변경한 해시태그로 인기 페이지 리스트가 출력됩니다.

• 인기급상승 동영상은 고정이며, 나머지 3개의 태그가 사용자 선택 기반으로 제공됩니다.

• 선택한 해시태그가 없을 경우 랜덤으로 제공됩니다.

  인기 페이지

마이플리 페이지

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

마이플리 탭

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

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

[필터링]

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

[공개여부 변경]

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

[수정]

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

[삭제]

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

저장된 플리 탭

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

필터링	저장 취소

[필터링]

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

[저장 취소]

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

좋아요 탭

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

필터링	좋아요 취소

[필터링]

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

[좋아요 취소]

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

플레이리스트 생성 페이지

• 마이플리 페이지에서 ‘플레이리스트 생성’ 버튼을 클릭하여 생성 페이지로 진입합니다.

• 공개여부 설정: 디폴트는 공개이며, 비공개로 설정 시 다른 사람에게 노출되지 않습니다.

• 플레이리스트 제목, 설명: 플레이리스트 제목과 설명을 작성합니다. 제목은 필수사항이고, 설명은 선택사항입니다.

• 영상 링크 추가: 유튜브, 비메오, 사운드 클라우드의 영상 링크를 복사, 붙여넣기 한 후 + 버튼을 눌러 추가합니다. X 버튼을 눌러 등록을 취소할 수 있습니다.

• 해시태그 입력: 해시태그는 최대 5개까지 입력 가능합니다.

• 썸네일 및 미리보기: 썸네일 이미지를 등록하지 않는 경우, 첫번째 영상의 썸네일으로 보여집니다. 미리보기를 통해 업로드 전 썸네일을 확인할 수 있습니다.

• 모든 정보를 입력한 후 ‘플레이리스트 생성’ 버튼을 클릭하면 영상이 등록됩니다.

  플레이리스트 생성

팔로잉 페이지

모든 팔로워 목록

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

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

모든 팔로잉 목록

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

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

검색 결과 페이지

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

검색 결과 페이지

마이페이지

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

댓글 삭제	로그아웃

프로필 수정 페이지

• 사용자는 마이페이지에서 프로필 수정 버튼을 눌러 프로필 수정 페이지로 이동할 수 있습니다.

• 사용자는 프로필 수정 페이지에서 프로필 이미지, 채널이름, 해시태그를 수정할 수 있습니다.

• 프로필 수정중 뒤로가기 버튼을 누를 시 프로필 수정 취소 모달창이 뜹니다.

  프로필 수정 페이지

8. 설치 및 실행

npm install

클라이언트 실행

npm run dev