Final Team Project - LAB 12 [ Together ]

프로젝트 소개

프로젝트 기간 2023.03.09 - 2023.03.29

TVING UI 기반 반응형 OTT 웹 서비스 프로젝트

팀원 소개

강수영	구아영	박세은	변경섭	임철진	김주현
🏊‍♀️	🍠	☕️	🚇	🔩👖	🦉

🔥 프로젝트 목표

완성보다는 성장💪

• 웹 접근성 준수를 위해 대체 텍스트 제공, 마우스로 조작할 수 있는 기능은 키보드로 접근 및 조작이 가능하게 하며 폼 컨트롤, 명도대비 고려
• 웹 표준 준수를 위한 적절한 헤딩 사용 및 시멘틱 마크업
• 크로스 브라우징 체크, 검색엔진 최적화 및 성능 최적화
• 반응형 웹 구현 / 애니메이션 활용 / 이미지 다루기
• 프로젝트 협업 과정 기록 및 회고
• Firebase 활용

🔗 배포 주소

https://together-taing.netlify.app/

🛠 기술스택

주요기능

랜딩 페이지

• Firebase로부터 이미지를 불러와 화면에 동적으로 렌더링
• GSAP의 스크롤 트리거 와 fromTo 등을 이용한 애니메이션 구현
• CSS Animation을 통한 Auto Carousel

메인 페이지

• React Portal과 LocalStorage를 활용한 모달 팝업.
• Firebase로부터 컨텐츠의 정보와 이미지를 불러와 react-slick 을 활용한 Carousel 로 동적으로 렌더링
• Firebase의 Authentication을 활용한 로그아웃

회원가입 페이지

• 회원가입 진행 시, 이메일과 비밀번호 유효성 검사 통과 후 Firebase의 메서드를 활용한 회원가입

로그인 페이지

• 로그인 진행 시, 이메일과 비밀번호를 통한 Firebase 메서드를 활용한 로그인

프로필 생성/삭제 페이지

• 현재 로그인 한 유저에 해당하는 프로필들의 이름과 이미지를 Firebase로부터 동적으로 렌더링
• 유저 프로필의 개수가 4개를 초과하지 않도록 조건 설정
• 사진 업로드 시 미리보기 가능
• Firebase database를 활용해 프로필 이미지, 이름 생성 및 삭제 기능 구현

프로필 편집 페이지

• 프로필 페이지에서 클릭한 프로필을 useLocation 을 활용해 URL 정보를 가져와 해당 프로필의 이름 수정이 가능

검색 페이지

• Debounce 와 Firebase의 쿼리문을 이용한 컨텐츠 검색 기능 구현
• LocalStorage를 사용한 최근 검색어 저장 기능 구현

프로젝트 사용법

npm i
npm start