joonsungum / apps.namhae.life Goto Github PK

현재 단순하게 메뉴 이름, 가격으로만 표시되고 있는 메뉴 카드의 레이아웃을 개선한다.

• 메뉴 사진이 있다면 메뉴 사진을 보여줌
• 메뉴 사진이 없다면 적절한 샘플 이미지를 보여줌
• 메뉴의 타입에 메뉴의 간단한 설명 description 필드 추가
• 메뉴 설명을 메뉴 카드에 추가
• 메뉴 카드 하단에 '담기' 버튼을 추가
• 데스크탑, 모바일에서 바르게 표시되는지 반응형 디자인 점검

현재 OrderDrawer에 하드코딩으로 '주문한 음식 1' 등으로 표현되어 있는 공간은 사용자가 메뉴 세부 정보에서 '담기' 버튼을 눌렀을 때 주문한 내역을 확인 할 수 있도록 마련된 공간임. 이 영역에 표시될 카드의 레이아웃을 menus 객체의 정보를 이용하여 하드코딩으로 OrderCard 컴포넌트를 퍼블리싱 필요함.

• ListItem 태그 하위에 들어갈 OrderCard 컴포넌트 작성
• OrderCard에는 메뉴의 이름, 가격이 표시됨
• OrderDrawer 하단에는 List에 속한 모든 메뉴의 가격이 합산되어 표시됨
• OrderDrawer 하단에는 '결제하기' 버튼이 표시됨

현재 orders 쿼리를 이용하여 받아온 정보를 활용할 수 있도록 업데이트 됨

각 메뉴마다 url 값이 할당되어 메신저를 통해 원하는 메뉴를 다른사람에게 전송할 수 있어야함

현재 상점 상세 페이지의 경우
/pages/store/[id].tsx
파일에 기술되어 있음

하위 주소를 추가하기 위해서는 파일 구조를 살짝 바꿔주어야 함
/pages/store/[id]
폴더를 만든 뒤, 현재 /pages/store/[id].tsx 파일의 내용 전부를 /pages/store/[id]/index.tsx 로 옮기면 현재의 동작과 똑같이 동작함

다음으로 메뉴 상세페이지를 만들기 위해서는
/pages/store/[id]/menu/
폴더를 만들고 그 안에 [id].tsx 파일을 만들면 메뉴 상세 페이지가 만들어짐

작업 내용

현재 Stores 와 Menus 는 독립된 오브젝트로 존재하고 있음
이를 Stores 내에 menus 로 서로의 종속 관계를 표현하도록 개선 필요

Stores

• Create
• Read
• Update
• Delete

Menus

• Create
• Read
• Update
• Delete

• Orders 테이블 추가 및 CRUD 추가

최소로 구현된 목업 데이터에 필드 추가 필요

음식점 데이터

• 정기 휴일 필드 추가 (holidays: string[])

메뉴 데이터

• 점심 주문만 가능 필드 추가 (isLunch: boolean)
• 저녁 주문만 가능 필드 추가 (isDinner: boolean)
• isAvailable 필드 삭제

작업 내용

데스크탑 레이아웃에서 Drawer 가 펼쳐진 상태로 표현되고 있음
이를 버튼을 눌러서 펼치고 닫고 할 수 있도록 개선

ref

https://mui.com/components/drawers/#persistent-drawer

현재 5개의 음식점 정보만 등록되어 있는데, 읍내에 있는 배달 가능한 음식점과 메뉴 리스트를 JSON 데이터에 추가 필요

• 한왕스 1980 추가
• 본죽 추가
• 미스터빠삭 추가
• 어가 추가
• 교촌치킨 추가
• 엔뉴 도시락 추가
• 테그42 추가
• 문화공동체 꽃밭 추가

• API 서버와 graphql 통신을 위한 apollo-client를 추가하고 서버에서 Stores, Menus 등의 데이터를 전송받음
• 테스트용 json 데이터 삭제

api.namhae.life, db.namhae.life 두 주소에 API와 DB를 세팅하여 연결