본 프로젝트는 2023년 3월 위코드에서 진행한 2차 프로젝트입니다
프로젝트 시연영상 바로가기
- 개발 기간: 2023.03.27 ~ 2023.04.07 (2주)
- 개발 인원:
- FrontEnd : 김수미(Product Manager), 이솜이(Project Manager), 오지수
- BackEnd : 김승태, 강혁주
- 사용자의 편의를 고려하여 유연한 영화 옵션 선택 기능
- 스크린리더를 고려한 시멘틱 마크업
- 사용자 친화적인 UI
국내 영화관 중 굳건히 1위를 유지하는 CGV의 웹사이트를 보며, 소수의 사용자까지 고려한 고민의 흔적을 느낄 수 있었어요!
폭 넓은 사용자가 모두 불편함 없이 이용 할 수 있는 서비스를 만드는 것에 가장 부합하다고 생각하여 참고하게 되었어요.
해당 사이트를 참고하여 만든 두번째 프로젝트, 영화 예매 서비스 See Other입니다:)
- 지금은 상영하지 않는 고전 영화를 보다 쾌적한 환경에서, 몰입감 있게 볼 수 있는 영화관 예매 서비스예요.
- 30대 ~ 60대까지 고전영화가 보고싶은 모든 사용자에세 최적화된 예매 서비스예요.
- 사용자 친화적인 UI와 UX를 기반한 영화 예매 플랫폼이에요.
- 소셜 로그인, 회원가입
- 영화 리스트, 필터링, 캐러셀
- 영화 상세, 후기 작성, 페이지네이션
- 영화 예매, 좌석선택, 예매 내역 확인
- 스토어
- 카카오 로그인을 통해 보다 쉽게 회원가입 및 로그인을 할 수 있어요.
- 사용자의 닉네임과 연령대를 저장하여 사용하고 있어요.
- token의 유무에 따라 로그인/로그아웃 기능을 사용할 수 있도록 했어요.
- 현재 상영 중인 영화와 상영 예정인 영화를 각각 확인 할 수 있어요.
- 각 탭에서 평점순, 예매율 순으로 정렬하여 확인 할 수 있어요.
- 현재 상영중인 영화의 예고편을 캐러셀로 확인 할 수 있어요.
- 영화 상세 내용을 Modal로 띄워 주소 이동 없이 이용 할 수 있어요.
- 평점 및 후기를 상세페이지에서 등록 할 수 있어요.
- 등록된 후기를 수정 및 삭제 할 수 있어요.
- 페이지네이션을 통해 등록된 후기를 모두 확인 할 수 있어요.
예매 조건
- 예매자의 연령이 상영 중인 영화의 상영등급에 부합되지 않는 경우 예매가 불가능하도록 했어요.
- 로그인 없이 예매 페이지로 이동 시, 로그인 페이지로 즉시 이동할 수 있는 Modal을 띄웠어요.
영화 옵션 선택
- 사용자의 동작에 따라 선택 가능한 옵션을 필터링하고, 선택된 옵션을 퀵메뉴에서 바로 확인 할 수 있도록 했어요.
- 영화 옵션을 모두 선택해야 다음 단계로 이동할 수 있도록 하기위해 버튼의 변화를 시각적으로 구현하였어요.
좌석 선택
- 좌석의 각 열의 가격을 바로 확인 할 수 있도록 색상으로 구분하였어요.
- 색약/색맹인 사용자도 쉽게 좌석의 가격을 볼 수 있도록 좌석의 모양을 다르게 했어요.
- 예약이 완료 된 좌석은 비활성화 하여 사용자가 선택하지 못하도록 구현했어요.
- 선택된 좌석의 번호를 저장하고, 가격을 합산하여 서버에 전달하여 데이터 관리가 용이하게 했어요.
- 사용자가 선택한 좌석의 총 가격을 합산하여 퀵메뉴에서 바로 결제가 가능하도록 구현했어요.
-
Header에 간소화된 예매 정보를 보여주어 쉽게 정보를 확인 할 수 있도록 했어요.
-
Main 페이지에서 마이티켓 클릭시 영화 예매 내용을 Modal로 띄워 쉽게 확인 할 수 있도록 했어요.
- 매출의 11%를 담당하는 스토어 페이지를 구현하여 구매 가능한 제품을 확인 할 수 있도록 했어요.
React와 Styled-component를 사용했어요!
- 자유로운 CSS 커스텀 컴포넌트를 만들고, props를 참조하여 props의 값에 따라 스타일을 변경하여 작업의 효율을 올렸어요
- className의 중복이나 오타로 인한 버그를 줄여주었어요.
그 외에 다양한 라이브러리를 사용했어요!
- slick, calender, pagnation을 사용하여 작업시간을 단축시킬 수 있었어요
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent