BitMovie (영화 예매 웹 서비스)

프로젝트 소개

영화 예매 서비스를 제공하기 위해 필요한 기능들을 리액트와 스프링부트를 사용하여 구현했습니다.

• 프로젝트 미리보기

주요 페이지

예매페이지 : 실제 영화 예매사이트와 동일하게 영화,상영관,날짜,상영시간표를 선택 후 좌석선택을 하여 구매까지 할 수 있습니다.

마이페이지 : 예매내역과 포인트 쿠폰 등 개인정보를 확인 하고 수정 할 수 있습니다.

영화페이지 : 현재 상영중인 영화의 평점과 리뷰를 확인 할 수 있습니다.

결제페이지 : 쿠폰과 포인트 사용이 가능하며 신용카드 및 카카오페이로 실제 결제를 할 수 있습니다.

메인페이지 : 박스오피스 순위와 자체 예매율을 실시간으로 보여주며 랭킹별로 상영작 예고편을 출력하고 실시간 평점들을 확인 할 수 있습니다.

기여한 파트

• 와이어프레임 설계
• 메인페이지 박스오피스 순위
  • api를 통해 얻어온 박스오피스를 순위별로 출력 Swiper를 사용하여 자동 슬라이드 및 드래그로 컨트롤 가능
• 예매
  
  • api로 받아온 영화리스트를 관람연령대와 함께 출력 자체 가나다순,예매율순(DB예매율기준),평점순(DB평점순위기준)으로 출력
    
  • 총 4단계로 영화리스트 선택, 상영관 선택, 날짜선택, 상영시간선택 모두 선택 후 로그인 시 좌석선택 가능
  • 4단계 중 1개라도 선택되지 않은채로 좌석선택 클릭 시 선택되지 않은 정보가 알림창에 표시됨
  • 하단에 사용자가 선택한 정보를 실시간으로 출력
  • 날짜 선택을 위한 달력구현 새로고침 시 당일날짜 디폴트로 선택됨
  • 상영시간표에서는 총 좌석,예매된 좌석,층수,관,상영시작시간 나타냄 // 예매 시 실시간으로 예매된 좌석수 반영됨
  • 4단계 선택 모두 컴포넌트 분리
• 좌석
  • 성인6명 청소년6명 최대12명까지 선택가능
  • 선택 한 인원 및 좌석 왼쪽 정보창에서 실시간으로 확인가능
  • 우측에 좌석 색상을 구분해서 현재 좌석상태를 쉽게 파악할 수 있게함
  • 예매 완료된 좌석은 흑색처리되어 클릭되지 않도록 함
  • 인원을 선택하지 않고 좌석을 클릭하면 경고알림
  • 선택된 인원보다 적거나 많을 시 경고알림 및 좌석선택은 선택된 인원까지만 가능
  • api를 통해서 받아온 포스터 및 영화기타정보 출력
• 결제
  • 아임포트를 사용하여 이니시스 및 카카오페이(QR코드)결제 구현
  • SessionStorage를 사용해서 로그인된 유저PK로 결제 시 유저 정보 출력
  • 포인트 사용 및 쿠폰 사용 구현
  • 포인트 조건 : 최소 1000점 최대 2000점 -> 최소금액이 0원이 되지 않기 하기 위함 // 해당 조건에 맞지 않을 시 경고알림창 출력
  • 쿠폰은 최대1개만 선택가능
  • 로그인한 유저 보유포인트 1000점 미만일 시 포인트 입력창 입력불가 처리
  • 실시간으로 할인된 금액과 최종금액을 보여줌으로써 유저가 실시간할인율 및 결제금액 확인가능
  • 결제 완료 시 해당 유저 pk로 마이페이지 예매내역으로 이동

프로젝트 일정 및 규모

• 개발 기간 : 2022.11.04 ~ 12.01
• 인원 : 5명

팀원

이름	역할	담당 기능	Git URL
김태민		예매, 좌석선택, 결제, 메인페이지(sub)	https://github.com/commitonly
김성민		결제, 예매	https://github.com/keeptrynjoy
이준민		로그인, 회원가입, MyPage	https://github.com/Jxnmin
유희준		영화리스트, 상세페이지, 리뷰, 검색	https://github.com/J-LOOK-J
정지훈		로그인, 회원가입, Mypage, 영화리스트, 상세페이지, 리뷰, 검색	https://github.com/greetjeehun

기술 소개

Front-End

Back-End

Infra

Tools

사용 API

• TMDB - 영화/인물 데이터 수집
• i'mport - 결제 및 환불
• coolsms - 핸드폰 인증 문자 발송

ERD

• Table 17개
• Colunm 100개