🍿 영화 예매 풀스택 서비스

DB 설계 스키마

DB 설계시 고려한 점 블로그 정리

구현화면

📌 메인페이지

• 배너 이미지 3개
• 인기있는 영화순으로 Top10 나열
• 영화관, 영화, 로그인, 회원가입, 마이페이지 빠른예매 메뉴
• 모바일, 태블릿을 위한 반응형 레이아웃

📌 영화관 메뉴

• Ajax를 사용하여 비동기 검색 ⇒ 검색어 입력시 바로 검색결과 확인
• 지역에 따른 영화관 확인
• 모바일, 태블릿을 위한 반응형 레이아웃

📌 영화관 상세

• 영화관에서 상영중인 영화와 개봉 예정중인 영화 확인
• 영화관 정보(오시는 길, 전화번호, 주차정보, 내부이미지)확인
• 해당 페이지에서 예매하기 버튼을 누르면 영화관은 선택된 채로 예매창이 뜸

📌 영화 메뉴

• 장르에 마우스 올리면 스크롤바가 나타나 모든 장르를 볼 수 있음
• 장르를 선택하면 장르에 맞는 영화 종류만 볼 수 있음
• Ajax를 사용하여 비동기 검색 ⇒ 검색어 입력시 바로 검색결과 확인
• 해당 페이지에서 예매하기 버튼을 누르면 영화는 선택된 채로 예매창이 뜸

📌 영화 상세페이지

• chart.js를 사용하여 연령별 예매율, 성별 예매율 그래프를 그림

• 별점 분포에 퍼센트를 따른 프로그래스바로 나타냄
• 공감 버튼을 누르면 공감수 증가

📌 예매

• 영화, 영화관, 날짜를 선택하면 가능한 시간대를 불러옴
• 영화, 영화관, 날짜, 시간대까지 모두 선택해야 버튼 활성화하여 다음 페이지로 이동

• 인원을 먼저 지정하고 지정한 인원만큼 좌석을 클릭해야 결제 진행
• 이미 예매된 좌석은 회색으로 표시

📌 결제

• 아임포트를 이용한 카카오페이 결제를 진행

📌 로그인/회원가입

📌 마이페이지

예매 목록

• 취소는 영화시작 1시간 전까지만 가능하도록 구현
• 영화시작 전에 리뷰쓰기 금지
• 이미 리뷰는 예매 당 1회 작성 가능

리뷰 목록 및 리뷰 작성

• 리뷰를 작성하면 DB의 트리거가 추가된 리뷰 점수를 포함하여 평점을 내어 movie테이블에 저장해주는 방식으로 구현

Q&A

• 문의글에 답변을 달면 DB의 트리거가 답변완료로 상태 변경해는 방식으로 구현

회원정보 수정

프로젝트 후 작성한 블로그 링크

상세한 개발과정을 볼 수 있습니다.

• jstl 사용법
• spring ajax 사용하기
• 결제 api 사용하기
• 이클립스 반영안될 때