SmileJune/Street-FoodTruck-Fighter

푸드트럭 사용자와 사장님을 위한 테이블링 앱, 스푸파 🚚

🚚 Street Foodtruck Fighter

푸드트럭 사용자와 사장님을 위한 테이블링 앱, Street FoodTruck Fighter

👨🏻‍🍳 서비스 소개

푸드트럭의 위치를 지도에 표시해 접근률을 높이고, 간편한 메뉴 확인, 긴 웨이팅 시간을 줄이기 위한 테이블링 및 결제 시스템, 푸드 트럭 사장님을 위한 주문 내역 확인, 매출 정산, 푸드트럭 수요 조사 등의 기능을 포함한 푸드트럭 사용자와 사장님을 위한 웹앱 서비스입니다.

📅 개발 기간

2022.10.11 ~ 2022.11.21

기획 및 설계	10.11 ~ 10.19
개발	10.20 ~ 11.14
버그 수정 및 산출물 정리	11.15 ~ 11.21

📄 프로젝트 설계

🖥️ 와이어 프레임 / 📝 기능명세서 / 🌐 ERD / 🍏 API 명세서

⚒️기술 스택

Front-End

• Vue 3.2.13
• JavaScript
• jQuery 3.6.1
• Axios 1.1.3
• Pinia 2.0.23
• Fullcalender 5.11.2
• Chart.js 3.9.1
• Splide.js 0.6.12

Back-End

• Java 1.8
• Spring Boot 2.7.4
• Spring Date JPA 2.7.4
• Spring Security 2.7.4
• Swagger2 3.0.0
• MySQL 8.0.31
• Redis 5.0.7

Server

• AWS EC2 ubuntu 20.04 LTS
• Docker 20.10.20
• Jenkins image : jenkins/jenkins:lts
• NGINX image : stable-alpine

Tool

• 형상 관리 : gitlab
• 이슈 관리 : Jira
• 커뮤니케이션 : Mattermost, Webex, Notion
• 디자인 : Figma

IDE

• Intellij
• Mysql Workbench
• VSCode

💡 시스템 아키텍처

💻 주요 기능

[사용자]

로그인 및 회원가입

• 카카오 API 를 활용하여 카카오 간편 로그인이 가능합니다.
• 네이버 SENS 를 사용하여 회원가입 시 문자인증을 하도록 구현하였습니다.

로그인	회원가입

메인화면

• GeoLocation API 를 사용하여 사용자의 현재 위치 정보를 받아옵니다.
• 현재 사용자가 주문한 내역을 확인할 수 있습니다.
• 메뉴 카테고리를 클릭하여 푸드트럭 조회 페이지로 이동합니다.

메인화면

푸드트럭 조회

• 지도와 목록탭으로 구분됩니다.
• 메뉴 카테고리별로 사용자 위치 주변의 푸드트럭 정보를 제공합니다.
• 검색 기능을 제공합니다.

지도	목록

푸드트럭 상세 조회

• 푸드트럭의 별점을 제공합니다.
• 푸드트럭의 메뉴, 상세정보, 리뷰를 제공합니다.

메뉴	상세 정보	리뷰

주문 및 결제

• 원하는 메뉴를 장바구니에 담을 수 있습니다.
• 카카오 Pay API 를 활용하여 결제시스템을 구현하였습니다.

장바구니	결제	결제 완료

원해요, 푸드트럭

• 설문조사를 통해 우리 동네에 원하는 푸드트럭 설문조사를 진행합니다.
• 설문조사 결과는 푸드트럭 사장님들께 수요가 많은 메뉴와 위치를 확인하실 수 있도록 제공됩니다.

설문조사

마이페이지

• 지난 주문 내역을 확인할 수 있습니다.
• 해당 내역에 관한 리뷰를 등록할 수 있습니다.

지난 주문 내역	리뷰 등록

[CEO]

회원가입 및 마이푸드트럭 등록

• 일반 사용자와 동일하게 회원가입 시 문자인증을 하도록 구현하였습니다.
• 회원가입 후 마이푸드트럭 등록을 진행합니다.

회원가입	마이푸드트럭 등록

메인화면

• 일반 사용자와 동일하게 GeoLocation API 를 사용하여 현재 위치를 받아옵니다.
• 푸드트럭 운영 스케줄을 확인할 수 있습니다.
• 영업 시작, 영업 종료 버튼을 통해 간편하게 영업을 시작 및 종료할 수 있습니다.
• 매출 통계, 스케줄, 수요조사, 마이푸드트럭 버튼을 통해 각각의 페이지로 이동합니다.

메인 화면

엽업 시작

• 수락되지 않은 주문 내역과 수락된 주문 내역을 확인할 수 있습니다.
• 뱃지를 통해 수락되지 않은 주문내역의 갯수를 확인할 수 있도록 구현하였습니다.

영업 시작

수요 조사 확인

• 원해요, 푸드트럭에서 진행한 설문조사의 결과를 확인할 수 있습니다.
• 수요가 많은 메뉴와 위치를 제공하여 사장님께선 더 많은 수익을, 푸드트럭 손님들께선 원하는 메뉴를 원하는 위치에서 만날 수 있는 장점을 제공합니다.

수요 조사

매출 통계

• Chart.js 를 사용하였습니다.
• 매출 통계를 간편하게 파악할 수 있습니다.

매출 통계

스케쥴

• 스케줄을 손쉽게 변경 및 관리할 수 있습니다.

캘린더	스케줄 확인 및 변경

🧑🏻‍💻 개발 멤버 소개

윤일준 (Back-End)	박범수 (Back-End)	이주희 (Back-End)	박승주 (Front-End)	이성훈 (Front-End)	안태환 (Front-End)
👑 CI/CD REST API	REST API	UI/UX REST API	UI/UX Vue	UI/UX Vue	UI/UX Vue