[4] 음식점 포스 프로그램 - 화면단 개발(2) 계좌 처리 화면 서비스 개발

지난 시간에는 회원 정보 입력하고 메뉴 진입에 대한 페이지 개발 및 서비스 개발(H2 Database 연동 x)의 대해 다뤄봤습니다..

이번시간에는 화면단 설계에 들어가보도록 하겠습니다.

 

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. 요구사항 화면단 설계

여기서 계좌 입출금 기능과 잔액표시의 대해 설정하겠습니다.

특별한 요구 조건 없이 입/출금 단위를 100,000원으로 조절하겠습니다.

맨 처음 default 값을 200,000원으로 지정하겠습니다.

은행 입출금 기능 조회 페이지

 

 

3. Recoil로 상태 관리 설정 - 은행 입출금 관련 state 값 설정

<src/recoil/state/userBankState.tsx> 

import {atom} from 'recoil'

export const userBankInfoState = atom({
  key: 'userBankInfo',
  default: {
      bno: 1
    , userMoney: 200000
  }
});

 

 

4. 은행 입출금 페이지 추가 후 입/출금 기능 설정

다음은 입/출금 기능을 100,000원 단위로 설정 한다.

default 값은 200,000원이다.

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

const Bank = () => {
  const [bankInfo, setBankInfo] = useRecoilState(userBankInfoState);

  console.log(bankInfo)
  const decrementMoney = () => {
    let tempBankInfo = {
      bno: bankInfo?.bno,
      userMoney: bankInfo.userMoney - 100000
    }
    setBankInfo(tempBankInfo)
  }
  const incrementMoney = () => {
    let tempBankInfo = {
      bno: bankInfo?.bno,
      userMoney: bankInfo.userMoney + 100000
    }
    setBankInfo(tempBankInfo)
  }

  return (
    <div>
      <Header />

      <div className={`${styles?.container} ${styles?.bankContainer}`}>
        <h1>계좌 조회</h1>
        <div style={{ textAlign:"right" }}>
          <Button onClick={() => {window.history.back()}}>뒤로가기</Button>
        </div>
        <Card className={``}>
          <CardBody>
            <div className={styles?.moneyTextInfo}>현재 잔액 : <span className={styles?.moneyText}>{bankInfo?.userMoney}</span>원</div>
            <br/><br/><br/>
            <span className={styles?.info}>※ 입출금은 100,000원 단위로 증감 합니다..</span>
            <br/><br/>
            <Row className={`justify-align`}>
              <Col sm={{ offset: 1, size: "auto" }}>
                <Button className={`w-100`} onClick={() => incrementMoney()}>입금</Button>
              </Col>
              <Col sm={{ offset: 7, size: "auto" }}>
                <Button className={`w-100`} onClick={() => decrementMoney()}>출금</Button>
              </Col>
            </Row>
          </CardBody>
        </Card>
      </div>

    </div>
  )
}

export default Bank

 

 

5. 마치며

회원 정보 저장의 관련된 페이지와 이번 시간에 은행 관련 입/출금 관련 페이지를 제작해보았습니다.

다음 시간에는 음식점 포스 프로그램 개발(키오스크) 및 서비스 개발을 진행 해보겠습니다.