[6] 음식점 포스 프로그램 - 화면단 개발(4) : 이벤트 로그 컴포넌트 구성

이번 시간에는 좀 더 유용한 이벤트 로그를 찍는 것을 개발하였습니다.

고객이 사용한 행위의 대한 기록을 남기는 용도로 로그로 남겨 진행하였습니다.

특별한 요구 사항은 없지만, 고객이 한 행위를 관리자 관점이나 하는 행위에 대해 테스트 용도로 쓰기 위해 만들용도로 쓰이니 참조하였으면 하는 바램입니다. (관리자 관점일 경우 로그 관리 기능으로 유용하게 사용 가능)

 

 

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. 요구사항에서 제대로 동작이 되어지는지 확인하기 위한 화면 기능

 

3. 각각 로그 셋팅

로그인 진입과 성공, 계좌 입출금, 음식 주문 선택만 // 구매 끝날 시 은행 계좌, 사용자 정보 state 값 초기화

 

 

 

<recoil/state/logInfoState.tsx>

- Log state 설정

import {atom} from 'recoil'

const today = new Date();

export const logInfoState = atom({
  key: 'logInfo',
  default: [{
      lno: 1,
      uno: -1, // 누가 로그인 했는지 알 수 없음 (-1로 지정)
      pageNo: 1,
      pageEventTitle: "로그인",
      pageEventView: "로그인 진입",
      crtTime: JSON.stringify(today),
  }],
});

 

 

<component/index.tsx>

- 아래에 이벤트창 띄우는 컴포넌트 설정

    <Router>
      <div className={`${styles?.componentContainer}`}>
        <Routes>
          <Route path="/" element={<InputUserInfo />} />
          <Route path="/inputuserinfo" element={<InputUserInfo />} />
          <Route path="/menuindex" element={<MenuIndex />} />
          <Route path="/posfood" element={<PosFood />} />
          <Route path="/bank" element={<Bank />} />
        </Routes>

        <br /><br /><br />

        {/* 로그창 띄우기 */}
        <LogInfo />
      </div>
    </Router>

 

 

<component/loginfo/LogInfo.tsx>

- 로그 화면창 띄우기

import React from "react";
import { Card, CardBody, CardHeader, Table } from "reactstrap";
import styles from "../index.module.scss";
import { useRecoilValue } from "recoil";
import { logInfoState } from '../../recoil/state/logInfoState'

const LogInfo = () => {
  const logInfo = useRecoilValue(logInfoState);
  return (
    <Card body className={`${styles?.kioskLog}`}>
      <CardHeader tag="h1">주문 정보 관련 로그</CardHeader>
      <CardBody>
        <Table border={1} className={`w-100`}>
          <thead className={`w-100`}>
            <tr>
              <th>번호(lno)</th>
              <th>사용 메뉴(selectNumber)</th>
              <th>이벤트(event)</th>
            </tr>
          </thead>
          <tbody>
            {logInfo?.map((log : any, index : number)=> 
              <tr key={index}>
                <td>{log?.lno}</td>
                <td>{log?.pageNo} - {log?.pageEventTitle}</td>
                <td>{log?.pageEventView}</td>
                <td>{log?.crtTime}</td>
              </tr>
            )}
          </tbody>
        </Table>
      </CardBody>
    </Card>
  );
};

export default LogInfo;

 

<component/UserInfo/InputUserInfo.tsx>

- 로그인 및 로그인 성공의 대한 로그를 담는다.

  /** 로그값 추가 */
  const logInfo: any[] = useRecoilValue(logInfoState);
  const setLogInfo = useSetRecoilState(logInfoState);
  const today = new Date();

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

    setUserInfo(createForm)

    /** 로그에 담는다 */
    const createLog: any = {
      lno: logInfo.length + 1,
      uno: 1,
      pageNo: 1,
      pageEventTitle: "로그인",
      pageEventView: "로그인 성공",
      crtTime: JSON.stringify(today),
    }

    setLogInfo(
      [...logInfo,
      createLog]
    )

    navigate('/menuindex');
  }

로그 출력 영역

 

 

 

 

<component/posfood/PosFood.tsx>

- 음식 구입에 대한 로그를 담는다.

  /** 로그값 추가 */
  const logInfo: any[] = useRecoilValue(logInfoState);
  const setLogInfo = useSetRecoilState(logInfoState);
  const today = new Date();

  // 구입 시 선택
  const purchaseFood = (f:any | Object) => {
    let tempBankInfo = {
      bno: bankInfo?.bno,
      userMoney: bankInfo.userMoney - f?.foodPrice - f?.VAT
    }

    
    /** 구입의 대한 로그에 담는다 */
    const createLog: any = {
      lno: logInfo.length + 1,
      uno: 1,
      pageNo: 4,
      pageEventTitle: "음식 주문",
      pageEventView: "음식 주문 : " + f?.foodMenu + "["+  (f?.foodPrice + f?.VAT) +"원], 잔액["+tempBankInfo.userMoney+"원]",
      crtTime: JSON.stringify(today),
    }

로그 출력 영역

 

 

 

<component/bank/Bank.tsx>

- 은행 입/출금에 대한 로그를 담는다.

  /** 로그값 추가 */
  const logInfo: any[] = useRecoilValue(logInfoState);
  const setLogInfo = useSetRecoilState(logInfoState);
  const today = new Date();

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

    /** 로그에 담는다 */
    const createLog: any = {
      lno: logInfo.length + 1,
      pageNo: 3,
      pageEventTitle: "계좌",
      pageEventView: "출금 10만원, 남은 잔액 : " + (bankInfo.userMoney - 100000) + "원",
      crtTime: JSON.stringify(today),
    }

    setLogInfo(
      [...logInfo,
        createLog]
    )
  }
  const incrementMoney = () => {
    let tempBankInfo = {
      bno: bankInfo?.bno,
      userMoney: bankInfo.userMoney + 100000
    }
    setBankInfo(tempBankInfo)

    /** 로그에 담는다 */
    const createLog: any = {
      lno: logInfo.length + 1,
      uno: 1,
      pageNo: 3,
      pageEventTitle: "계좌",
      pageEventView: "입금 10만원, 남은 잔액 : " + (bankInfo.userMoney + 100000) + "원",
      crtTime: JSON.stringify(today),
    }

    setLogInfo(
      [...logInfo,
        createLog]
    )
  }

로그 출력 영역

 

 

 

<component/menu/MenuIndex.tsx>

- 메뉴 버튼을 뒤로 가기 시 초기화 한다.

  // default 값으로 reset용
  const resetUserInfo = useResetRecoilState(userInfoState);
  const resetLogInfo = useResetRecoilState(logInfoState);
  const resetUserBankInfo = useResetRecoilState(userBankInfoState);

  const pageMoveClick = (url:any) => {
    // Partial<Path> path = new Partial<>(url);
    if (url === '/inputuserinfo') {
      // recoil state 값 default 초기화
      resetUserInfo();
      // 계좌 초기화
      resetUserBankInfo();
      // 로그 초기화
      resetLogInfo();
    }
    navigate(url);
  }

로그 출력 영역

 

 

 

 

4. 마치며

고객이 이용한 서비스 로그로 이용하여 로그인, 입출금, 음식 주문과 같은 내역을 출력하도록 완성하였다.

다음 시간에는 백엔드 데이터 베이스 설계 및 인터페이스 개발을 다뤄보도록 한다.