- 예약 목록과 예약 상세를 표출한다
- 예약 목록 내에 모든 예약 아이템 (하나의 예약 단위)을 표출한다.
- status가 done 이면 미표출
- 예약 아이템 내에 예약 데이터를 좌측, 중앙, 및 우측으로 3열로 구분하여 표출한다.
- 좌측에 예약 시간과 예약 상태를 1열 2행으로 중앙 정렬로 표출한다.
- 예약 상태는 한글로 표출한다.
- reserved는 “예약" (글씨 색상 - #3BB94C)
- seated는 “착석 중” (글씨 색상 - #162149)
- 중앙에 예약자명, 테이블명, 방문자수, 및 메뉴를 1열 3행으로 표출한다.
- 예약자명 및 테이블명은 아래 형식에 맞춰 한 줄로 표출한다.
- “예약자명 - 테이블명 [, 테이블명]”
- 방문자수는 아래 형식에 맞춰 표출한다.
- “성인 00 아이 00”
- 메뉴는 아래 형식에 맞춰 한 줄로 표출한다.
- “메뉴명(갯수) [, 메뉴명(갯수)]”
- 우측에 [착석] 또는 [퇴석] 버튼을 표출한다.
- 예약 상태에 맞춰 버튼을 표출한다.
- reserved면 [착석]
- seated면 [퇴석]
- [착석] 버튼을 클릭하면, [퇴석]으로 버튼을 변경한다.
- [퇴석] 버튼을 클릭하면, 예약 목록에서 제거한다.
- 예약 아이템을 클릭하면 예약 상세 (예약 및 고객 정보)에 관련 데이터를 표출한다.
- Desktop은 오른쪽 예약 상세에 표출
- 초기 예약 상세는 첫 번째 예약 아이템을 표출
- Mobile은 예약 상세 팝업에 표출
- 팝업의 닫기를 터치하면 팝업 종료
- dim 영역을 터치하면 팝업 종료
- 고객 메모 및 요청 사항 데이터는 최대 3행으로 표출
- 그 외 데이터는 1행으로 표출
- VanillaJS/CSS 기반으로 개발하기를 권장합니다.
- SCSS 사용 가능합니다.
- ES6+로 개발하기를 권장합니다.
- Desktop은 스크린 너비 1024픽셀 이상을 기준으로 합니다.
- Mobile은 스크린 너비 1024픽셀 미만을 기준으로 합니다.
- 320픽셀 미만은 지원하지 않아도 됩니다.
- Cross Browsing 해주세요.
- 인터넷 익스플로러 10 이하는 지원하지 않아도 됩니다.
- 예약 목록 데이터는 API section을 참고 해주세요.
- 팝업 표출 시, slide-up 으로 fade-in 애니메이션 처리
- 정돈 및 정렬된 UI로 작업 해주세요. (디자인 명세 참고)
- 데이터의 Layout은 어떠한 경우에도 유지 해주세요.
- 예컨대, 말줄임 등 필요하다면 적용 해주세요.
- Layout, Font 크기 등은 첨부된 디자인과 최대한 비슷하게 작업 해주세요.
- 모든 시간은 HH:mm 형식으로 표출 해주세요.
- 제출된 결과물은 실행 가능해야 합니다.
- 필요하다면 실행 방법을 작성 해주세요.