Skip to content

햄버거 키오스크 프로젝트 (Back-end)

Notifications You must be signed in to change notification settings

yubin-im/Kiosk_project_Backend

Repository files navigation

🌟 Digital Hana 路 3기: 8조 게시판 프로젝트 🌟

📍 Overview

회원가입/로그인하여 회원 주문 및 비회원 주문이 가능합니다.

식사 장소를 선택하고, 메뉴 선택하면 주문이 완료됩니다.

주문 금액의 1%은 적립됩니다.

관리자 페이지가 별도로 존재합니다.

📬 프론트 레포지토리로 가기! (클릭)

🚀 Member (2024.04.26 ~ 2024.05.09)

팀원 주요 역할
이서하 Seoha Lee 관리자 페이지
임유빈 Yubin Im 상품주문 페이지
정연주 Yonjoo Chung 관리자 페이지, 로그인

🚩 Project

✅ SKILL

[Back-end]

[Front-end]

[Tools & Environment]

✅ ERD

Kiosk-8조  (4)

✅ UseCase Diagram

KioskUseCase_Color

✅ 시연 영상

[세부 영상]

[상품주문 페이지]

로그인 상품 주문
로그인 주문상세
메뉴 추천 결제 성공
메뉴추천 결제성공

[관리자 페이지]

사용자 관리 상품 관리
사용자관리 상품관리
주문 관리 주문 통계
주문관리 주문통계


🖥️ 프로젝트 실행 방법

[Back-end]

  1. Git clone 하기

    a. Git Bash Here로 Git 터미널 열기

    b. 터미널에 git clone https://github.com/Kiosk-Project/KioskBE 입력

  2. 최초 실행 전 설정

    a. src/main/resources 경로의 application.properties 파일을 spring.jpa.hibernate.ddl-auto=create 로 변경 후 실행하기

    b. 1번 실행 이후는 spring.jpa.hibernate.ddl-auto=update 로 변경 후 실행

[Front-end]

  1. git clone 하기

    a. Git Bash Here로 Git 터미널 열기

    b. 터미널에 git clone https://github.com/Kiosk-Project/KioskFE.git 입력

  2. node_modules 설치

    a. 명령 프롬프트(cmd) 창 열고 프로젝트 최상단 디렉토리로 이동

    b. 터미널에 yarn init 입력

  3. 접속하기

    a. 명령 프롬프트(cmd) 창 열고 프로젝트 최상단 디렉토리로 이동

    b. 터미널에 yarn update 입력

    c. 터미널에 yarn dev 입력

    d. http://localhost:5173 접속

🚀 구현 과정 (임유빈)

🎯 트러블 슈팅 (임유빈)

리액트 페이지 간에 데이터 넘길 때 undefined 발생
  • 문제 발생 현상

    • 페이지를 이동할 때 해당 페이지의 값을 하나 함께 보내야 해서, forwardRef를 사용하여 prop을 전달하라고 했다.

    • 하지만 자꾸 넘겨진 값에서 undefined가 떠서 다른 방법을 찾아보니 useNavigate와 useLocation을 사용하여 데이터를 넘길 수 있다고 하였다!

  • 문제 발생 이유

    • forwardRef 사용 시 데이터가 자꾸 undefined로 넘겨진 이유는 모르겠다.. 결국 다른 방법을 찾았다.

    • 추측 이유는 useEffect랑 관련되어서 아닐까 한다.

  • 해결 방법

    • 데이터를 넘길 페이지에서는 useNavigate를 사용한다!

      • import { useNavigate } from 'react-router-dom';
      • 클래스 안에 const navigation = useNavigate(); 입력
      • navigation('넘어갈 페이지의 경로', { state: { 넘길 값의 변수명 } });
    • 데이터를 받을 페이지에서는 useLocation을 사용한다!

      • import { useLocation } from 'react-router-dom';
      • 클래스 안에 const location = useLocation(); 입력
      • location.state.변수명 으로 값을 받아올 수 있다.
        • 값 확인은 console.log(’데이터 받아왔는지 확인 :' + location.state.변수명 );
        • 나는 값을 가져와서 setter 함수에 바로 넣어서 set 해줬다!
  • 구현 코드

    • 데이터를 넘길 클래스

      import { useNavigate } from 'react-router-dom';
      
      export const PlaceSelectionPage = () => {
      	 const navigation = useNavigate();
      	...코드생략...
      	 return (
      		 <>
      			 ...코드생략...
      			 <button type='button' onClick={() => {
                   navigation('/order/products', { state: { orderListId } });
    • 데이터를 받아올 클래스

      import { useLocation } from 'react-router-dom';
      
      const OrderProducts = () => {
        const location = useLocation();
        ...코드생략...
        useEffect(() => {
        setOrderListId(location.state.orderListId);
    • 콘솔 확인

About

햄버거 키오스크 프로젝트 (Back-end)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages