프로젝트 소개

Magic POS (모바일 키오스크 & POS 운영 시스템과 다양한 관리자 기능이 이루어진 서비스)

(2024.01 - 2024.02) 프론트엔드 5명, 디자이너 1명

GitHub → https://github.com/j-yesung/magic-pos

서비스 사이트

테스트 계정 : [email protected] / testtest1!

Magic POS - 웹기반 POS & KIOSK 솔루션

담당 파트

구현 기록물을 북마크 하였습니다.

모바일 키오스크

사용자 재유입을 위한 PWA, FCM 연동 (기록)

• 모바일 키오스크로 메뉴 주문 완료 후, POS 에서 주문 확인 완료 시, 모바일로 실시간 푸시 알림 구현
• PWA 도입으로 인해 유저 피드백 2주 기간 중 첫주 대비 피드백 횟수 163% 증가

POS (관리자 페이지)

사업장 진위 확인을 위한 회원가입 처리 (기록)

• 공공데이터 사업자등록번호 진위 확인 OPEN API를 활용하여 실제 사업장 진위 확인 후 회원가입 진행
• supabase 서비스로 인증 절차 과정 중 React Query Mutation 훅을 사용하여 서버 통신

카테고리 사이드바 구현 (기록)

• 모니터 크기와 태블릿 사용자를 고려하여 넓이의 제한을 주지 않기 위해 Show & Hide 형태로 구현

가게 세부 설정 구현 (기록)

• 테이블 사용 여부와 영업 시간을 지정할 수 있고 디자인 시안을 고려하여 React Select로 커스텀 작업
• 오픈 시간 지정 후, 그 이후 시간부터 마감 시간으로 지정 가능 (오전/오후 12시간제)

프로젝트 공통

전체 이미지 최적화 (기록)

• 기본 이미지 최적화 모듈인 Squoosh을 sharp로 교체하여 이미지 크기 82% 감소

서비스 소개 페이지 (기록)

• Intersection Observer API를 활용하여 useRef로 스크롤 값을 계산해주는 커스텀 훅 제작
• throttle & debounce를 활용하여 스크롤 이벤트 최적화를 통해 70% 이상 성능 개선

재사용 가능한 공통 컴포넌트 구현 (Button, Input, Select)