1. 프로젝트 개요
이번 파트에서는 예약하기와 나의 예약 내역확인 기능을 구현해보겠습니다.
상세정보 화면에서 예매하기를 누르면 상품정보, 티켓 수 선택, 예매자 정보입력폼, 약관이 보이게 됩니다.
사용자는 티켓을 선택하고 예매자 정보를 입력한 후, 약관에 동의하고 예약하기 버튼을 누르면 예약정보가 저장됩니다.
예약정보가 저장된 후 메인화면으로 리다이렉트(redirect)됩니다.
메인화면의 상단에서 예약확인 버튼을 누르면, 예약자 이메일을 입력할 수 있는 폼이 보여집니다.
예약자 이메일을 입력 후 내 예약 확인 버튼을 누르면 예매 내역이 보여집니다.
이번 파트에서는 백엔드의 경우 기존에 배운 내용을 토대로 구현을 이어나가시면 됩니다.
프론트엔드에서는 이번 파트에서 새롭게 배운 기술을 포함해서 추가로 구현해야 합니다.
기획서
위 영상에도 나왔던 기획서는 아래 링크를 통해서 확인하실 수 있습니다.
이번 파트는 아래 기획서 중 14-19 페이지 부분만 개발합니다.
2. 프로젝트의 개발스펙
웹프론트엔드 기술요구사항
자주 사용되는 함수를 객체형태로 묶어서 사용해야 합니다.
form에 입력된 값을 체크를 할 때는 값의 유효성(validation)을 체크해야 하며, 정규표현식을 써서 구현해야 합니다. (이메일 필드는 반드시 유효성 검증해야 합니다.)
UI 별로 기능을 묶어서 객체화된 모듈을 만들어야 하며, prototype 방식을 적용해야 합니다.
이전 프로젝트와 같이 클린코드의 규칙대로 코드를 구현합니다.
웹백엔드 기술요구사항
예매확인을 위해 이메일을 입력 후 예약확인을 눌렀을 때 예매 내역이 있다면 이메일 정보를 세션에 저장합니다.
메인화면의 경우 세션에 이메일 정보가 있을 경우 예매 확인 버튼 대신 이메일을 보여주고, 이메일을 클릭하면 해당 이메일로 예약된 예매 내역이 보입니다.
3. Web API 스펙
예약하기 및 예약정보 조회 API 스펙 & test
- POST (예약하기): /api/reservations
- PUT (예약취소하기): /api/reservations/{reservationInfoId}
- GET (예약정보 조회): /api/reservations
링크
www.boostcourse.org/web316/project/11/content/9?isDesc=false#summary
'프로젝트 정리 > Naver Boost Course' 카테고리의 다른 글
file upload의 확장자검사 및 썸네일노출 (0) | 2021.03.30 |
---|---|
file upload방법의 이해 (0) | 2021.03.30 |
네이버 부스트 코스 풀스택 과정 리팩토링 시작 (0) | 2021.03.24 |
BE_PJT D-1. 예약관리 시스템: 상세페이지 (0) | 2021.03.24 |
BE_PJT C-1. 예약: 메인페이지 (0) | 2021.03.24 |