🌱 MEGAFOX 프로젝트 개요

• MEGAFOX는 영화 예매 사이트 MEGABOX를 클론한 프로젝트 입니다.
• 짧은 프로젝트 기간동안 개발에 집중해야 하므로 디자인/기획 부분만 클론했습니다.

☘️ 개발 인원 및 기간

• 개발기간 : 2021. 10. 18 ~ 2021. 10. 28

• 개발 인원 : 프론트엔드 3명, 백엔드 2명

• back-end repo ←

🍀 프로젝트 선정이유

• 이 사이트는, 조사결과 클론 코딩을 하며 배울점이 많아 선정하게 되었습니다.

적용 기술 및 구현 기능

🚀 적용 기술

HTML
JavaScript
React
React Hooks
React Router
Styled-Components

🔥 구현 기능

👩🏼‍💻 강단

• Header영역 navigation구현
• sitemap 구현
• 영화 명에 마우스 호버 시 해당 영화 포스터 출력되는 기능 구현
• 로그인/아웃 상태에 따른 유저 정보 출력 구현
• 메인페이지 : api를 사용한 관객 수 top 4 영화리스트 출력
• 영화 포스터에 마우스 호버 시 해당 영화 정보 출력 기능 구현

👩‍💻 신혜리

• 공용 탭 컴포넌트 구현
• 전체 영화 페이지 구현
• 영화 상세 페이지 구현
• 전체 영화 페이지네이션 구현
• 전체 영화 이미지 hover시 API로 받아오는 줄거리 내용이 나타나도록 구현
• 동적 라우팅을 이용해 각 영화 상세 페이지로 넘어가게 구현
• 관람 등급에 따라 아이콘을 이미지가 아닌 스타일로 구현

🧑🏻‍💻 정찬영

• 공용 style variables, font 추가
• 소셜 로그인 (카카오) 구현
• 전체 극장 페이지 구현
• 스크롤 이벤트 (상단 이동 버튼) 구현
• 예매 페이지 구현
• 날짜 슬라이드 구현
• 상영 유무에 따른 블러처리 구현
• 다중 선택 버튼 구현, 선택된 타겟에 따른 API호출 구현

영상

MEGAFOX.mov

🔴 Reference

• 이 프로젝트는 MEGABOX 사이트를 참조하여 학습목적으로 만들었습니다.
• 학습용으로 만든 프로젝트임으로 이를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.