Project Detail

프로젝트 상세내용 화면입니다.뒤로가기

Magic pos

간편 주문과 결제 & 다양한 관리자 기능이 이루어진 서비스

사이트 링크 바로가기(서비스 종료)

사이트2 링크 바로가기(서비스 종료)

깃허브 바로가기 유튜브 시연영상 보러가기

작업기간 : 2024-01-01 ~ 2024-02-02 (4주)

NextJS

NextJS Page Router

TypeScript

module css

React-Query(Tanstack Query)

axios

supabase

firebase

사용기능
사이트 주소
POS 관리자 주소 : magic-pos.com
모바일 키오스크 주소 : magic-pos.com/kiosk
기능 구현
카테고리 등록, 수정, 삭제
메뉴와 메뉴 옵션 등록, 수정, 삭제
메뉴 등록시 이중모달로 메뉴와 메뉴 옵션을 설정할 수 있는 작업
메뉴 삭제시 storage에 등록된 이미지 자동삭제
storage의 효율적 관리를 위한 메뉴 삭제 기능 구현
드래그 앤 드랍 기능 구현
라이브러리 사용 안하고 직접 구현
모든 OS에 푸시 알림 전송이 가능하도록 FCM 활용
PWA 기술을 사용하여 웹 애플리케이션 재접속 유도 → PWA 기술을 도입하여 앱과 유사한 경험을 제공함으로써 사용자 유입률 2배 상승
트러블슈팅
메뉴 등록시 이중 모달에서 옵션 추가 이슈
이슈 이중 모달에서 리스트를 바로 저장이 아닌 임시 저장이 필요했다.
해결 zustand로 전역적으로 ‘기존 값’과 ‘변화 값’을 비교해서 배열내에 디테일이 하나라도 바뀌었으면 해당 내용을 뽑아서 업데이트
이미지 최적화
이슈 NextJS에서 제공하는 image 태그로 부족한 성능개선 문제
해결 라이브러리 sharp 적용해서 속도 10배 이상의 성능개선
페이지 로딩 속도 저하
이슈 기존 react-icons가 bundling되면서 tree shaking이 되지 않아 페이지 로딩 속도 저하
해결 @react-icons/all-files 라이브러리를 도입
메뉴 관리 Page : lighthouse performance 48 → 70 개선 🔧
DOMContentLoaded 개선 - 메뉴 관리 Page
성능 비교 before-after