Describe the bug

• 주문 요약 페이지에서 주문 페이지로 뒤로가기 할 시 MenuList가 다시 로딩됨 (네트워크 요청 발생)

To Reproduce
기준 커밋 : 0a7e34b

• 주문 페이지 (Event)에서 접수 현황 버튼을 통해 주문 요약 페이지로 이동 후 뒤로가기

Expected behavior

• 뒤로 가기 시 원래 로딩되어 펼쳐져 있던 MenuList가 새로고침 없이 그대로 유지되어야함

Screenshots

• to be added

Describe the bug

• lib/api/index.ts 에서 REACT_APP_USE_MOCK 여부에 따라 mocking 된 API를 export
• mock을 사용하지 않는 상태에서도 빌드시 번들에 mocking 데이터가 포함됨
• tree shaking이 제대로 동작하지 않는것 같음

To Reproduce

• 기준 커밋 : 3a87992
• ANALYZE=1 npm run build 실행시 build된 번들 분석 사이트 표시
• main 청크에 mocking에 사용되는 shop-sample.json이 포함되어있음

Expected behavior

• REACT_APP_USE_MOCK=1 플래그가 설정된 경우에만 해당 내용이 빌드결과물에 포함되어야함.

Screenshots

Desktop (please complete the following information):

• OS: macOS BigSur 11.2.3(20D91)
• Node.js: v15.11.0

Additional context

Is your feature request related to a problem? Please describe.
현재 타입 선언에 혼동을 주는 부분과 명확하지 않은 부분이 존재.

• 타입 이름이 명확하지 않음
  • IOrder vs IOrderSummary 는 역할이 비슷해보임.
• 타입 선언 위치가 구분이 명확하지 않은채 뒤섞여있음.
  • IOrder는 types/common.ts 에 있어야 할 것으로 보임

Describe the solution you'd like

• 타입 이름을 좀 더 명확하게
• 배민 API에서 사용되는 type은 별개의 파일로 분리 (e.g., types/baemin.ts)

Describe alternatives you've considered

Additional context

Motivation
Redux store를 Storybook에서 mocking할 필요가 있다.

Storybook의 Decorator를 통해 해결할 수 있는것으로 보임.

참고
https://www.digitalocean.com/community/tutorials/react-storybook-with-redux

Originally posted by @LunaTK in #6 (comment)

Motivation

• Storybook을 통해 component-based 개발

참고

• https://storybook.js.org
• #12

Current Behavior

import 시 깊은 directory에서 ../ 이 반복적으로 사용

// src/lib/api/api.ts
import { IOrderSummary } from '../../store/types';
import { FirestoreDocRef, IEventInfo, IShopInfo } from '../../types/common';

Expected Behavior

webpack alias를 통해 src/를 @로 root dir로 정의

// src/lib/api/api.ts
import { IOrderSummary } from '@/store/types';
import { FirestoreDocRef, IEventInfo, IShopInfo } from '@/types/common';

참고 : http://guswnsxodlf.github.io/path-alias-in-webpack-and-jest

Is your feature request related to a problem? Please describe.

• Storybook을 추가(#6)할려고 하니, 데이터를 불러오는 로직과 뷰에 그리는 로직이 합쳐져 있는 상태라 테스트가 매우 어려워짐.
• 특히 src/pages는 그 자체가 페이지이자 컴포넌트로 설계되어있어, 데이터 fetch와 컴포넌트 렌더링이 동시에 진행

Describe the solution you'd like

• 단순한 내용을 표시하는 페이지라도, 내부 표시되는 View 를 Component로 분리
• Page는 데이터를 불러와서 Component에게 전달만 하도록

Describe alternatives you've considered

Additional context

• EventList.tsx 참고

Current Behavior

• 현재 event 목록 페이지에서는 모든 이벤트를 불러옴.
• 이벤트 하나당 한번의 Read 발생, 이벤트 갯수가 많아질 시 Read의 cost가 linear하게 같이 증가

Expected Behavior

• 페이징을 적용하여 가장 최근 10개만 불러오게 변경

• airbnb & typescript

• EventSummary 페이지 리스트에 주문한 음식 받아 갔는지 여부 체크박스로 추가
• Admin만 수정 가능

Describe the bug

• MenuDetail 보는 도중 뒤로가기 후 다른 이벤트 들어가면 이전에 보던 이벤트의 MenuDetail이 계속 떠있음

Expected behavior

• 뒤로가기 후 다른 이벤트 들어갈 시 이전에 떠있던 MenuDetail이 유지되지 않아야함
• EventList에 진입시 MenuDetail등 Event에 해당하는 정보들은 초기화 되어야함

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
메뉴를 선택하지 않아도 메뉴 리스트에서도 이미지 미리보기 기능 추가

Describe the solution you'd like

• 현재 메뉴 선택시 나타나는 팝업창에 표시되는 image를 그대로 thumbnail로 사용

Describe alternatives you've considered

• Menu 객체의 images 에는 여러가지 이미지가 들어있을 수 있음
• 그중 thumbnail을 포함하는 menu도 있으나, 메뉴에 따라 thumbnail이 없는 메뉴도 존재
• thumbnail 최적화 이미지가 있으면 이를 사용하고, 없으면 기본 이미지를 사용하는 선택 로직 넣으면 좋아보임

Motivation

• redux-toolkit으로 migration 할때 버그가 발생했는데, 수작업으로 고쳤음
• 테스트 작성하여 자동화하자

Describe the bug
주문 페이지에서 세로 컨텐츠가 양이 없으면 Cart 컴포넌트가 하단에 붙어있지 않고 위로 올라가버림.

To Reproduce
기준 커밋 : 28923ee

Steps to reproduce the behavior:

1. 주문 페이지 (Event) 접속
2. 모든 메뉴를 접음

Expected behavior
컨텐츠 양에 상관없이 Cart 컴포넌트는 항상 하단에 sticky 하게 붙어있어야함

Screenshots

Is your feature request related to a problem? Please describe.

• Firebase v9 출시
  • v8 까지는 modular import가 아닌 한번에 모두 import하는 형식
  • v9 부터는 tree-shaking을 지원하는 modular import 가능해짐
• 기존에는 번들링해도 어차피 tree-shaking이 안되서 firebase가 제공하는 CDN으로 sdk 사용하도록 디자인

Describe the solution you'd like

• CDN사용 대신 modular import를 사용해 번들에 Firebase SDK가 포함되게 변경

Describe alternatives you've considered

• Firebase v8 CDN으로 사용하는 옵션과 Firebase v9 Modular Import 사용하는 옵션 성능비교 후 더 좋은것으로 사용

Additional context

• Upgrade from version 8 to the modular Web SDK

Describe the bug

• 주문 페이지와 주문 요약 페이지에서 선택한 메뉴를 나타내는데 SelectedMenuPreview 컴포넌트를 사용
• 주문 페이지에서는 메뉴 옵션의 스타일링이 잘 적용 되는데 주문 요약에서는 스타일링이 누락되고 있음

Expected behavior

• 주문 페이지와 주문 요약 페이지에서 동일한 스타일링으로 나타나져야함

Screenshots

• 주문 페이지
  
  옵션 텍스트가 회색

• 주문 요약 페이지
  
  옵션 텍스트가 회색이 아님

• Firebase Auth 기능을 사용해 Admin auth 추가.

추가 고려사항

• 웹앱에서 접수된 주문 편집 (삭제) 기능
• 웹앱에서 Event 생성, 마감, 재개 기능

Describe the bug

• 주문 제출시 요약 페이지로 이동되어야함
• Github Pages 에 배포된 Demo 사이트에서는 주문 요약 페이지로 이동에 실패하고 404 NotFound 페이지가 뜸

To Reproduce

1. 기준 커밋 : 3a87992
2. PUBLIC_URL="/baemin-order-survey" REACT_APP_USE_MOCK=1 npm run build 으로 빌드
3. SPA를 지원하지 않는 웹서버(e.x. Github Pages)로 serving
4. 메뉴를 선택 후 주문 제출을 하면 404 Not Found 페이지로 이동

Expected behavior

• 정상적으로 주문 요약 페이지로 이동해야함

Cause of the Bug

• 현재 주문 요약 페이지 이동은 window.location을 직접 수정하는 형태로 구현
  

  baemin-order-survey/src/slice/new-order-slice.ts

  Line 136 in 3a87992

  window.location.pathname += '/summary';

• Github Pages는 SPA를 지원하지 않음, 현재는 workaround로 한 브라우징 세션 내에서만 Routing이 유지
• 따라서 위와같은 URL 변경이 발생 시, Router에 요청되는것이 아닌 Github Pages 서버에 요청이 날아가서 404 Not Found 발생

Possible Solutions

• React-Router의 dynamic routing 기능을 사용하는것으로 이동 코드를 변경.

Current

• redux, redux-thunk 각각 사용중

Expected

• redux-toolkit 으로 변경
• dependency 에서 redux, redux-thunk 제거

참고

• https://redux-toolkit.js.org/introduction/getting-started
• https://blog.woolta.com/categories/1/posts/204