# 4/19 화요일

## to do
- [ ] 개발환경 설정
- [ ] 스토리

## 개발환경 설정

### 스타일

- css
- styled-components

- ESLint

- Prettier

### 환경구성

- CRA(create React App)

## 스토리

### 레이아웃 및 메뉴(헤더) 노출 효과

- 헤더에 있는 메뉴에 마우스를 올리면 메뉴에 해당하는 세부 메뉴 레이어가 노출된다.
- (Header)
- 세부 메뉴 레이어의 Item 에 마우스를 올리면 텍스트 색이 변경되고 밑줄이 생긴다.
- (Header)
- 메뉴 영역을 벗어나면 레이어가 사라진다.
- (Header)
- `모든 카테고리 보기` 를 누르면 추가 카테고리가 노출된다.
- (Main)

### 메뉴 카드
- 메뉴카드의 가격정보 표시
- (FoodCard)
- props 로 크기에 대한 정보 받음
- 할인 일 경우 할인된 가격과 같이 표시
- back 과 이야기 해서 데이터 구조로 할인된 가격을 받음
- 이벤트 배지가 있는 경우 노출
- 이벤트 여부 확인 위한 데이터(status)

### 베스트 반찬 탭 (기획전?)

- Tab list 를 누르면 Tab 에 해당되는 메뉴 3개를 받는다.
- (Task) 백엔드에 query 로 랜덤한 메뉴를 달라는 정보를 준다 (get?random=true&amount=3)
- (MainContent-Tabs)

### 메뉴 슬라이딩 효과
- 카테고리 메뉴는 좌/우 슬라이딩 효과로 동작한다.
- (SubContent)

- 좌/우 버튼을 누르면 새로운 메뉴 4개가 노출 된다.
- 새로운 메뉴 4개를 set ?
- 한번에 모든 메뉴를 받아와서 carousel ?

- 메뉴는 4개 이상일 수 있으며 4의 배수로 떨어지지 않으면 1개 혹은 2개씩 갯수에 맞춰 이동한다.

- 더이상 불러올 데이터가 없다면 화살표 색은 회색으로 변경된다.

- (Task) 화살표를 누를 때 마다 요청하는건지?

### 호버 효과
- 메뉴 카드에 이미지를 호버하면 `새벽배송/전국택배` 스티커 노출
- (FoodCard)
- 라지, 미디엄만?

### 상세 페이지 모달
- 메뉴 카드를 클릭하면 상세 페이지가 화면 가운데에 모달로 노출
- (Modal-FoodDetail)

- 상세 페이지에 대한 모든 내용은 데이터 요청

- 썸네일 이미지를 선택하면 메인 이미지가 변경

- 수량을 늘리면 가격정보 추가

- 주문하기 버튼을 누르면 해당 상품에 대한 주문 요청, 성공하면 이전 화면으로 돌아감

- 재고가 부족하거나 주문이 불가능하면 에러코드에 맞는 안내 화면 표시