Nuber-Client

들어가기nuber-front 시작하기$ npx create-react-app eat-frontend --template=typescript$ git remote add origin \~\~~www.tailwindcss.comhttps://tailwindcss.

apollo setupreact-router-dom코드가 길데 작성되어 있는데, 확인할 부분만 확인하면 됨.공식문서https://www.apollographql.com/docs/react/get-started/npm install @apollo/client g

들어가기local only field는 schema에 정의되지 않은 것을 말함.서버에는 없지만, application에는 있는 state.login, logout, token 같은것.login상태인지 아닌지를 알아봐줌.모든 page에서 다룰 수 있는 state임,순서대

** react-hook-form 햇갈리는 error부분만 잘 봐둔다. useMutation은 빼고 react-hook-form부분만 다룬다. select부분과 formState:{errors}를 잘 봐둔다.!!!! ** 1. src/pages/login.tsx ~

들어가기useMutation 및 useQuery를 사용하기 위해server에 있는 dto들을 front로 다 불러들이는 과정매우 중요하므로 집중할것.npm i -D @graphql-codegen/cliroot에 codegen.yml },

지금까지의 설명을 바탕으로 login, createAccount를 완성한다.그리고 어느page에서든지 사용될 useMe 함수를 hook에 만들어 놓는다.localstorage에 token을 담기 위해서 key를 하나 만든다.

들어가기Front에서 사용될 route를한꺼번에 정리 한다.

들어가기Client로 접속했을때,모든 식당들이 나열되어 보이는 page

들어가기client에서 query 실행시 받아오는 data들을 깔끜하게 정리해 놓은 것이fragment참고만 하고 실제 사용되는 코딩은 위의 restaurants.tsx에 잘 나와있음.

들어가기Client 메인 페이지에서 한식/일식/중식등 카테고리를 클릭하면, 해당, 카테고리식당으로 이동하면 나오는 페이지.Client 메인 페이지에서식당을 이름으로 검색했을떄, 나오는 페이지

들어가기Owner로 접속을 했을때, restaurant를 create하는 page.다음 page에서 file Upload를 알아본다.

나의 식당(myRestaurants) 페이지에서식당 하나를 클릭했을때, 보여지는식당 Detail Page NOTICE!!! 나의 식당들 중 하나를 클릭했을떄, 하나의 식당을 자세히 볼수 있고, Order가 들어왔을때, subscription으로 실시간으로 od

create-restaurant와add-dish를 구현해본다.create-restaurant에서는 사진을 S3에 upload해본다.backend에 upload API를 또한, 만들어 주어야한다.오늘도 빠이팅하자

들어가기Owner의 restaurant page에서 식당의 menu를 추가하는 page 및 componentmenu의 option받는거 떄문에 복잡해짐.집중할것!!

들어가기Client가 Restaurant에서 menu를 보고주문을 하는 page.Restaurant Detail Page,Dish Component,dish-option Component로 구성됨.menu를 Click했을떄, menu가 Item에 담기는 과정option

들어가기주문이 했을때, Owner가 주문을 실시간으로 바로 받을 수 있고,Owner가 Order상태를 pending에서 cooking, cooked등으로editOrder할 수 있게 subscription을 setup한다.npm i graphql-wsapollo subs

들어가기Front에서 subscription구현.1\. client가 confirm Order하면, owner가 실시간 order받음.2\. owner가 order status변경하면, 실시간으로 client가 확인 가능3\. client가 confirm Order하면

들어가기delivery의 dashboardorder가 들어오면, subscription으로push가 오고,현재 driver의 위치에서 주문자의 위치까지 지도에 가는 길이드러나게 함.googl map 다루기에 집중할것https://www.npmjs.com/pac

Delivery Dashboard1에서나의 page에 구글 map을 불러오고,현재 나의 위치를 확인하고,지정한 위치에서 나의 위치로 지도를 이동시키는거 까지 해봄.이제 지정한 위치에서 나의 위치로 이동하는 도로를 painting해본다.https://develo

들어가기현재 위치에서 찍혀지는 위치로 지도에 그림그려주는것,geocoder는 좌표를 주소로, 주소를 좌표로 만들어줌.NOTICE!!!구글맵사용은 처음 접해보는 것이라서 매우 어려워 보이므로해야할거는 복습, 또 복습!!!!주소를 위도,경도로 위도,경도를 주소로 바꿔주는

Driver Dashboard의 마지막 부분. Order가 들어오고 Owner가 status를 cooked를 했다면, Driver에게 Order가 push로 가고, Driver가 status를 PickedUp, Deliverd라고 바꿔줄 수 있다. 또한, Client