React로 티켓 구매 사이트를 만들었습니다.
firebase 인증, 실시간 데이터베이스를 사용했습니다.
기능
1. 로그인, 회원가입
하단의 버튼을 눌러 로그인, 회원가입 전환이 가능합니다.
이메일과 비밀번호를 사용하는 인증 방식입니다.
로그인, 회원가입 오류 시에는 버튼 위에 오류 메세지가 뜹니다.
2. 공연 목록 보기
공연 목록은 react-slick을 이용했습니다. 화살표를 눌러 목록을 볼 수 있습니다.
3. 티켓 예매하기
이미 예매된 좌석은 회색 표시가 되어있고, 좌석을 선택해야만 다음 페이지로 넘어갈 수 있습니다.
결제 후 (해당 프로젝트에서는 실제 결제 과정이 없습니다.) 구매한 티켓을 볼 수 있는 페이지로 넘어갑니다.
공연 좌석들은 행과 열 정보를 가져와 map을 통하여 그 개수만큼 그리게 했습니다. 이미 예매가 된 좌석의 경우 sold라는 className을 줘서 선택하지 못하게 처리했습니다.
4. 구매한 티켓 목록 보기 및 예매 취소하기
헤더의 오른쪽에 있는 티켓 아이콘을 눌러 이동할 수 있습니다.
구매한 티켓들의 정보를 볼 수 있으며, 예매 취소도 가능합니다.
5. 로그아웃
헤더의 버튼을 눌러 로그아웃을 할 수 있습니다.
6. 반응형 CSS
모바일에서도 편히 볼 수 있게 반응형 CSS 작업을 했습니다.
관리
노션
노션에 미리 정리를 해두니 여러 기기에서 켜보기도 좋고 수정하기도 편했습니다.
그 외
데이터베이스
데이터베이스에서 관리한 항목은 공연 목록, 팔린 티켓, 유저가 구매한 티켓입니다.
공연 목록
shows/show의 고유한 id 경로에 공연 정보를 저장했습니다.
id, row, col, date, title, description, hall, img_url을 담고 있습니다.
팔린 티켓
soldSeats/show의 고유한 id/구매한 티켓의 고유한 id 경로에 공연 각각의 팔린 티켓을 기록했습니다.
row, col을 저장해뒀습니다.
유저가 구매한 티켓
userTicket/user의 고유한 id/구매한 티켓의 고유한 id 경로에 정보를 저장했습니다.
