프로젝트 소개

• 카페 스마트오더 앱에서 도출한 불편점을 해결하여 카페 오더 시스템의 전반적인 프로세스를 구현한 서비스
  • 스마트 오더 앱은 PWA로 제작하여 별도의 앱 설치 없이 실시간 알림을 받을 수 있고, 매장 별 대기시간을 표시해 유저 편의성을 높임
  • 관리자 웹으로 메뉴 품절처리, 매출 확인, 실시간으로 들어온 주문을 처리할 수 있도록 구현

프로젝트 기간

2022.09 ~ 2022.11

데모

https://www.youtube.com/watch?v=7qt26Y83_nU

참여 인원

FE 3명 / BE 2명

사용 기술

Next.js TypeScript SCSS Recoil PWA

프로젝트 구현내용

1. 사용자 페이지

1) 나만의 메뉴 CRUD구현

구현사항

• 나만의 메뉴 추가, 삭제, 메뉴명 수정, Home에서 주문하기 구현

고민한 부분

• useEffect에 나만의 메뉴가 삭제 되면 다시 API를 호출하여 나만의 메뉴 리스트를 받아오도록 코드를 작성 하였으나 삭제한 메뉴가 아닌 다른 메뉴가 사라지는 이슈가 발생하였음

해결과정

• 리렌더링 시, 호출해야하는 API가 2개여서 Promise.all을 사용하여 동시에 호출 했더니 발생한 이슈였기 때문에 각각 호출하는 것으로 변경 하였더니 해당 이슈가 사라졌음

2) 다크모드 구현

구현사항

• 모든 color를 변수화하여 next-theme라이브러리를 사용해 다크모드 구현

고민한 부분

• contextAPI와 :root선택자를 사용하여 직접 다크모드를 구현해보고자 하였으나 Next.js의 경우, contextAPI가 React와 사용방식이 달랐고, 최상위 루트에 import한 css파일 외에는 :root선택자를 사용할 수 없다는 사실을 알게 되었음
• Next.js에서 모드 변경 시, 깜빡임 현상이 발생하는 이슈를 알게 되었음

해결과정

• 프로젝트 마감이 얼마 남지 않은 관계로 next-theme라이브러리를 사용하기로 결정함
• 기존에 쓰고 있던 컬러 변수명을 $TXT-001에서 —TXT-001로 변경 했고, 테마별 색상을 따로 정의해주어 _app.ts에 해당 css를 import하여 해결함

3) 유저 음료 카테고리 별 랭킹 그래프 구현

구현사항

• NIVO라이브러리 Pie그래프를 사용하여 현재까지 사용자가 마신 음료를 카테고리화 하여 카테고리별 랭킹 그래프 구현

2. 관리자 페이지

1) 메뉴 품절처리

구현사항