비대면 음료 주문 웹 JavaOrder

JavaOrder

 

작업기간: 2024.08.04~2024.09.10

팀원: 4명

GitHub: https://github.com/bbrotngus/JavaOrder

GitHub - bbrotngus/JavaOrder

---

개발목표

꾸준히 성장하는 국내 커피 시장에서 경쟁력을 가진 웹사이트를 개발하고자 하였습니다.

• 출근 시간대에 커피를 구매하려 할 때, 사람이 붐비는 상황으로 인해 대기시간이 길어지는 문제가 자주 발생해 고객의 구매전환율 하락을 야기한다고 판단하였습니다. 고객의 주문 기록을 기반한 메뉴 추천 시스템과 픽업 주문 서비스를 도입한 웹 기반 오더 플랫폼을 구현해 메뉴 선택과 주문 과정을 신속하고 효율적이도록 개선해 구매전환율을 증가하고자 합니다.
• 관리자는 고객의 주문 내역 데이터를 활용한 통계를 통해 전체적인 주문현황과 고객 선호도를 대시보드에 한눈에 파악할 수 있어 고객 맞춤 추천 서비스 운영의 효율성을 극대화 하고자 합니다.

 

Front-end

HTML5, CSS3 JQuery, JavaScript Bootstrap Chart.js

 

Back-end

Java Spring Boot JPA Thymeleaf

DB

SQL Developer

도구 및 환경

Maven jUnit v5.10 ERD Cloud

API

Kakao 주소, Kakao Pay

 

---

 

구현기능

[담당한 기능]

메인화면

1. 사용자 로그인 시 장바구니 불러오기

• 사용자가 로그인 시 session을 통해 로그인 처리
• JPA를 활용하여 로그인한 사용자의 멤버코드를 기준으로 장바구니 반환
• JPA를 활용하여 장바구니 아이디를 기준으로 장바구니 항목 반환

2. 로그인 유무와 상관없이 제품리스트 출력

• DTO를 활용해 제품 페이징, 카테고리, 검색 구현

3. 로그인 시 구매이력을 조회하여 가장 많이 구매한 제품 3종을 리스트 최상단에 출력

• 서비스 클래스에서 사용자별 최근 구매 데이터 분석 로직 구현
• JPA의 엔티티 관계 매핑을 활용하여 로그인 사용자별 최근 구매 데이터 분석
• 이벤트 등 추천메뉴 조건 변경을 고려하여 쿼리문메소드로 작성
• 구매 빈도에 기반한 상품 순위 설계 및 구현
• RESTful API의 GET 메서드를 활용해 프론트엔드에 개인화된 상품 리스트 제공

장바구니

1. 장바구니 -, + 버튼 클릭 시 수량 변경 및 실시간 동적 기능

2. 장바구니 개인화 및 제품과 금액 실시간 동적 기능

• 회원가입 시 고유한 회원코드 자동생성 및 DB저장
• JPA를 활용한 회원-장바구니 연관 관계 설정

3. 매장/포장 버튼 클릭 시 Kakao Pay 로 결제 연결

4. 삭제버튼 클릭 시 장바구니 제품 코드 기준으로 해당 제품 전체 삭제

• 정말로 삭제하시겠습니까? 라는 confirm 문구가 나오도록 설정

제품 리스트

1. 제품 리스트에서 추천제품을 제외하여 리스트 출력

• 제품 리스트에 추천제품 중복 노출 방지

2. 페이징, 검색, 카테고리 기능 구현

• 제품명 기반 검색. 제품명 입력 후 search 버튼 또는 enter 입력 시 검색 실행
• 카테고리 코드 기반 제품 카테고리 검색
• AJAX의 비동기 처리방식으로 새로고침 없이 데이터 갱신

제품 상세페이지

1. 옵션값을 form을 활용해 장바구니로 전송

• 유효성체크 옵션에 기본값 부여

2. 장바구니에 아이템 담기

• 장바구니 담기 버튼 클릭 시 비동기 방식으로 JSON 데이터 전송 후 메인화면으로 이동

3. 옵션가격 동적 계산

• AJAX의 비동기 처리방식으로 새로고침 없이 제품 가격 데이터 갱신
• 옵션 선택 시 동적 총액 계산 및 표시
• 옵션 및 수량 변경 시 calcTotalPrice()를 실행하여 반영
• 베이커리 코드 제품은 옵션값이 출력되지 않도록 설정

4. -, + 버튼을 클릭하여 제품 수량 변경

• , + 버튼은 장바구니, 장바구니 아이템 두 곳에서 공통적으로 사용되기에 함수를 작성하여 적용

5. 제품 기본 가격을 DB에서 AJAX로 출력하고, 총 금액을 계산하는 함수 실행 시 DB에 업데이트

 

---

담당역할

• 웹사이트 기본 프레임 프론트엔드 UI 구현
• 메인화면, 사용자 장바구니, 제품 리스트, 제품 상세페이지 구현
• 장바구니, 장바구니 아이템 DB 설계
• ppt제작, 회의록 작성

---

ERD 설계

 

 

① 장바구니

• 회원의 장바구니 정보 관리
• 장바구니 항목과 1:N 관계로 여러개의 장바구니 항목을 가짐
• 회원과 1:1 관계

② 장바구니 항목

• 장바구니에 담겨진 장바구니 항목 관리
• 중복 방지를 위해 장바구니ID + 시퀀스로 항목 ID 생성
• 주문내역 조회를 고려하여 장바구니 항목에 상품옵션 정보를 포함

 

---

 

구현 화면

로그인 전 메인화면

• html 단에서 발행 전 제품은 노출되지 않게 설정
• 제품담기 클릭 시 ‘로그인을 해주세요’ 팝업 출력

 

 

 

로그인 후 제품리스트 및 장바구니

• 추천메뉴 3종 노출
• 개인 장바구니 우측에 출력. 장바구니 제품 수정/삭제 기능 및 장바구니 총 금액 실시간 동적 기능
• 로그아웃 버튼 활성화

• 페이징 기능

• 카테고리 기능

• 검색기능

 

 

상세페이지

• 제품 금액 실시간 동적 기능
• 로그인한 사용자의 장바구니를 찾아 담을 수 있다.

 

 

 

---