1. 프로젝트 개요

이번 프로젝트에서는 예약하기와 나의 예약 내역확인 기능을 구현해 보겠습니다.

상세정보 화면에서 예매하기를 누르면 상품정보, 티켓 수 선택, 예매자 정보입력폼, 약관이 보이게 됩니다.

사용자는 티켓을 선택하고 예매자 정보를 입력한 후, 약관에 동의하고 예약하기 버튼을 누르면 예약정보가 저장됩니다.

예약정보가 저장된 후 메인화면으로 리다이렉트(redirect) 됩니다.

메인화면의 상단에서 예약확인 버튼을 누르면, 예약자 이메일을 입력할 수 있는 폼이 보여집니다.

예약자 이메일을 입력 후 내 예약 확인 버튼을 누르면 예매 내역이 보여집니다.

이번 파트에서는 백엔드의 경우, 기존에 배웠던 내용을 토대로 구현을 이어 나가시면 됩니다.

프론트엔드에서는 이번 파트에서 새롭게 배운 기술을 포함하여 추가로 구현해야 합니다.

기획서

기획서는 아래 파일을 통해서 확인하실 수 있습니다.

이번 파트는 아래 기획서 중 14-19 페이지 부분만 개발합니다.

2. 프로젝트의 개발 스펙

웹 프론트엔드 기술 요구사항

• 자주 사용되는 함수를 객체 형태로 묶어서 사용해야 합니다.
• form 에 입력된 값을 체크할 때에는 값의 유효성(validation)을 체크해야 하며, 정규표현식을 써서 구현해야 합니다.
  (이메일 필드는 반드시 유효성 검증해야 합니다.)
  
• UI 별로 기능을 묶어서 객체화 된 모듈을 만들어야 하며, prototype 방식을 적용해야 합니다.
• 이전 프로젝트와 같이 클린코드의 규칙대로 코드를 구현합니다.
  
  

웹 백엔드 기술 요구사항

• 예매 확인을 위해 이메일을 입력 후 예약확인을 눌렀을 때, 예매 내역이 있다면 이메일 정보를 세션에 저장합니다.
• 메인화면의 경우 세션에 이메일 정보가 있을 경우 예매 확인 버튼 대신 이메일을 보여주고, 이메일을 클릭하면 해당 이메일로 예약된 예매 내역이 보입니다.

3. 프로젝트 개발과정 참고

[예약하기 및 예약정보 조회] API 스펙 & test

• POST (예약하기): /api/reservations
• PUT (예약취소하기): /api/reservations/{reservationInfoId}
• GET (예약정보 조회): /api/reservations
  

4. 평가기준표

[화면 레이아웃]

1. 예약하기 - 예약 확인하기
   
   • 제공되는 것을 기본으로 HTML/CSS를 작성해야 하며, 화면 구성은 기획서대로 보여야 한다.
     
     

[기능]

1. 예약하기 - 티켓 입력
   
   • 기획서 내용대로 인터랙션이 동작한다.
   • +, - 버튼을 누르면 숫자가 증가/감수되고, 금액이 변경된다.
   • 0명이면 버튼이 비활성화 된다.
     
     
2. 예약하기 - 예매자 정보 입력
   • 기획서 내용대로 인터랙션이 동작한다.
   • 총 매수는 예약상황을 합쳐서 개수가 변경될 때 바로 변화하여 노출된다.
   • 연락처 정보는 전화번호 포맷 (휴대폰/일반전화 모두 가능)만 입력이 가능해야 한다.
     그 외 값이 입력되면 '입력된 값의 형식이 틀렸다'는 메세지를 자유롭게 만들어서 화면에 노출해야 한다.
     
     
3. 예약하기 - 약관동의 및 예약
   • 기획서 내용대로 인터랙션이 동작한다.
   • 약관은 접기/보기로 토글된다.
   • 약관정보 동의에 체크하면 활성화 된 상태로 보여진다.
   • 예매 개수가 1개 이상, 예매자 입력, 연락처 입력, 약관동의 완료된 상태라면 모든 값이 유효한 상태이다.
   • 모든 정보가 유효하다면 '예약하기' 버튼이 활성화된 상태로 노출된다.
     
     
4. 예매 내역 확인 (예약확인) - 이메일 로그인
   • 기획서 내용대로 인터랙션이 동작한다.
   • 이메일 규칙 검사를 한다.
     
     
5. 예매 내역 확인 (예약확인) - 예약 취소 기능
   • 기획서 내용대로 인터랙션이 동작한다.
   • 취소를 누르면 "취소하시겠습니까?"라는 메세지 레이어가 화면 가운데 뜨고 확인/취소를 통해 즉시 반영된다.
     취소된 이후에는 '취소된 예약'으로 새롭게 화면에 결과가 나온다.

[소스코드]

1. JavaScript - 객체지향 개발
   
   • 자주 사용되는 함수는 객체 형태로 묶어서 사용해야 한다.
   • UI 별로 기능을 묶어서 객체화 된 모듈을 만들어야 하며, prototype 방식을 적용해야 한다.
     
     
2. JavaScript - 정규표현식 기반 유효성 검증
   • form에 입력된 값을 체크를 할 때는 값의 유효성(validation)을 체크해야 하며, 정규표현식을 써서 구현해야 한다.
     (이메일 필드는 반드시 유효성 검증을 해야함)
     
     
3. JavaScript 클린코드
   • 함수 하나에 여러개의 기능을 넣지 않고,함수를 여러개로 분리한다.
   • 함수이름은 동사+명사이며 함수의 의도를 충분히 반영하고 있는가?
   • 함수 안의 내용은 이름에 어울리게 하나의 로직을 담고 있는가?
   • 중복코드를 제거하고 공통부분을 공통함수로 만든다.
   • 의도가 드러난 구현패턴. 의도가 표현되지 않은 코드를 최소한으로 줄이도록 한다.
   • 전역변수를 없애려고 노력하자. (지역변수로 넣으면 될 걸 전역공간에 두지 말기 등)

5. 프로젝트 제출방법

본 프로젝트는 2023년 5월 31일자로 리뷰 제출이 중단되었습니다. 개인 학습용으로만 활용 부탁드립니다.

※ 동료 학습자의 원활한 학습을 위해 프로젝트 관련 소스코드 유출(SNS, Gitlab, Github)을 엄격히 금지합니다.

※ 개발환경의 버전을 맞추는 일은 서버 오류 등의 이슈를 방지할 수 있어 매우 중요합니다. 반드시 권장 버전으로 설치해 주세요.

※ 부스트코스의 프로젝트는 순차적으로 학습하도록 구성되어 있습니다. 프로젝트 진행에 참고 부탁드립니다.