[5] 음식점 포스 프로그램 - 화면단 개발(3) : 음식점 포스 프로그램 개발(키오스크) 및 서비스 개발

지난 시간에는 계좌 관련 화면단 개발을 진행 해 왔습니다.

이번 시간에는 음식점의 관련 포스 프로그램의 대한 화면 구성을 진행 하겠습니다.

지난 시간에 개발한 계좌 관련 프로그램으로 잔액을 활용하여 개발을 진행 하는 쪽으로 하고 있으며, 

실제 서비스에서 키오스크를 통해 고객이 메뉴 선택하여 구매 했을 때, 현금 or 고객 신용카드를 통해 결제 시스템을 진행을 하고 있는데, 신용카드 사용 시 고객의 대한 정보를 활용하여 계좌 입출금 시스템으로 사용하여 진행을 하는 것입니다.

이를 바탕으로 진행 해보겠습니다.

 

github: https://github.com/BerkleyLim/foodstor_pos

GitHub - BerkleyLim/foodstor_pos: This is the program on foot store pos machine.

 

 

 

 

개발 하기 앞써 먼저 요구 사항을 확인 하도록 하겠습니다.

 

1.  요구사항 개요

- 고객사께서 직접 음식점을 차리고 있는 상황이다.
- 여기서, 현재 최저 임금이 오르고, 음식값이 비싸진 상황에서 직원 수를 줄여야 하는 상황이다.
- 여기서 음식 주문 시 키오스크를 활용해 기계로 주문 해야 하는 프로그램이 필요로 하다.
- 따라서 키오스크에 필요한 포스기를 활용하여 주문하는 프로그램을 제작해주세요.
- 만일, 장어덮밥 : 5000원, 감자튀김 : 4000원, 김밥 : 1000원 일 경우 해당 메뉴를 선택할 수 있게 만들어 주세요.
- 선택 메뉴에 부가세 10%를 포함한 금액을 화면단에 출력하여 보내주세요.
- - 예) 장어덮밥 가격 : 5500원, 감자튀김 : 4400원, 김밥 : 1100원
- 전제 조건 : 고객입장이라고 생각하고, 고객의 통장 잔고를 확인하고, 통장 잔고가 부족할 시 구매할 수 없다는 문구 추가
- 시작은 고객 정보(나이, 성별, 전화번호, 주민번호 앞자리 6자리, 카드 비밀번호 4자리) 화면 보여주고 메뉴 선택
- 백엔드에서는 선택한 메뉴와 고객의 정보와 잔고를 활용하여 프로그램 작성
- Native App에서 프론트엔드 UI 비슷하게 화면 구성해보기

 

 

2. 요구사항 화면단 설계

다음은 각 음식 메뉴의 따라 해당 가격과 지정하겠습니다.

 

메뉴 값을 아래와 같이 지정을 한다.

• 장어구이 : 5500원 (원가 : 5000원, VAT : 원가의 10% 더한 값)
• 피자 : 11000원 (원가 : 10000원, VAT : 원가의 10% 더한 값)
• 치즈스틱 : 3300원 (원가 : 3000원, VAT : 원가의 10% 더한 값)
• 로스트비프 : 15000원 (원가 :15000원, VAT : 원가의 10% 더한 값)
• 로스트비프 : 4400원 (원가 : 4000원, VAT : 원가의 10% 더한 값)

 

계좌 잔액 조회시 200,000원을 default로 지정한 값으로 설정 하였다.

 

음식 메뉴 지정 화면 단

 

 

 

 

3. Recoil로 상태 관리 설정 - 음식 메뉴 관련 state 값 설정

<src/recoil/state/foodState.tsx> 

import {atom} from 'recoil'

export const foodState = atom({
  key: 'food',
  default: [
    {
        fno: 1
      , foodMenu: '장어구이'
      , foodPrice: 5000
      , VAT: 500
    },
    {
        fno: 2
      , foodMenu: '피자'
      , foodPrice: 10000
      , VAT: 1000
    },
    {
        fno: 3
      , foodMenu: '치즈스틱'
      , foodPrice: 3000
      , VAT: 300
    },
    {
        fno: 4
      , foodMenu: '로스트비프'
      , foodPrice: 15000
      , VAT: 1500
    },
    {
        fno: 5
      , foodMenu: '감자튀김'
      , foodPrice: 4000
      , VAT: 400
    },
  ]
});

 

 

 

4.  음식 메뉴 선택 후 출금 과정 (은행 계좌 관련 알고리즘 활용)

<src/recoil/state/foodState.tsx> 

import React from 'react'
import { Button, Card, CardBody, Col, Row } from 'reactstrap'
import styles from "../index.module.scss"
import Header from '../Header'
import { useRecoilState, useRecoilValue } from 'recoil'
import { foodState } from "../../recoil/state/foodState"
import { userBankInfoState } from "../../recoil/state/userBankInfoState"

const PosFood = () => {
  const food = useRecoilValue(foodState);
  const [bankInfo, setBankInfo] = useRecoilState(userBankInfoState);

  // 구입 시 선택
  const purchaseFood = (f:any | Object) => {
    let tempBankInfo = {
      bno: bankInfo?.bno,
      userMoney: bankInfo.userMoney - f?.foodPrice - f?.VAT
    }
    setBankInfo(tempBankInfo)
  }
  return (
    <div>
      <Header />
      <div className={`${styles?.container}`}>
        <h1>음식 메뉴</h1>
        <div style={{ textAlign: "right" }}>
          <Button onClick={() => { window.history.back() }}>뒤로가기</Button>
        </div>
        <div className={styles?.moneyTextInfo}>현재 잔액 : <span className={styles?.moneyText}>{bankInfo?.userMoney}</span>원</div>
        <Row className={`mt-5`}>
          {food?.map((f, index) =>
            <Col md={4} key={index} className={`mb-5`}>
              <Card>
                <CardBody>
                  <Row>
                    <Col>
                      {f?.foodMenu} : {(f?.foodPrice + f?.VAT)}원
                    </Col>
                    <Col>
                      <Button onClick={() => purchaseFood(f)}>선택</Button>
                    </Col>
                  </Row>
                </CardBody>
              </Card>
            </Col>)}
        </Row>
      </div>

    </div>
  )
}

export default PosFood

==> 여기서 state 값 지정 한 것을 default 기준으로 설정 하였으며, 차후 DB와 연동 할 것이다.

  따라서 Back-End API 개발 전 Front에서 활용 할 수 있는 기준으로 지정을 해둔다.

  출금 관련은 입출금 알고리즘으로 진행한다.

 

5. 마치며

필요로 하는 페이지는 완성이 되었다.

여기까지 진행을 하였으면 관리자용 이벤트 로그 컴포넌트를 추가로 하고 DB 설계 및 백엔드 API 연동까지 진행 하는 것으로 시작을 하겠다.