영상 링크 기반 플레이리스트 공유 플렛폼

1. 프로젝트 소개

플리(PLY)는 유튜브 영상링크 기반으로한 플레이 리스트를 생성 및 공유하고 탐색할 수 있는 SNS 서비스 입니다.

2. 팀원 소개

김수민	손성오	김도형	김동영(⭐️팀장)	배하은
@ssumanlife	@Sonseongoh	@dhkim511	@love1ace	@haruyam15

3. 프로젝트 기간

📅 전체 개발 기간(3주)

• 설계 및 디자인, 프로젝트 세팅 : 2024. 08. 19. ~ 2024. 08. 25.
• 공통 컴포넌트 구현 및 화면 퍼블리싱 : 2024. 08. 26. ~ 2024. 08. 29.
• 기능 구현 : 2024. 08. 30. ~ 2024. 09. 08.
• 프로젝트 발표 : 2024.09. 09.

4. 기술 스택 및 개발환경

기술 스택	도입 이유
	컴포넌트 기반 개발로 코드 재사용성 증가, 생태계가 커서 다양한 라이브러리 사용 가능
	정적 타입 체크로 코드 안정성 향상, 개발 중 오류 사전 예방 가능
	간단하고 직관적인 API를 제공(사용하기 쉬움) => 코드의 가독성을 높여 유지보수가 용이
	데이터를 캐싱하여 효율적으로 네트워크 요청가능. 다양한 상태관리 기능을 사용할 수 있어서 상태관리의 복잡성을 줄임.
	빠른 개발 서버 시작 및 빌드 시간 제공 가능
	NoSQL DB라서 코드 작성이 쉽고, 데이터 구조 변경에 유연함
	CSS-in-JS 라이브러리로, 컴포넌트와 스타일을 함께 관리할 수 있어 코드 일관성을 유지하고, 동적 스타일링을 쉽게 구현 가능

5. 역할 분담

👤 김수민

• 서버 & DB
  • 서버 셋팅
  • 데이터 요청 API 개발
  • MongoDB 연동
  • ERD
• UI 및 기능구현
  • 로그인 & 회원가입
  • 플레이리스트 추가페이지 & 수정
• 테스트코드
  • 로그인 & 회원가입 테스트코드 작성

👤 손성오

• 프로젝트 기초 셋팅
  • GitHub, 린트, 프리티어 셋팅
• 디자인
  • 전체 UI 디자인
• UI 및 기능구현
  • 메인페이지
  • 좋아요페이지
  • 플레이리스트페이지
  • 타임라인페이지
  • 무한스크롤 & 스켈레톤 기능 구현

👤 김도형

• 서버
  • 데이터 요청 API 개발
• 디자인
  • 전체 UI 디자인
• UI 및 기능구현
  • 프로필 페이지 & 프로필 수정기능
  • 팔로워, 팔로잉 페이지
  • 검색 페이지
  • 404 페이지

👤 김동영

• 회의 진행 및 역할 분담
• 프로젝트 기획
• UI / UX 디자인
• 협업 프로젝트 기초 세팅
• 협업 npm 패키지 개발
• 공용 API 개발
  • 타임라인 API
  • 팔로우 여부 확인 API
  • 팔로우 추가 API
  • 팔로우 취소 API
  • 프로필 편집 API
  • 프로필 정보 가져오기 API
  • 프로필 페이지 API
  • 팔로워 페이지 API
  • 팔로잉 페이지 API
  • 플레이리스트 수정 API
  • 플레이리스트 페이지 API
  • 플레이리스트 생성 API
  • 플레이리스트 삭제 API
  • 좋아요 추가 API
  • 좋아요 취소 API
  • 좋아요 확인 API
  • 좋아요 페이지 API
  • 댓글 추가 API
  • 비밀번호 확인 API
  • 로그인 API
  • 회원가입 API
  • 탐색 API
  • 시청 페이지 API
• DB 관리
• Confirm 컴포넌트 제작
• Loading 컴포넌트 제작

👤 배하은

• 공통 컴포넌트
  • 라웃팅, 레이아웃(헤더, 네비)
• 디자인
  • 플레이리스트 추가 페이지
• UI 및 기능구현
  • 영상 플레이 페이지

6. 데이터베이스 구조

7. 설치 및 실행

npm install

클라이언트 & 서버 실행

npm run dev
npm run server

8. PLY 미리보기

홈

회원가입	로그인

마이페이지	프로필 수정

팔로워 & 팔로잉 페이지

영상 플레이 페이지

플레이리스트 페이지	플레이리스트 추가 페이지

타임라인 페이지	좋아요 페이지

검색 페이지