[부스트코스] 프로젝트 3. 예약관리 시스템: 메인페이지 [2차 제출 - PASS]

[BoostCourse] 프로젝트 3. 예약관리 시스템 : 메인페이지

 - 이전 글

 - [부스트코스] 프로젝트3. 예약관리 시스템: 메인페이지 설계 및 분석

 - [부스트코스] 프로젝트3. 예약관리 시스템: 메인페이지 1차 제출 - FAIL (피드백)

 - 다음 글

 - [부스트코스] 프로젝트3. 예약관리 시스템: 메인페이지 피드백 적용

 - [부스트코스] 프로젝트3. 예약관리 시스템 (BE) 수정사항

 - [부스트코스] 프로젝트3. 예약관리 시스템 (BE) - PASS (피드백)

 - [부스트코스] 프로젝트3. 예약관리 시스템 (FE) - PASS (피드백)

 - 기능 구현은 했으나 상세부부분을 수정해서 다시 제출하도록 한다.

 - 구현 방식을 정리

Project3 설정 및 구조 설계.pdf

1. List<DTO> 방식으로 JS에서 리턴받아 String 방식으로 처리했으나 Map 방식으로 API 수정

 - /api/promotions

 - /api/categoeis

- /api/products

 * index 컬럼이 하나 더 있는 이유는 product 데이터를 호출 했을 때 같은 product에 장소만 달라질 수 있다. 

 * 이와 같은 경우 본인은 id를 홀 짝으로 나눠서 <ul class="lst_event_box"> 태그 좌측, 우측으로 나눠 넣었었는데, 장소가 달라도 같은 product이기 때문에 한쪽으로 쏠리는 문제가 발생했다.

 * 그래서 데이터를 좌측, 우측으로 구분해서 넣을 구분자가 필요해, 임의로 쿼리에 rownum을 통해 임시로 만들었다.

 * 같은 product이면서 장소가 다를 경우 id가 같음에도 product 하나하나를 구분할 수 있는 index를 생성

 * 물론 다른 방법이 있을 수도 있다.

2. API 호출과 결과값을 받는 JS 쪽 구조 변경

 - 공통 모듈로 사용할 수 있는 코드로 최대한 작성

3. 자바스크립트 구조 변경 및  Promotions 캐러셀 슬라이드 구현

 - 작성중

 - 찾아본 참조 사이트

  1) https://freefrontend.com/css-carousels/

  2) http://hong.adfeel.info/frontend/%EA%B0%84%EB%8B%A8%ED%95%9C-carousel-%EC%98%88%EC%A0%9C/

  3) https://www.cssscript.com/top-10-javascript-css-carousels/

 - 결국 그냥 내가 하던데로 하게됨... CSS 적용 되게 하기가 힘듬..

자바스크립트 구조

1. commons.js, validations.js, ajax.js

2. scriptStart.js

3. categories.js, promotions.js, products.js