프로젝트 정보

FrontEnd 개발자
팀장 : 김호진
팀원 : 배준재,옥준서,모정환

프로젝트 소개: 기존 축제 또는 행사에서의 사업자 등록 없이 계좌이체로 계산하는 시스템을 적은 인력으로도 운영할 수 있게 도와주는 편한 서비스

핵심 기능

• 간편한 QR 코드 주문 시스템: 누구나 쉽게 이용할 수 있도록 웹/앱 대신 간편한 QR 코드 주문 시스템을 활용
• SMS 기반 결제 확인 시스템: 번거로운 계좌이체 대신 실시간 SMS 알림으로 결제 확인 및 주문 승인 과정을 간소화
• 실시간 주방 디스플레이 시스템: 조리 진행 상황을 실시간으로 확인할 수 있는 디스플레이 시스템으로 주방 운영 효율성 극대화
• 사업자 등록 없이 구현 가능: 사업자 등록 없이도 손쉽게 구축 및 운영 가능한 시스템으로, 다양한 축제 및 행사에 적용 가능성이 높음
• 메뉴 사진 및 설명 첨부: 고객이 메뉴를 직관적으로 확인하고 선택할 수 있도록 메뉴 사진 및 설명을 첨부

장점

• 비용 절감: 사업자 등록 없이 간단한 QR코드 및 SMS 시스템을 활용하여 저렴한 운영을 가능
• 운영 효율화: 실시간 주문 및 조리 상황 확인, 주문 조율 기능을 통해 효율적인 운영 지원
• 고객 만족도 향상: 빠르고 편리한 주문 및 결제, 투명한 주문 진행 확인 시스템을 통해 고객의 만족도를 높임
• 데이터 기반 의사 결정: 주문 데이터 분석을 통해 메뉴 인기, 운영 패턴 등을 파악하여 데이터 기반 의사 결정을 지원
• 환경 친화: 종이 영수증 발급 없이 모바일 기반 주문 및 결제 시스템으로 환경 보호에 기여

프로젝트 화면 구조

관리자

• 로그인 / 회원가입
• 주문 결제 관리
• 메뉴 관리
• 매출 관리
• 테이블 QR 생성
• 주방 디스플레이

사용자

• 주문화면
• 대기 순서 디스플레이
• 상세 주문 내역 확인

화면구성

관리자 데스크톱

로그인 / 회원가입

주문 결제 관리

메뉴 관리

매출 관리

테이블 QR 생성

QR 생성시

정보 수정

관리자 모바일

모바일 접속 메인

주방 디스플레이

모바일 매출 확인

정보 수정 모바일

사용자화면

메인화면

주문화면

대기 순서 디스플레이

상세 주문 내역 확인

개발 환경

• HTML, CSS, React(v18.2.66): 사용 언어
• MUI(Material-UI)(v5.15.20): 스타일링
• Visual Studio Code,Vite(v5.2.0): 개발 도구 및 IDE
• Git, GitHub: 버전 관리 시스템
• npm(v20.11.1): 패키지 매니저
• ESLint, Prettier 기타 도구
• Firebase(v10.12.2): 사진DB 연동을 위한 라이브러리
• axios(v,1,7,2): 서버 통신용 라이브러리
• react-qr-code (v2.0.13): 테이블 QR코드 생성용 라이브러리
• jszip (v3.10.1): QR코드 사진 압축용 라이브러리
• file-saver(v2.0.5):압축파일 파일 저장용 라이브러리
• react-device-detect(v2.2.3): 적응형 페이지를 위한 사용자 기기인식 라이브러리
• react-router-dom(v6.22.3): 클라이언트 측 라우팅을 위한 라이브러리

시작 가이드

설치 필요

• Node.js 20.11.1
• Npm 10.5.0

시작

npm install
npm run dev