1. 프로젝트 개요

이번 프로젝트에서는 예약 서비스의 상세보기 페이지를 만들어 보겠습니다.

상세보기 페이지는 메인화면에서 각 아이템을 선택한 경우 이동하는 페이지입니다.

해당 페이지에서는 각 아이템의 상세한 정보를 노출해야 합니다.

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

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

기획서

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

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

2. 프로젝트의 개발 스펙

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

• 전체 코드는 객체리터럴 패턴으로 구현해야 하고, 더불어 전역변수를 최소화 해야 합니다.
• 한 개 이상 객체리터럴을 사용할 수 있습니다.
• 상단 타이틀 이미지 영역의 애니메이션은 CSS3의 transition과 transform을 활용해서 구현해야 합니다.
• 상단에 추가로 노출해야 하는 기타 이미지는 Ajax요청을 통해 가져옵니다.
• DOMContentloaded 이후에 모든 자바스크립트 로직이 동작하게 합니다.
• Event delegation으로 처리할 수 있는 영역은 최대한 delegation방법으로 처리합니다.
• Templating 작업은 handlebar 라이브러리를 사용해서 구현해야 합니다. 
  
• 함수 하나에 여러 개의 기능을 넣지 않고, 함수를 여러 개로 분리합니다.
• 중복코드를 제거하고 공통부분은 공통함수로 만듭니다.
• 변수와 함수 이름은 본인이 정한 코딩컨벤션을 최대한 지킵니다.
• 접기/펼치기 기능은 jQuery 라이브러리를 사용할 수 있습니다.
  
  

웹 백엔드 기술 요구사항

• controller, service, dao로 레이어드 아키텍쳐를 구성합니다.
• spring JDBC를 이용하여 주어진 테이블로부터 입력, 수정, 삭제, 조회하는 DAO와 DTO를 작성합니다.
• 서비스 인터페이스를 작성하고 해당 인터페이스에 비지니스 메소드를 추가합니다.
• 서비스 인터페이스를 구현하는 클래스를 작성하고 클래스 내 메소드에 적절한 트랜잭션에 관련된 애노테이션을 사용합니다.
• 클라이언트에게 Web API를 제공하기 위해 RestController 를 작성합니다.

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

[Web API 스펙] API 스펙 & test

• GET (상품 정시 정보 구하기): /api/products/{displayInfoId}
  

product_price 테이블에 price_type_name 값은 아래와 같습니다.

성인(A), 청소년(Y), 유아(B), 셋트(S), 장애인(D), 지역주민(C), 어얼리버드(E) 기타 다른 유형이 있다면 위와 겹치지 않게 1자로 정의하여 기입, VIP(V), R석(R), B석(B), S석(S), 평일(D)

4. 평가기준표

[화면 레이아웃]

1. 상세페이지 하단 영역
   
   • 공지사항과 지도는 일반 이미지를 사용해서 추가한다. 지도 이미지는 동일한 지도를 재사용해도 좋다.
     
     

[기능]

1. 타이틀 영역 배경이미지 슬라이딩
   
   • 서버에 기타(etc)로 존재하는 이미지가 있다면, 좌/우 슬라이딩 버튼을 노출하고 이미지가 슬라이딩 애니메이션이 되어야 한다.
     
   • 무한 슬라이딩으로 계속 동작한다.
     
     
2. 펼쳐보기
   • 접기/펼치기를 선택하면 레이어의 높이가 변하면서 반응한다.
     
     
3. 하단영역의 상세정보와 오시는길
   • 탭UI로 동작한다. 화면 새로고침 없이 탭을 통해서 동작해야 한다.

[소스코드]

1. HTML, CSS 규칙 기반 코딩
   
   • 제공되는 HTML/CSS를 수정할 수 있으며, 제공되는 코드의 형태의 구조를 지나치게 수정하지 않도록 한다.
   • 기존에 제공되는 class와 id규칙에 따라서 새로운 내용을 추가할 수 있다.
     
     
2. JavaScript 객체 리터럴 패턴 사용
   
   • 전체 코드는 객체리터럴 패턴으로 구현해야하고, 더불어 전역변수를 최소화 해야 한다.
     한 개이상 객체리터럴을 사용할 수 있다.
     
     
3. 브라우저 개발 규칙
   
   • 상단 타이틀 이미지 영역의 애니메이션은 CSS3의 transition과 transform을 활용해서 구현해야 한다.
   • 상단에 추가로 노출해야 하는 기타이미지는 Ajax요청을 통해 가져온다.
   • DOMContentloaded 이후에 모든 자바스크립트 로직이 동작되게 한다.
   • Event delegation으로 처리할 수 있는 영역은 최대한 delegation방법으로 처리한다.
     
     
4. JavaScript 라이브러리 사용
   
   • Templating 작업은 handlebar 라이브러리를 사용해서 구현해야 한다.
   • 접기/펼치기 기능은 jQuery 라이브러리를 사용할 수 있다.
     
     
5. JavaScript 클린코드
   • 함수 하나에 여러개의 기능을 넣지 않고,함수를 여러 개로 분리한다.
   • 함수이름은 동사+명사이며 함수의 의도를 충분히 반영하고 있는가?
   • 함수안의 내용은 이름에 어울리게 하나의 로직을 담고 있는가?
   • 중복코드를 제거하고 공통부분을 공통함수로 만든다.
   • 의도가 드러난 구현패턴. 의도가 표현되지 않은 코드를 최소한으로 줄이도록 한다.
   • 전역변수를 없애려고 노력하자. (지역변수로 넣으면 될 걸 전역공간에 두지 말기 등)
     

5. 프로젝트 제출방법

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

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

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

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