2023.04.10 ~ 2023.05.10
meerkats 는 영화 예고편을 감상하고, 다양한 영화 정보와 소식을 공유하는 커뮤니티 플랫폼입니다.
코로나19 팬데믹과 OTT 의 등장으로 인해 영화 산업이 변화하고 있지만, 여전히 영화관에서의 ‘몰입’과 ‘체험’을 소중히 여기는 사람들이 있습니다.
meerkats 는 영화를 사랑하는 사람들에게 기다리던 영화가 개봉한다는 소식과 예고편을 가장 먼저 공개하고, 자유롭게 의견을 나눌 수 있는 소통의 장을 제공합니다.
영화 예고편 및 관련 영상을 모아 볼 수 있는 기능과 함께, 오프라인에서 경험할 수 있는 다양한 이벤트와 콘텐츠를 소개합니다.
meerkats 블로그는 자신의 취향과 감상을 공유하는 곳입니다. 유저는 영화에 대한 뜨거운 토론과 감상평을 나누며 커뮤니티를 만들어 갑니다.
meerkats 와 함께 영화를 즐겨보세요!
- 로그인/로그아웃 기능으로 TOKEN 존재 여부에 따라 텍스트가 바뀌도록 구현했습니다.
- 유저의 편의성을 높이기 위해 스크롤 방향에 따라 헤더를 보이거나 숨길 수 있도록 구현했습니다.
- 로고를 클릭할 시, 홈으로 돌아가는 기능을 제공합니다.
- 영화를 중심으로 한 사이트이므로 검색 기능을 구현하여 유저들이 쉽게 영화를 찾을 수 있도록 했습니다.
- 영화 검색 시, 상세정보를 바로 확인할 수 있도록 useAxios hook을 통해 백엔드와 통신하여 필터 된 검색 리스트를 출력합니다.
- 기본적으로 meerkats 만의 자체 회원가입을 구현했습니다.
- 이메일 입력 시, 해당 이메일의 존재 여부를 미리 확인할 수 있도록, 중복체크 기능을 구현했습니다. (에러핸들링 처리)
- 등록 가능한 이메일이라면, 해당 이메일에 인증번호를 보내 정확한 본인 확인이 되도록 구현했습니다. (에러핸들링 처리)
- 비밀번호에 필수적으로 들어가야 하는 여러 조건에 유저가 즉시 맞출 수 있도록, input 에 정규식 표현 조건을 걸고, 스타일 색상을 다르게 주어 직관적으로 인식할 수 있게 구현했습니다.
- 유저의 효율적인 회원가입을 위해 이메일, 비밀번호, 닉네임 3개의 input 에 조건에 맞게 모두 값이 들어갔을 때 회원가입 버튼이 활성화되도록 구현했습니다.
- 최적화를 위해 불필요한 렌더링이 발생하는 컴포넌트들을 React.memo 를 사용하여 메모이제이션 처리했습니다.
- 유저의 빠른 로그인을 위해 대중적으로 많이 사용하는 카카오 API를 연동했습니다.
- 카카오에서 인가 코드를 받아, 카카오로 전달하면 토큰을 발급받고, 해당 토큰을 백엔드에 보냅니다. 백엔드에서 JWT 토큰을 발급하고, 해당 토큰이 'meerkats' 플랫폼 전용 토큰으로서 sessionStorage 에 저장되도록 구현했습니다.
- 자체 로그인은 이메일과 패스워드 input 의 값이 기본적인 조건을 만족했을 때 로그인 버튼이 활성화 되도록 구현했습니다. (에러핸들링 처리)
- 자체 로그인은 jwt 토큰을 백에서 전달받고, 유저를 토큰으로 구별하여 사이트를 이용할 수 있도록 구현했습니다.
- 보안을 고려하여 패스워드 input 에 복사/붙여넣기/자르기 기능을 방지했습니다.
- 가장 기대되는 개봉 예정작을 Swiper 라이브러리를 사용해 메인 캐러셀로 구현했습니다. 베스트 영화 또한 Swiper 라이브러리를 사용해 포스터가 순차적으로 보일 수 있도록 구현했습니다.
- swiper의 loop 옵션을 사용하여 마지막 슬라이드가 끝나더라도 자연스럽게 첫 번째 슬라이드가 보여지도록 설정했고, autoplay 옵션을 사용해서 자동으로 슬라이드 넘어갈 수 있도록 했습니다.
- 탭 기능을 사용해 각 카테고리 별로 인기 있는 영화들을 나열하고, 유저가 편하게 보고 싶은 영화를 고를 수 있도록 구현했습니다.
- 모든 영화 포스터에 마우스를 올리면 각 영화의 상세페이지로 이동할 수 있도록 경로를 지정했습니다.
- Youtube API 를 사용하여 영화 예고편 및 관련 영상을 불러옵니다.
- Skeleton Loading 컴포넌트를 생성하여 유저가 체감하는 로딩 속도를 향상시켰습니다.
- 영상 플레이어로 react-youtube 라이브러리를 사용했습니다.
- 관련 영상을 클릭하면 재생 중인 예고편이 일시정지되고, 모달에서 관련 영상을 재생합니다.
- 영화 관람 등급, 개봉 예정일, 감독, 출연 배우, 내용 등 영화 상세정보를 제공합니다.
- recoil 의 atomFamily, selectorFamily 를 이용하여 좋아요 기능을 구현했습니다.
- 링크 복사 기능을 통해 유저가 해당 페이지를 공유할 수 있도록 했습니다.
- 각 영화에 대한 세 가지 탭 (CHAT, COMMENT, BLOG) 을 기획했습니다.
- CHAT: socket.io 를 이용하여 유저 간 영화에 대한 의견을 나눌 수 있는 실시간 채팅 기능을 구현했습니다. 로그인 한 유저에게만 input 이 활성화됩니다.
- COMMNET: 실시간 채팅 외 영화 관련 정보를 공유할 수 있도록 댓글 기능을 추가했습니다.
- BLOG: 예고편과 동일한 장르의 영화 블로그 글을 추천합니다.
- Intersection Observer API 를 통해 무한 스크롤 기능을 구현했습니다. (observer div 박스와 viewport 의 교차점을 이용한 무한 스크롤 API)
- 원하는 블로그를 쉽게 찾아볼 수 있도록 검색 기능을 구현했습니다.
- 영화라는 특성을 고려해 스포일러가 포함된 블로그와, 스포일러가 포함되지 않은 블로그를 선택하여 볼 수 있도록 스포일러 토글에 따른 렌더링을 구현했습니다.
- 장르별로 블로그를 모아볼 수 있도록 장르 카테고리 드롭다운을 구현했습니다.
- 내가 쓴 블로그를 모아볼 수 있도록 My Blog 탭 페이지를 생성했습니다.
- 반복되는 레이아웃을 컴포넌트로 분리하고, 변동되는 데이터는 props 로 관리했습니다.
- 최적화를 위해 불필요한 렌더링이 발생하는 컴포넌트들을 React.memo 를 사용하여 메모이제이션 처리했습니다.
- recoil 의 atomFamily, selectorFamily 를 이용하여 좋아요 및 스크랩 기능을 구현했습니다.
- 좋아요 및 스크랩 상태와 개수, 댓글 수를 recoil 을 통해 전역적으로 관리합니다.
- html 형식으로 저장된 블로그 글을 html-react-parser 라이브러리를 이용하여 파싱 후 렌더링 합니다.
- 유저 간 양방향 소통이 이루어질 수 있도록 블로그 글 하단에 댓글 작성, 수정, 삭제 기능을 구현했습니다.
- 글쓰기 창을 구현하기 위해 CK Editor 라이브러리를 도입하여, 블로그 글을 간편하게 작성할 수 있도록 했습니다.
- 글 등록 및 수정 상태는 state로 관리했고, 상태에 따라 다양한 기능이 실행될 수 있도록 구현했습니다.
- 좋은 사용자 경험을 제공하기 위해, 뒤로 가기 버튼 클릭 시 특정 페이지로 이동하는 대신 즉시 이전 페이지로 돌아갈 수 있도록 구현했습니다.
- 글 수정 페이지에 유저가 글 등록 시 작성한 내용과 선택했던 카테고리를 그대로 표시하여 편리하게 글을 수정할 수 있도록 했습니다.
- 세 가지 멤버십 타입 및 혜택을 카드에 렌더링 하여 멤버십 정보를 제공합니다.
- 유저가 메인 페이지 및 멤버십 페이지에서 선택한 멤버십 타입의 카드를 렌더링 합니다.
- 이미 구독 중인 멤버십을 다른 멤버십으로 변경할 수 있고, 저장된 결제 정보를 수정할 수 있습니다.
- 로그인 한 유저만 결제 정보를 작성하고 멤버십 구독을 신청할 수 있습니다.
- 유저가 입력한 결제 정보에 대해 실시간으로 유효성 검사를 실행합니다. 모든 데이터가 유효성 검사를 통과하면 구독 버튼이 활성화됩니다.
- 토스 자동결제 API 와 연동하여 유저가 입력한 결제 정보로 빌링키를 발급받고, 결제 승인을 요청합니다.
- 유저가 선택한 이벤트의 id 값을 받아 해당 디테일 페이지로 이동할 수 있도록 했습니다.
- 리스트 페이지에서 넘겨준 id 값을 받아 해당 영화에 대한 정보를 보여줄 수 있도록 구현했습니다.
- react-youtube 라이브러리를 사용해 구현한 컴포넌트를 import 하여 영화 정보뿐만 아니라 영화의 예고편을 함께 보여주면서 이벤트와 영화에 대한 관심도를 높일 수 있도록 했습니다.
 FrontEnd : 강서윤 |
 FrontEnd : 오현주 |
 FrontEnd : 이진경 |
 BackEnd : 김광휘 |
 BackEnd : 김승기 |