[3] 음식점 포스 프로그램 - 화면단 개발(1) - 고객 정보 입력 개발 및 서비스 개발

지난 시간에 이어서 프론트엔드 셋팅 및 백엔드 셋팅까지 진행해 보았습니다.

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

 

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

이 중, 요구 사항 중인 하나인 개인 정보 입력하는 폼을 제작 하고, 메뉴 입력까지 진입하는 것으로 하겠습니다.

 

(1) 개인 정보 입력

 

 

 

(2) 개인 정보 입력 후 헤더에 개인 정보 출력하고, 메뉴 선택까지 지정해 줍니다.

 

 

 

 

3. Recoil로 상태 관리 설정 - 사용자 정보 관련

<src/recoil/state/userInfoState.tsx> 

import {atom} from 'recoil'

export const userInfoState = atom({
  key: 'userInfo',
  default: {
      userName: 'berkley'
    , userAge: 29
    , userSex: '남'
    , userPhone: '01011111111'
    , userInfoNumber: '841111'
    , userPassword: '1111'
  }
});

 

==> Atom?

- react 및 redux에서는 state 값으로 표현하며, useState 역할을 하는 거와 같습니다.

- redux에서는 useselector를 통해 state 값을 수정하고 usedispatch를 통해 redux에서 저장된 state 값을 불려오는 것으로 활용 가능

- 여기서는 atom으로 이용하여 state 관리 하고, 실제로는 useRecoilState를 이용하여 커스텀 Hook을 사용 가능

 

 

4. 사용자 정보 관련 페이지 폼 제작 후, recoil 값에 저장된 데이터 넣기

아래는 recoil를 이용하여 회원 정보를 입력 후, state 값에 저장을 합니다.

입력 후, 메뉴 버튼으로 이동합니다.

 

<src/component/userInfo/InputUserInfo.tsx>

import React from 'react'
import styles from "../index.module.scss"
import { Card, CardHeader, Button, Form, Input, Label } from 'reactstrap'
import { useNavigate } from 'react-router';
import { userInfoState } from '../../recoil/state/userInfoState'
import { useSetRecoilState } from 'recoil';
const { useState, useEffect } = React;


const InputUserInfo = () => {
  const [createForm, setCreateForm] = useState<any>();
  const navigate = useNavigate();

  const setUserInfo = useSetRecoilState(userInfoState);

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;

    setCreateForm({
      ...createForm,
      [name]: value,
    })
  }

  // 입력 이후, 회원 정보가 저장 되면서 recoil에 저장 후 header에 사용자 정보 저장
  const submitUserInfo = () => {
    // 리액트 Query 작성
    alert(JSON.stringify(createForm));

    setUserInfo(createForm)

    navigate('/menuindex');
  }

  return (
    <Card body className={`${styles?.kioskContainer} ${styles?.container}`}>
      <CardHeader className="mb-3" tag="h1">
        본인 개인정보 입력
      </CardHeader>
      <Form className={`form-floating mb-3`}>
        <Input className="form-control fw-bold border" name="userName" onChange={onChange} />
        <Label className="">이름</Label>
      </Form>
      <Form className="form-floating mb-3">
        <Input className="form-control fw-bold border" name="userAge" onChange={onChange} />
        <Label className="">나이</Label>
      </Form>
      <Form className="form-floating mb-3">
        <Input className="form-control fw-bold border" name="userSex" onChange={onChange} />
        <Label className="">성별</Label>
      </Form>
      <Form className="form-floating mb-3">
        <Input className="form-control fw-bold border" name="userPhone" onChange={onChange} />
        <Label className="">전화번호(- 없이 입력)</Label>
      </Form>
      <Form className="form-floating mb-3">
        <Input className="form-control fw-bold border" name="userInfoNumber" onChange={onChange} />
        <Label className="">주민번호(앞자리6글자)</Label>
      </Form>
      <Form className="form-floating mb-3">
        <Input className="form-control fw-bold border" name="userPassword" onChange={onChange} />
        <Label className="">카드비밀번호(4자리)</Label>
      </Form>
      {/* <Form className="form-floating mb-3">
          <Input className="form-control fw-bold border" name="account" onChange={onChange}/>
          <Label className="">잔액</Label>
        </Form> */}
      <Button color={"primary"} onClick={() => submitUserInfo()}>
        제 출
      </Button>
    </Card>
  )
}

export default InputUserInfo;

 

 

<Test>

1) 고객 정보 입력

고객 정보 입력

2) 입력 후 결과

입력 후 결과

 

3) 입력 후 Header 

 

 

 

5. 입력 이후,  다음 메뉴의 대한 페이지 구현

 

import Header from '../Header'
import styles from '../index.module.scss'
import { Button, Col, Row } from 'reactstrap'
import { useNavigate } from 'react-router'
import { useResetRecoilState } from 'recoil'
import { userInfoState } from '../../recoil/state/userInfoState'

const MenuIndex = () => {
  const navigate = useNavigate();
  
  // default 값으로 reset용
  const resetUserInfo = useResetRecoilState(userInfoState);
  
  const pageMoveClick = (url:any) => {
    if (url === '/inputuserinfo') {
      // recoil state 값 default 초기화
      resetUserInfo();
    }
    navigate(url);
  }
  return (
    <div>
      <Header />
      <div className={`${styles?.container} ${styles?.menuBarContainer}`}>
        <h1>메뉴 선택</h1>
        <div className={`${styles?.menuBar} mt-5`}>
          <Row>
            <Col>
              <Button onClick={() => {pageMoveClick('/bank')}}>계좌 조회</Button>
            </Col>
            <Col>
              <Button onClick={() => {pageMoveClick('/posfood')}}>음식 주문</Button>
            </Col>
            <Col>
              <Button onClick={() => {pageMoveClick('/inputuserinfo')}}>종료(처음 화면으로 돌아가기)</Button>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  )
}

export default MenuIndex

 

<결과>

입력 후 Header 및 메뉴

※ 종료 시, recoil state 값을 default로 해주면 좋다. 

 

 

6. 마치며

회원 정보 페이지의 대해 다뤄봤습니다.

비록 간단한 페이지지만, recoil로 활용하는 방법의 대해 알아보게 되었습니다.

다음으로는 계좌 처리 서비스 개발의 대한 페이지 및 서비스로 다뤄보겠습니다. (H2 Database 연동 x 버전)